map函数中最后一个元素覆盖其他元素的原因及解决方法

原代码 #

var a = {};
var b = [1,2,3,4];
var c = ['a', 'b', 'c', 'd'];

b.map((i) => {
  c.map((j) => {
    a[j] = i
  })
});

console.log(a);

问题原因 #

你写的双重map逻辑完全错了：外层遍历b的每个元素i时，都会把c数组里的所有键j重新赋值成当前的i。比如第一次i=1，所有a['a']、a['b']、a['c']、a['d']都变成1；第二次i=2，又全改成2；直到最后一次i=4，所有键的值都被覆盖成4，所以最终输出全是4。

哪怕换成let的for循环，只要还是用外层循环每个i、内层循环所有c的键来赋值，结果肯定一样——这不是变量作用域的问题，是逻辑本身没对应上b和c的索引关系。

修复方法 #

要实现a的键对应c的元素、值对应b同索引元素的需求，直接按索引关联就行，不用双重循环：

方法1：用for循环遍历索引

var a = {};
var b = [1,2,3,4];
var c = ['a', 'b', 'c', 'd'];

for (let i = 0; i < b.length; i++) {
  a[c[i]] = b[i];
}

console.log(a); // 输出 {a:1, b:2, c:3, d:4}

方法2：用Array.map结合索引

var a = {};
var b = [1,2,3,4];
var c = ['a', 'b', 'c', 'd'];

c.map((key, index) => {
  a[key] = b[index];
});

console.log(a); // 输出 {a:1, b:2, c:3, d:4}

方法3：用Object.fromEntries（ES2019+）

var b = [1,2,3,4];
var c = ['a', 'b', 'c', 'd'];

const a = Object.fromEntries(c.map((key, index) => [key, b[index]]));

console.log(a); // 输出 {a:1, b:2, c:3, d:4}

内容的提问来源于stack exchange，提问作者Rajashekar