[英]Unexpected output in testing some basic javascript code
I am learning about different array functions in Javascript and I am not able to comprehend the output of a basic code that I wrote to test array.map(). 我正在学习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);
Expected output 预期产出
//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" } ]
Actual output 实际输出
//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" } ]
Shouldn't the new contacts array only consist of the object returned by map function? 新的contacts数组不应该只包含map函数返回的对象吗?
I am missing something and I am not sure what it is. 我错过了什么,我不确定它是什么。
You are returning the reference to tempJson
because of which your final results in tempJson
are reflected newContacts
, instead clone
your tempJson
and then return the cloned Object. 您在返回参考
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
is more appropriate as pointed by others. 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);
The .map()
function is intended to be used to take an array and transform each element into a corresponding element value for a new array. .map()
函数旨在用于获取数组并将每个元素转换为新数组的相应元素值。 It seems that what you want to do is build up a new object from the elements of an array, so that's not really a job for .map()
. 看来你想要做的是从数组元素中构建一个新对象 ,这对于
.map()
并不是一个真正的工作。 The more general .reduce()
function would be better: it allows you to accumulate results into any sort of value as iteration proceeds through the elements of an array. 更通用的
.reduce()
函数会更好:它允许您在迭代继续遍历数组元素时将结果累积到任何类型的值中。
In this case, you could use .reduce()
as follows: 在这种情况下,您可以使用
.reduce()
,如下所示:
const newContacts = contacts.reduce(function(result, contact) {
result[contact.firstName] = contact.lastName;
return result;
}, {});
That second argument {}
to .reduce()
is the starting value. 第二个参数
{}
到.reduce()
是起始值。 It's passed as the first argument to the callback function on each iteration, and the callback is responsible for returning the updated value. 它作为每次迭代的回调函数的第一个参数传递,并且回调负责返回更新的值。
Use reduce
instead: 使用
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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.