测试一些基本的JavaScript代码时出现意外输出

Question

我正在学习Javascript中的不同数组函数，并且无法理解我编写的用于测试array.map（）的基本代码的输出。

let contacts = [{

  "firstName": "Jim",

  "lastName": "Smith"

}, {

  "firstName": "Laura",

  "lastName": "Bush"

}, {

  "firstName": "Adam",

  "lastName": "Shaw"

}];

let tempJson = {};

const newContacts = contacts.map(contact => {

//tempJson = {}

tempJson[contact.firstName] = contact.lastName

console.log(tempJson);

return tempJson;

});

console.log(newContacts);

预期产量

//tempJson

{ "Jim": "Smith" }

{ "Jim": "Smith", "Laura": "Bush" }

{ "Jim": "Smith", "Laura": "Bush", "Adam": "Shaw" }

//newContacts

[ { "Jim": "Smith", }, 

  { "Jim": "Smith", "Laura": "Bush"}, 

  { "Jim": "Smith", "Laura": "Bush", "Adam": "Shaw" } ]

实际产量

//tempJson

{ "Jim": "Smith" }

{ "Jim": "Smith", "Laura": "Bush" }

{ "Jim": "Smith", "Laura": "Bush", "Adam": "Shaw" }

//newContacts

[ { "Jim": "Smith", "Laura": "Bush", "Adam": "Shaw" }, 

  { "Jim": "Smith", "Laura": "Bush", "Adam": "Shaw" }, 

  { "Jim": "Smith", "Laura": "Bush", "Adam": "Shaw" } ]

新的通讯录数组不应该只包含map函数返回的对象吗？

我错过了一些东西，我不确定它是什么。

Answer 1

您正在返回对的引用，tempJson因此最终结果tempJson将反映在该引用上newContacts，而不是clone您的tempJson，然后返回克隆的Object。let contacts = [{    "firstName": "Jim",    "lastName": "Smith"  }, {    "firstName": "Laura",    "lastName": "Bush"  }, {    "firstName": "Adam",    "lastName": "Shaw"  }];    let tempJson = {};    const newContacts = contacts.map(contact => {    let clonedObj = {};    tempJson[contact.firstName] = contact.lastName    Object.assign(clonedObj, tempJson);    return clonedObj;  });    console.log(newContacts);PS：reduce正如其他人所指出的那样更合适。let contacts = [{    "firstName": "Jim",    "lastName": "Smith"  }, {    "firstName": "Laura",    "lastName": "Bush"  }, {    "firstName": "Adam",    "lastName": "Shaw"  }];  const output = contacts.reduce((accu, {firstName, lastName}, i) => {    accu.push({...accu[i-1], [firstName]: lastName });    return accu;}, []);console.log(output);

Answer 2

使用reduce来代替：let contacts = [{  "firstName": "Jim",  "lastName": "Smith"}, {  "firstName": "Laura",  "lastName": "Bush"}, {  "firstName": "Adam",  "lastName": "Shaw"}];const newContacts = Object.entries(contacts.reduce((acc, { firstName, lastName }) => {  acc[firstName] = lastName;  return acc;}, {})).map(([k, v]) => ({[k]: v}));console.log(newContacts);

Answer 3

该.map()函数旨在用于获取数组并将每个元素转换为新数组的相应元素值。看来您想要做的是从数组的元素中构建一个新对象，因此这并不是真正的工作.map()。更通用的.reduce()函数会更好：它允许您在迭代遍历数组元素时将结果累积为任何类型的值。在这种情况下，您可以使用.reduce()以下方法：const newContacts = contacts.reduce(function(result, contact) {  result[contact.firstName] = contact.lastName;  return result;}, {});这第二个参数{}来.reduce()为初始值。它在每次迭代时作为第一个参数传递给回调函数，并且回调函数负责返回更新后的值。