如何用.map()配合querySelectorAll()生成自定义索引数组

架构老林

2026-8-30

自定义键名索引存储实现方案

问题说明

你当前使用Array.map()生成的是默认数字索引的数组，无法直接实现用option标签value属性作为自定义索引存储对应文本的需求。

注意：JS中如果要使用字符串作为自定义键存储值，优先推荐使用普通对象{}或Map结构；虽然数组也支持添加字符串键，但这类键不会被计入数组长度，也无法被多数数组原生遍历方法识别，不推荐在生产环境使用。

实现代码

直接替换你原有的JS逻辑即可，HTML部分不需要改动：

let list = document.querySelectorAll("option");
// 初始化空对象作为存储容器
let items = {};
list.forEach(elem => {
  // 取option的value属性作为键，元素文本内容作为对应值
  items[elem.value] = elem.text;
});

console.log(items);
// 访问方式完全匹配你的预期：items['car'] 会返回 'Ferrari'

可选：Map结构实现（更适合键值对场景）

如果需要更规范的键值对存储能力，可以用ES6新增的Map结构：

let list = document.querySelectorAll("option");
let items = new Map();
list.forEach(elem => {
  items.set(elem.value, elem.text);
});

// 访问时使用get方法：items.get('car') 即可拿到 'Ferrari'
console.log(items);