Javascript 了解对象的贴图功能：键和值

您好，我在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[obj.key]=obj.value；在原始数组中，找到键的值并用该键的值替换原始键

---

Array.prototype.map

不会替换。它对原始数组中的每个元素应用您提供的回调函数，并将结果输出推送到新数组中。从：

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

需要注意的是，原始数组是而不是

map

要更改的

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

我认为rObj[obj.key]=obj.value；在原始数组中，找到键的值并用该键的值替换原始键

---

Array.prototype.map

不会替换。它对原始数组中的每个元素应用您提供的回调函数，并将结果输出推送到新数组中。从：

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

需要注意的是，原始数组是而不是

map

要更改的

// 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}

映射操作将为每个操作返回的所有项放置到一个新数组中，因此它返回： [{'1'：10}，{'2'：20}，{'3'：30}]

从第（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}

映射操作将为每个操作返回的所有项放置到一个新数组中，因此它返回： [{'1'：10}，{'2'：20}，{'3'：30}]

---

rObj

是每次调用回调时创建的一个新的空对象

rObj[obj.key]=obj.value

然后向该对象添加一个属性名为

obj.key

…它们不会消失-它们仍然在

kvArray

中我不理解您的问题。在映射中，将为每个数组项创建一个新对象。每个对象的键都指定了当前数组索引的索引，该值就是当前数组索引的值。reformattedArray是一个包含所有对象的返回数组。这实际上与映射无关。下面的示例是等效的：

object1={key:'a'，value:'b'}；object2={}；object2[object1.key]=object2.value

。制作

object2

对

object1

没有影响。哦，谢谢你们。我找到了我困惑的地方。我对下标符号感到困惑。

rObj

是每次调用回调时创建的一个新的空对象

rObj[obj.key]=obj.value

然后向该对象添加一个属性名为

obj.key

…它们不会消失-它们仍然在

kvArray

中我不理解您的问题。在映射中，将为每个数组项创建一个新对象。每个对象的键都指定了当前数组索引的索引，该值就是当前数组索引的值。reformattedArray是一个包含所有对象的返回数组。这实际上与映射无关。下面的示例是等效的：

object1={key:'a'，value:'b'}；object2={}；object2[object1.key]=object2.value

。制作

object2

对

object1

没有影响。哦，谢谢你们。我找到了我困惑的地方。我只是对下标符号感到困惑。