覆寫物件陣列中的物件

覆寫物件陣列中的物件的最佳方法是什么？

我希望每個用戶名只有一個物件，在這種情況下，在最初的 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);

uj5u.com熱心網友回復：

在陣列中找到匹配的物件后使用Object.assign — 以便用另一個資料物件覆寫/修改物件資料username

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);

uj5u.com熱心網友回復：

我通常會找到具有該用戶名的索引，如果存在，則將新物件拼接到該位置，如果不存在，則將新物件拼接到末尾

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));

uj5u.com熱心網友回復：

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);

uj5u.com熱心網友回復：

只需映射物件并使用所需的值重新分配值。

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);

uj5u.com熱心網友回復：

我們可以通過撰寫一個帶有謂詞的通用版本將匹配測驗與物件合并分開。這是一個以不可變方式執行此操作的版本：

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)]

標籤：javascript 数组 算法 javascript 对象

上一篇：回應時間段資料驗證選單的每日平均利潤（不包括當天）

下一篇：將物件轉換為陣列