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

Question

我想为数组中的所有对象添加一个 key:value 参数。

例如:

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

现在我想向所有对象添加一个新参数 isActive，以便生成的数组看起来像这样。

例如:

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

我总是可以遍历数组并插入一个键值对。但是想知道是否有更好的方法来做到这一点

Answer 1

map()函数是这种情况的最佳选择

---

tl;dr - 这样做:

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

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

添加 WITH 修改初始数组

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

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

---

问题

• 我应该使用扩展运算符( ... )还是 Object.assign有什么区别？

我个人更喜欢使用扩展运算符，因为我认为它在现代网络社区中使用得更广泛(尤其是 React 的开发人员喜欢它)。但是您可以自己检查差异:link (有点自以为是和老，但仍然)

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

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

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

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

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

是的。

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

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

你不应该有任何副作用 [link 1 , link 2] ，但显然你可以。

还要注意 map()遍历数组的每个元素并为每个元素应用函数。所以如果你在里面做一些重的东西，你可能会很慢。这(有点老套)solution在某些情况下可能会更有效率(但我认为您一生中不应该多次应用它)。

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

当然可以。

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

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

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

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

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

• 我还应该学习什么

学好以下方法会很聪明map() , filter() , reduce() , forEach() , 和 find() .这些方法可以解决 80% 你通常想用数组做的事情。