使用 Reduce Javascript 更新对象属性并将它们添加到新的 Arr

Question

我试图在具有键值对属性的对象数组上使用 addKeyAndValue 函数中的 reduce，在每个对象中添加一个新的键值对并将其返回到一个新数组中。 addKeyAndValue 函数接收三个参数，即 arr、键和要在数组中每个对象中相加的值。然后，我在 Reduce 回调中使用 push 将数组中的对象推送到累加器中的新数组，并使用括号表示法使用更新的新键和值。

var arr = [{name: 'Alonso'}, {name: 'James'}, {name: 'Chris'}, {name: 'Steve'}]

function addKeyAndValue(arr, key, value){
    return arr.reduce(function(acc, nextValue, idx){
        console.log(next);
        acc.push(nextValue[key] = value);
        return acc;
    },[]);
}

预期的结果应该是：

addKeyAndValue(arr, 'title', 'Instructor') // 
      [
        {title: 'Instructor', name: 'Alonso'}, 
        {title: 'Instructor', name: 'James'}, 
        {title: 'Instructor', name: 'Chris'}, 
        {title: 'Instructor', name: 'Steve'}
       ]

但是，我在 Chrome 开发控制台中得到的结果是：

(4) ["Instructor", "Instructor", "Instructor", "Instructor"]
0:"Instructor"
1:"Instructor"
2:"Instructor"
3:"Instructor"
length:4
__proto__:Array(0)

我想知道为什么通过nextValue[key] 传递的值会覆盖整个对象并仅作为字符串返回。当我尝试仅将现有对象推送到新数组中时，它可以正常工作，但是当推送nextValue[key] 时，它会变为未定义，并且在执行上述nextValue[key] = value 时，它会将对象覆盖到仅包含instructor 字符串的新数组中。我有点困惑，因为我期待不同的结果。

在 nextValue 上使用方括号符号 nextValue[key]，这是数组中的每个对象都被 reduce 方法中的回调迭代，我认为在这种情况下会添加一个新的键属性 "title"，分配值为 @987654330 @。

任何帮助将不胜感激，谢谢:)。

Answer 1

您正在将赋值结果推送到数组中，而不是对象中。

因为结果nextValue[key] = value 是value。使用acc.push(nextValue[key] = value); 就像使用acc.push(value)。

由于您要更新每个对象，use Array#map 来迭代数组。使用Object#assign 克隆每个对象（以防止改变原始对象），并添加属性：

var arr = [{name: 'Alonso'}, {name: 'James'}, {name: 'Chris'}, {name: 'Steve'}];

function addKeyAndValue(arr, key, value){
  return arr.map(function(obj){
    var clone = Object.assign({}, obj);
    clone[key] = value;
    return clone;
  });
}

var result = addKeyAndValue(arr, 'title', 'Instructor');

console.log(result);

ES6 版本

const arr = [{name: 'Alonso'}, {name: 'James'}, {name: 'Chris'}, {name: 'Steve'}];

function addKeyAndValue(arr, key, value){
  return arr.map((obj) => Object.assign({ [key]: value }, obj));
}

const result = addKeyAndValue(arr, 'title', 'Instructor');

console.log(result);

Answer 2

您的push 参数只会导致value 被推送，而不是对象。如果你真的想在一个表达式中解决这个问题，你可以使用逗号运算符来解决这个问题：

acc.push((nextValue[key] = value, nextValue));

但是如果你单独做它可能会更易读：

nextValue[key] = value;
acc.push(nextValue);