Question

你好我在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;在原始数组中的行，找到键的值并用该键的值替换原始键，这看起来我真的很困惑。有人可以解释一下他们是如何获得这些价值的吗？

Answer 1

你说：

我以为rObj [obj.key] = obj.value;原始数组中的行，找到键的值，并使用该键的值替换原始键。

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

map（）方法创建一个 new array ，其结果是在此数组中的每个元素上调用一个提供的函数。

重要的是要注意原始数组不意味着被map更改。

Answer 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的属性，而element的值被指定为值。

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

了解具有对象的地图功能：键和值

2 个答案: