JavaScript 數組映射，同時保留數組中的原始元素

Question

我有這個數組。

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

Answer 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);

Answer 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; }

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

這樣您就不必指定或關心流行音樂名稱等。