测试一些基本的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.lastNameconsole.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()为初始值。它在每次迭代时作为第一个参数传递给回调函数，并且回调函数负责返回更新后的值。