如何在另一个数组中的数组中添加键值对？

Question

//我有以下答复：

    [
  {
    "userId": 1,
    "id": 3,
    "title": "fugiat veniam minus",

"company": {
      "name": "Deckow-Crist",
      "catchPhrase": "Proactive didactic contingency",
      "bs": "synergize scalable supply-chains"
    }
  },


 {
    "userId": 2,
    "id": 4,
    "title": "fugiat veniam minus",

"company": {
      "name": "Deckow-Crist",
      "catchPhrase": "Proactive didactic contingency",
      "bs": "synergize scalable supply-chains"
    }
  },

 ]

//我希望将这个键值对添加到两个位置(“已完成”：false)，使其看起来类似于以下响应：

[
  {
    "userId": 1,
    "id": 3,
    "title": "fugiat veniam minus",
     **"completed": false**

"company": {
      "name": "Deckow-Crist",
      "catchPhrase": "Proactive didactic contingency",
      "bs": "synergize scalable supply-chains"
       **"completed": false**
    }
  },


 {
    "userId": 2,
    "id": 4,
    "title": "fugiat veniam minus",
     **"completed": false**
     "company": {
      "name": "Deckow-Crist",
      "catchPhrase": "Proactive didactic contingency",
      "bs": "synergize scalable supply-chains"
     **"completed": false**
    }
  },  
  
]

.......................................................................................................................

Answer 1

Array.map可以解决你的问题。

const result = input.map(x => {
    x.completed = false;
    x.company = x.company.map(c => ({ ...c, completed: false }))
    return x;
})

您可以检查已完成的演示：

​

const input = [{
    "userId": 1,
    "id": 3,
    "title": "fugiat veniam minus",
    "company": [{
      "name": "Deckow-Crist",
      "catchPhrase": "Proactive didactic contingency",
      "bs": "synergize scalable supply-chains"
    }, {
      "name": "Deckow-Crist",
      "catchPhrase": "Proactive didactic contingency",
      "bs": "synergize scalable supply-chains"
    }]
  },
  {
    "userId": 2,
    "id": 4,
    "title": "fugiat veniam minus",
    "company": [{
      "name": "Deckow-Crist",
      "catchPhrase": "Proactive didactic contingency",
      "bs": "synergize scalable supply-chains"
    }, {
      "name": "Deckow-Crist",
      "catchPhrase": "Proactive didactic contingency",
      "bs": "synergize scalable supply-chains"
    }]
  },
];

const result = input.map(x => {
  x.completed = false;
  x.company = x.company.map(c => ({ ...c, completed: false }))
  return x;
})

console.log(result);

​

Answer 2

如果希望保留原始数据并将数组视为map()，则可以使用扩展算子和不可变的。

​

const users = [
  {
    userId: 1,
    id: 3,
    title: "fugiat veniam minus",
    company: {
      name: "Deckow-Crist",
      catchPhrase: "Proactive didactic contingency",
      bs: "synergize scalable supply-chains",
    },
  },
  {
    userId: 2,
    id: 4,
    title: "fugiat veniam minus",
    company: {
      name: "Deckow-Crist",
      catchPhrase: "Proactive didactic contingency",
      bs: "synergize scalable supply-chains",
    },
  },
];

const revisedUsers = users.map(user => ({
    ...user,
    completed: false,
    company: {
        ...user.company,
        completed: false
    }
}))

console.log(`
-----------------
Result
-----------------`)
console.log(revisedUsers);

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

​

Answer 3

数组操纵

您可以使用Array.prototype.map将您的数组映射到一个新的数组，它遍历数组的每一项，并且可以从回调函数返回要添加到新数组中的任何类型的数据。

const mappedArray = yourArray.map(user => {
    user.completed = false;
    user.company.completed = false;
    return user;
});

使用扩展算子

const mappedArray = yourArray.map(user => {
    return {
        ...user,
        completed: false,
        company: {
            ...user.company,
            completed: false,
        }
    };
});