将键值对添加到数组中的所有对象

我想向数组中的所有对象添加一个键：值参数。

eg:

var arrOfObj = [{name: 'eve'},{name:'john'},{name:'jane'}];

现在我想向所有对象添加一个新参数 isActive，以便生成的数组如下所示。

eg:

    [{
    name: 'eve',
    isActive: true
}, {
    name: 'john',
    isActive: true
}, {
    name: 'jane',
    isActive: true
}]

我总是可以循环遍历数组并插入键值对。但想知道是否有更好的方法

The map() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/mapfunction 是这种情况的最佳选择

tl;dr - 这样做：

const newArr = [
  {name: 'eve'},
  {name: 'john'},
  {name: 'jane'}
].map(v => ({...v, isActive: true}))

The map() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map功能不会修改初始数组，但创建一个新数组。 这也是保持初始数组不被修改的好习惯。

备择方案:

const initialArr = [
      {name: 'eve'},
      {name: 'john'},
      {name: 'jane'}
    ]

const newArr1 = initialArr.map(v => ({...v, isActive: true}))
const newArr2 = initialArr.map(v => Object.assign(v, {isActive: true}))

// Results of newArr1 and newArr2 are the same

添加键值对有条件的

const arr = [{value: 1}, {value: 1}, {value: 2}]   
const newArr1 = arr.map(v => ({...v, isActive: v.value > 1}))

如果条件为假时我根本不想添加新字段怎么办？

const arr = [{value: 1}, {value: 1}, {value: 2}]   
const newArr = arr.map(v => {
  return v.value > 1 ? {...v, isActive: true} : v 
})

Adding WITH修改初始数组

const initialArr = [{a: 1}, {b: 2}]
initialArr.forEach(v => {v.isActive = true;});

这可能不是一个最好的主意，但在现实生活中有时这是唯一的方法。

问题

• 我应该使用扩展运算符（...), or Object.assign有什么区别？

就我个人而言，我更喜欢使用展开运算符，因为我认为它在现代 Web 社区中使用得更广泛（尤其是 React 的开发人员喜欢它）。但你可以自己检查一下差异：link https://stackoverflow.com/a/32926019/930170（有点固执己见和老旧，但仍然如此）

• 我可以用吗function关键字而不是=>?

你当然可以。粗箭头（=>) 函数的作用有点不同this，但对于这个特殊情况来说并不那么重要。但粗箭头的功能更短，有时作为回调发挥更好的作用。因此，使用粗箭头函数是更现代的方法。

• map 函数内部实际发生了什么：.map(v => ({...v, isActive: true})?

Map 函数按数组的元素进行迭代，并为每个元素应用回调函数。该回调函数应该返回一些将成为新数组元素的内容。 我们告诉.map()函数如下：取当前值（v这是一个对象），将所有键值对从v并将其放入一个新对象中（{...v})，还要添加属性isActive并将其设置为 true ({...v, isActive: true})，然后返回结果。顺便说一句，如果原始对象包含isActive提交后它将被覆盖。Object.assign以类似的方式工作。

• 我可以一次添加多个字段吗

Yes.

[{value: 1}, {value: 1}, {value: 2}].map(v => ({...v, isActive: true, howAreYou: 'good'}))

• 我不应该在里面做什么.map() method

你不应该做任何副作用[link 1 https://stackoverflow.com/questions/8129105/javascript-closures-and-side-effects-in-plain-english-separately, link 2] https://medium.com/javascript-scene/master-the-javascript-interview-what-is-functional-programming-7f218c68b3a0，但显然你可以。

还要注意的是map()迭代数组的每个元素并为每个元素应用函数。所以如果你在里面做一些重的事情，你可能会很慢。这个（有点hacky）solution https://stackoverflow.com/a/39828104/930170在某些情况下可能会更有成效（但我认为您一生中不应该多次应用它）。

• 我可以将地图的回调提取到单独的函数吗？

你当然可以。

const arr = [{value: 1}, {value: 1}, {value: 2}]   
const newArr = arr.map(addIsActive)

function addIsActive(v) {
    return {...v, isActive: true}
}

• 旧的 for 循环有什么问题？

没有什么问题for，你仍然可以使用它，它只是一种老式的方法，更冗长，更不安全，并且会改变初始数组。但你可以尝试：

const arr = [{a: 1}, {b: 2}]
for (let i = 0; i < arr.length; i++) {
 arr[i].isActive = true
}

• 我还应该学习什么

学习好以下方法将是明智的map() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map, filter() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter, reduce() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce, forEach() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach, and find() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find。这些方法可以解决你通常想要用数组做的事情的 80%。