JavaScript如何将数组元素按顺序赋值给对象的对应属性？

最优实现方案（现代浏览器通用） #

利用ES2015+规定的对象属性遍历顺序规则，直接获取对象键列表和DOM集合按索引一一对应赋值即可，代码简洁且满足需求：

const keyArr = Object.keys(keys);
document.querySelectorAll('.k').forEach((domEl, index) => {
  // 边界判断，避免索引超出范围时报错
  if (keyArr[index]) keys[keyArr[index]] = domEl;
});

强兼容/可控顺序方案 #

如果需要兼容IE等不支持对象属性按定义顺序遍历的旧环境，或者希望完全控制赋值顺序不受对象结构调整影响，可以手动声明键的顺序数组：

// 手动指定和DOM顺序对应的属性名列表，顺序完全可控
const orderList = ['kShift', 'kSpace', 'kEnter', 'kA', 'kS', 'kD', 'kW'];
const domList = document.querySelectorAll('.k');

orderList.forEach((key, idx) => {
  if (domList[idx]) keys[key] = domList[idx];
});

注意事项 #

• 两种方案都做了边界兼容：如果DOM数量少于对象属性数，未匹配到的属性会保持原有null值；如果DOM数量更多，多余的DOM会被忽略，不会给对象新增多余属性
• 第一种方案依赖JS引擎对ES2015对象属性顺序规则的支持，目前Chrome、Edge、Firefox、Safari 10及以上版本都完全支持

内容的提问来源于stack exchange，提问作者Aлександр Агафонов