JavaScript 数组映射，同时将原始元素保留在数组中答案

【问题标题】：JavaScript array map while keeping original elements in the arrayJavaScript 数组映射，同时将原始元素保留在数组中
【发布时间】：2019-06-22 04:04:32
【问题描述】：

我有这个数组。

const data = [
  { name: "A", age: "12" },
  { name: "B", age: "5" },
  { name: "C", age: "6" }
];

我想像这样将名为 key 的附加属性添加到此数组中。

const data = [
  { name: "A", age: "12", key: "A12" },
  { name: "B", age: "5", key: "B5" },
  { name: "C", age: "6", key: "C6" }
];

我厌倦了这个地图功能，输出不是我期望的。如何使用 JS 地图功能实现这一点..

const data = [
  { name: "A", age: "12"},
  { name: "B", age: "5"},
  { name: "C", age: "6"}
];

console.log(
  "MAP",
  data.map(element => (element.key = element.name + element.age))
);

【问题讨论】：

标签： javascript arrays object ecmascript-6

【解决方案1】：

你需要从map回调中返回一个对象：

const data = [
  { name: "A", age: "12"},
  { name: "B", age: "5"},
  { name: "C", age: "6"}
];

console.log(
  data.map(({ name, age }) => ({ name, age, key: name + age }))
);

如果您希望改变现有对象，请使用forEach 而不是.map：

const data = [
  { name: "A", age: "12"},
  { name: "B", age: "5"},
  { name: "C", age: "6"}
];

data.forEach((obj) => {
  obj.key = obj.name + obj.age;
});
console.log(data);

【讨论】：

【解决方案2】：

返回element 以及使用逗号运算符：

const data = [
  { name: "A", age: "12"},
  { name: "B", age: "5"},
  { name: "C", age: "6"}
];

console.log(data.map(element => (element.key = element.name + element.age, element)));

.as-console-wrapper { max-height: 100% !important; top: auto; }

或者只是更改您的 map 回调以通过解构使其更简单：

const data = [
  { name: "A", age: "12"},
  { name: "B", age: "5"},
  { name: "C", age: "6"}
];

console.log(data.map(({ name, age }) => ({ name, age, key: name + age})));

.as-console-wrapper { max-height: 100% !important; top: auto; }

【讨论】：

【解决方案3】：

有不止一种方法可以做到这一点，Array.map 是迄今为止提供的最简洁和干净的方法。以下是一些其他方法：

 const data = [ { name: "A", age: "12" }, { name: "B", age: "5" }, { name: "C", age: "6" } ];

let from = Array.from(data, ({name, age}) => ({name, age, key: name+age}))
let assign = data.map(({name, age}) => Object.assign({name, age}, {key: name+age}))

console.log('from: ', from)
console.log('assign: ', assign)

如果你想从所有values 生成一个密钥（假设都是原语）你也可以这样做：

const data = [
  { name: "A", age: "12", city: 'Miami' },  // "key": "A12Miami"
  { name: "B", age: "2", gender: 'M'},      // "key": "B2M"
];

let all = data.map(obj => 
  ({...obj, ...Object.fromEntries([['key', Object.values(obj).join('')]])}))

console.log(all)

这样您就不必指定或关心流行名称等。

【讨论】：