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

我试图在具有键值对属性的对象数组中使用reducewithaddKeyAndValue函数，在每个对象中添加一个新的键值对，并在新数组中返回该键值对。addKeyAndValue函数接收三个参数：arr、key和要在数组中的每个对象中相加的值。然后，我使用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

时，它将覆盖对象，从而生成一个新数组，只包含

讲师

字符串。我有点困惑，因为我期待一个不同的结果

在nextValue上使用括号符号

nextValue[key]

，nextValue是数组中由reduce方法中的回调迭代的每个对象，我认为这将在本例中添加一个新的key属性

“title”

，赋值为

“讲师”

---

任何帮助都将不胜感激，谢谢：）。

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

因为结果

nextValue[key]=value

是

value

。使用

acc.push（下一个值[键]=值）

类似于执行

acc.push（值）

因为要更新每个对象，所以需要迭代数组。使用克隆每个对象（以防止更改原始对象），并添加属性：

var arr=[{name:'Alonso'}，{name:'James'}，{name:'Chris'}，{name:'Steve'}]；
函数addKeyAndValue（arr、键、值）{
返回arr.map（函数（obj）{
var clone=Object.assign（{}，obj）；
克隆[键]=值；
返回克隆；
});
}
var结果=addKeyAndValue（arr，‘标题’、‘讲师’）；
控制台日志（结果）您正在将赋值结果推送到数组中，而不是对象中

因为结果
nextValue[key]=value
是
value
。使用
acc.push（下一个值[键]=值）
类似于执行
acc.push（值）

因为要更新每个对象，所以需要迭代数组。使用克隆每个对象（以防止更改原始对象），并添加属性：


var arr=[{name:'Alonso'}，{name:'James'}，{name:'Chris'}，{name:'Steve'}]；
函数addKeyAndValue（arr、键、值）{
返回arr.map（函数（obj）{
var clone=Object.assign（{}，obj）；
克隆[键]=值；
返回克隆；
});
}
var结果=addKeyAndValue（arr，‘标题’、‘讲师’）；
控制台日志（结果）
您的
push
参数只会推送
值，而不会推送对象。如果您确实希望在一个表达式中使用逗号运算符，则可以解决此问题：

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

但如果您单独执行，则可能更具可读性：

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

push
参数只会推送
值，而不会推送对象。如果您确实希望在一个表达式中使用逗号运算符，则可以解决此问题：

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

但如果您单独执行，则可能更具可读性：

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

谢谢你的回答，但是我很清楚其他的数组方法，我确实用reduce的另一种方法解决了这个问题，但是我还不清楚为什么我在这里分享的方法不起作用。我搞不懂。看第一句话。我再加一个例子。是的，我明白了，但仍然不知道为什么会发生。如果你在上面检查tricont共享的代码与我的代码完全相同，但他只是将nextValue[key]=值放在单独的行中，然后放在acc.push（nextValue）下面，这是我想要的。但是，在这种情况下，它不会覆盖将其添加到对象中而不是数组中的对象。您正在更改原始对象
nextValue[key]=value
，但您不会推送对象，而是推送赋值的结果。结果是
值
。对象已更改，但未推入新数组。如果使用
console.log（arr）
，您将看到原始对象已更改。在trincot的回答中，他将值分配给对象，然后推动该对象。是的，我确实注意到，不久前在我的控制台中，通过在arr上使用console.log。另一方面，是我第一次看到trincot使用带有两个括号的方法，他包装了nextValue[key]=value，下一个带有括号的值，它确实工作正常。但我想知道背后的原因，因为我不想再次跳转类似的问题。谢谢你的回答，但我很清楚其他数组方法，我确实用reduce用另一种方法解决了这个问题，但我还不清楚为什么我在这里共享的方法不起作用。我搞不懂。看第一句话。我再加一个例子。是的，我明白了，但仍然不知道为什么会发生。如果你在上面检查tricont共享的代码与我的代码完全相同，但他只是将nextValue[key]=值放在单独的行中，然后放在acc.push（nextValue）下面，这是我想要的。但是，在这种情况下，它不会覆盖将其添加到对象中而不是数组中的对象。您正在更改原始对象
nextValue[key]=value
，但您不会推送对象，而是推送赋值的结果。结果是
值
。对象已更改，但未推入新数组。如果使用
console.log（arr）
，您将看到原始对象已更改。在trincots的回答中，他给对象赋值，然后推动对象。是的，我刚才注意到了