覆盖对象数组中的对象

Question

覆盖对象数组中的对象的最佳方法是什么？

我想每个用户名只有一个对象，在这种情况下，在最初的 arr Francis 中有一个 showMessage 为 true 但 userDetails 具有相同的用户名但 showMessage 的值不同所以我想覆盖最后一个对象在数组中。

预期输出：

[
  { showMessage: true, username: 'Joe' },
  { showMessage: true, username: 'Douglas' },
  { showMessage: false, username: 'Francis' }
]

当前代码：

let obj = {};
let arr = [
{showMessage: true, username: "Joe"}, 
{showMessage: true, username: "Douglas"}, 
{showMessage: true, username: "Francis"}  
]

const userDetails = {
  showMessage: false,
  username: 'Francis',
}
objJSON = userDetails

var newData = [...arr, userDetails] 
console.log("newData: ",newData);

Answer 1

使用 Object.assign after finding in array 匹配 username 的对象 — 为了 overwrite/modify 对象数据与另一个对象数据

const arr = [
  {showMessage: true, username: "Joe"}, 
  {showMessage: true, username: "Douglas"}, 
  {showMessage: true, username: "Francis"}  
]

const userDetails = {
  showMessage: false,
  username: 'Francis',
};

// Update user data by username (if object is found in array):
const oldDetails = arr.find(user => user.username === userDetails.username);
oldDetails && Object.assign(oldDetails, userDetails);

console.log(arr);

Answer 2

我通常会找到具有该用户名的索引，如果它存在，则将新对象拼接到该位置，如果不存在，将新对象拼接到末尾

let arr = [
    {showMessage: true, username: "Joe"}, 
    {showMessage: true, username: "Douglas"}, 
    {showMessage: true, username: "Francis"}  
]

const userDetails = {
  showMessage: false,
  username: 'Francis',
}

const set = (obj) => {
    const i = arr.findIndex(el => el.username === obj.username);
    arr.splice(i === -1 ? arr.length : i, i === -1 ? 0 : 1, obj);
    return arr;
}

var newData = set(userDetails)
console.log("newData: ",newData);

这既适用于添加新对象，也适用于编辑现有对象

但是，我通常会通过使用用户名而不是数组作为键来完全避免这个问题：

let arr = {
    Joe: {showMessage: true, username: "Joe"}, 
    Douglas: {showMessage: true, username: "Douglas"}, 
    Francis: {showMessage: true, username: "Francis"}  
}

const userDetails = {
  showMessage: false,
  username: 'Francis',
}

const set = (obj) => {
   arr[obj.username] = obj
}

set(userDetails)
console.log("newData: ", Object.values(arr));

Answer 3

let arr = [
  { showMessage: true, username: "Joe" },
  { showMessage: true, username: "Douglas" },
  { showMessage: true, username: "Francis" },
];

const userDetails = {
  showMessage: false,
  username: "Francis",
};

const newData = [...arr];

for (let i = 0; i < newData.length; i++) {
    if (arr[i].username == userDetails.username) {
        newData[i] = userDetails;
    }
}

console.log("newData: ", newData);

Answer 4

只需映射对象并用所需的值重新分配值。

let obj = {};
let arr = [
{showMessage: true, username: "Joe"}, 
{showMessage: true, username: "Douglas"}, 
{showMessage: true, username: "Francis"}  
]

const userDetails = {
  showMessage: false,
  username: 'Francis',
}

arr.map((user) => {
  if(user.username === userDetails.username){
      user.showMessage = userDetails.showMessage
  }
})

var newData = [...arr] 
console.log("newData: ",newData);

Answer 5

我们可以通过编写一个带有谓词的通用版本来将 match-testing 从对象合并中分离出来。这是一个以不可变方式执行此操作的版本：

const mergeWhere = (pred) => (objs, obj) => 
  objs .map (o => pred (obj, o) ? Object .assign ({}, o, obj) : o)

const updateUser = mergeWhere ((a, b) => a.username == b.username)


const arr = [{showMessage: true, username: "Joe"}, {showMessage: true, username: "Douglas"}, {showMessage: true, username: "Francis"}]
const userDetails = {showMessage: false, username: 'Francis'}


console .log (updateUser (arr, userDetails))

.as-console-wrapper {max-height: 100% !important; top: 0}

这会将我们的输出合并到所有匹配的输入中。我们可以只用第一个像

这样的东西来做

const mergeWhere = (pred) => (objs, obj, index = objs .findIndex (o => pred (obj, o))) =>
  index == -1
    ? [...objs]
    : [...objs .slice (0, index), Object .assign ({}, objs [index], obj) , objs .slice (index + 1)]

覆盖对象数组中的对象

Overwrite an Object inside an Array of Objects

javascript

arrays

algorithm

javascript-objects