如何拼接数组内对象元素的多个属性以生成新属性？

错误原因 #

• 混淆了数组本身和数组内的元素对象：list是存储多个对象的数组，本身不存在name、lastName属性，这些属性属于数组里的每一个子元素，直接访问list.firstName会得到undefined，对undefined做属性访问就会触发你遇到的类型错误。
• 属性名不匹配：原始数组元素的属性是name、lastName，你的代码里错误使用了不存在的firstName、last属性名。
• 语法使用场景错误：你使用对象展开运算符...处理字符串拼接场景，逻辑不匹配，你的需求是拼接字符串，不是合并多个对象的属性。

正确实现代码 #

基础forEach写法 #

var list = [{name: "James", lastName: "M.", age: 58}, {name: "Rachel", lastName: "W.", age: 51}];
list.forEach(function(itm){
  // 拼接当前遍历元素的name和lastName，中间加空格分隔
  itm.username = itm.name + ' ' + itm.lastName;
});

如果你想用Object.assign实现，写法如下：

list.forEach(function(itm){
  Object.assign(itm, {
    username: `${itm.name} ${itm.lastName}`
  });
});

查看属性的正确写法 #

如果要查看数组第一个元素的相关属性，需要先定位到数组的对应元素，再访问它的属性：

console.log(list[0].name); // 输出James
console.log(list[0].username); // 输出James M.

内容的提问来源于stack exchange，提问作者MarcoM