使用对象理解映射函数：键和值答案

【问题标题】：Understanding map functions with objects: Keys and Values使用对象理解映射函数：键和值
【发布时间】：2016-06-06 03:11:05
【问题描述】：

您好，我在 MDN 上遇到了一个带有 map 的示例，我通过常规数组理解它，但这个示例让我陷入了循环。

var kvArray = [{key:1, value:10}, {key:2, value:20}, {key:3, value: 30}];
var reformattedArray = kvArray.map(function(obj){ 
   var rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
});
// reformattedArray is now [{1:10}, {2:20}, {3:30}], 
// kvArray is still [{key:1, value:10}, {key:2, value:20}, {key:3, value: 30}]

基本上我不明白“键”和“值”属性是如何“消失”的。我以为 rObj[obj.key] = obj.value;在原始数组中表示的行，找到键的值并将原始键替换为该键的值，此时我似乎真的很困惑。有人可以解释一下他们是如何得到这些值的吗？

【问题讨论】：

rObj 是每次调用回调时创建的新空对象。 rObj[obj.key] = obj.value; 然后将一个属性添加到该对象，其属性名称等于obj.key...
他们并没有消失——他们仍然在kvArray
我不明白你的问题。在地图中，为每个数组项创建一个新对象。这些对象中的每一个都为其键分配了当前数组索引的索引，值是当前数组索引的值。 reformattedArray 是一个包含所有对象的返回数组。
这其实和map没什么关系。以下示例是等效的：object1 = {key: 'a', value: 'b'}; object2 = {}; object2[object1.key] = object2.value。制作object2对object1没有影响。
哦，谢谢你们。我发现了我困惑的地方。我只是对下标符号感到困惑。

标签： javascript arrays dictionary

【解决方案1】：

你说：

我认为 rObj[obj.key] = obj.value;在原始数组中表示的行，找到键的值并将原始键替换为该键的值。

Array.prototype.map 不会替换。它将您提供的回调函数应用于原始数组中的每个元素，并将结果输出推送到新数组中。来自docs：

map() 方法创建一个新数组，其结果是对该数组中的每个元素调用提供的函数。

请务必注意，原始数组不会被 map 更改。

【讨论】：

【解决方案2】：

// kvArray is source array
var kvArray = [{key:1, value:10}, 
               {key:2, value:20}, 
               {key:3, value: 30}];

var reformattedArray = kvArray.map(function(obj){ 
    var rObj = {}; //  --------- line (1)
    rObj[obj.key] = obj.value; //  --------- line (2)
    return rObj;   //  --------- line (3)
});

从第(1)行到第(3)行没有引用kvArray，因此kvArray会保持不变，映射操作后不会被修改
在第 (1) 行，var rObj = {} 正在为 kvArray 中的每个项目创建一个全新的对象

在第(2)行，对于 kvArray 中的每个元素，将元素的键作为属性分配给 rObj，并将元素的值作为值分配。

   -- during interation 1, 1st element {key:1, value:10} becomes
      rObj[1] = 10
   -- during interation 2, 2nd element {key:2, value:20} becomes
      rObj[2] = 20
   -- during interation 3, 3rd element {key:3, value:30} becomes
      rObj[3] = 30

在第 (3) 行返回 rObj -- 在交互 1 期间，它返回 {'1':10} -- 在交互 2 期间，它返回 {'2':20} -- 在第 3 次交互期间，它返回 {'3':30}
map 操作将每个操作返回的所有项目放入一个新数组中，因此它返回： [{'1':10}, {'2':20}, {'3':30}]

【讨论】：