Неожиданный вывод при тестировании некоторого базового кода 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" } ]

Разве новый массив контактов не должен состоять только из объекта, возвращенного функцией карты?

Я что-то упустил, и я не уверен, что это такое.

Answer 1

Функция .map() предназначена для получения массива и преобразования каждого элемента в соответствующее значение элемента для нового массива.Похоже, что вы хотите создать новый объект из элементов массива, так что это не совсем работа для .map().Более общая функция .reduce() была бы лучше: она позволяет вам накапливать результаты в любое значение, когда итерация проходит через элементы массива.

В этом случае вы можете использовать .reduce() следующим образом:

const newContacts = contacts.reduce(function(result, contact) {
  result[contact.firstName] = contact.lastName;
  return result;
}, {});

Этот второй аргумент {} до .reduce() является начальным значением.Он передается в качестве первого аргумента функции обратного вызова на каждой итерации, и обратный вызов отвечает за возврат обновленного значения.

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

Вы возвращаете ссылку на tempJson, из-за которой ваши окончательные результаты в tempJson отражаются newContacts вместо clone вашего tempJson, а затем возвращают клонированный Объект.

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