如何基于数组长度创建仅含有效元素的JavaScript Map？

现有两个数组：

const elements = ['12345', '12346', '12347', '12348', '12349', '12350'];
const fruits = ['Apple', 'Ball'];

需要生成一个键值对集合，要求：

• 以elements的元素作为键
• 键的数量与fruits数组长度一致，丢弃elements中多余的元素
• 期望结果：

  eleFruitMap: { '12345' => 'Apple',
                 '12346' => 'Ball'}
  

但当前实现得到错误结果：

eleFruitMap: { '12347' => 'Apple',
               '12348' => 'Ball',
               '12349' => undefined,
               '12350' => undefined,
}

尝试的代码：

const elements = ['12345', '12346', '12347', '12348', '12349', '12350'];
const fruits = ['Apple', 'Ball'];

let eleFruitMap = elements.slice(fruits.length).map((key, index) => ({
  [key]: fruits[index]
}));
console.log('NEW MAP: ', eleFruitMap);

错误原因分析 #

1. elements.slice(fruits.length)是从索引2开始截取元素，拿到的是elements的后半部分，和需求中取前N个元素的逻辑相反
2. map方法返回的是对象数组，不是一个统一的键值对集合，且后续元素对应fruits中不存在的索引，因此出现undefined

正确实现方式 #

方式1：生成普通JS对象

通过slice(0, fruits.length)截取elements的前N个元素，再用reduce拼接成对象：

const elements = ['12345', '12346', '12347', '12348', '12349', '12350'];
const fruits = ['Apple', 'Ball'];

const eleFruitObj = elements.slice(0, fruits.length).reduce((result, key, index) => {
  result[key] = fruits[index];
  return result;
}, {});

console.log('eleFruitObj:', eleFruitObj);
// 输出: eleFruitObj: { '12345': 'Apple', '12346': 'Ball' }

方式2：生成真正的Map实例

如果需要标准的Map对象，可以直接用Map构造函数，结合map生成键值对数组：

const elements = ['12345', '12346', '12347', '12348', '12349', '12350'];
const fruits = ['Apple', 'Ball'];

const eleFruitMap = new Map(
  elements.slice(0, fruits.length).map((key, index) => [key, fruits[index]])
);

console.log('eleFruitMap:', eleFruitMap);
// 输出: eleFruitMap: Map(2) { '12345' => 'Apple', '12346' => 'Ball' }

内容的提问来源于stack exchange，提问作者Arnold Jr.