如何使用forEach循环自动通过querySelector获取数组中元素？

错误原因分析 #

你写出的const element.boxName = ...是无效语法：

• const声明要求后面跟合法的标识符，不能直接使用属性访问表达式（element.boxName是属性访问，不是标识符）；
• 同时element已经是forEach回调的参数变量，这里重复声明也会触发语法报错。

推荐解决方案：用统一对象存储元素（避免污染全局） #

创建一个容器对象，把所有元素按boxName作为键存储进去，既实现批量获取，又不会污染全局作用域：

const boxes = [
  {jsName: '.js-box1', boxName: 'upperLeft'},
  {jsName: '.js-box2', boxName: 'upperCenter'},
  {jsName: '.js-box3', boxName: 'upperRight'},
  {jsName: '.js-box4', boxName: 'centerLeft'},
  {jsName: '.js-box5', boxName: 'centerMiddle'},
  {jsName: '.js-box6', boxName: 'centerRight'},
  {jsName: '.js-box7', boxName: 'lowerLeft'},
  {jsName: '.js-box8', boxName: 'lowerMiddle'},
  {jsName: '.js-box9', boxName: 'lowerRight'}
];

// 创建容器对象
const boxElements = {};
boxes.forEach(item => {
  boxElements[item.boxName] = document.querySelector(item.jsName);
});

// 使用示例
console.log(boxElements.upperLeft); // 访问对应元素

其他可选方案 #

1. 创建全局变量（不推荐，易引发命名冲突）

如果一定要生成全局作用域的变量，可以挂载到window对象上：

boxes.forEach(item => {
  window[item.boxName] = document.querySelector(item.jsName);
});

// 直接使用变量
console.log(upperLeft);

2. 数组解构一次性声明（适合固定数量元素）

利用map先获取所有元素数组，再通过解构生成变量：

const [
  upperLeft, upperCenter, upperRight,
  centerLeft, centerMiddle, centerRight,
  lowerLeft, lowerMiddle, lowerRight
] = boxes.map(item => document.querySelector(item.jsName));

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