JavaScript：forEach循环全局变量持久化作用域问题及角色权限复选框配置

嘿，我来帮你搞定这两个JavaScript问题，都是开发中常碰到的场景，咱们逐个拆解：

这个坑大多是因为用了var声明变量导致的——毕竟var没有块级作用域，在forEach循环里如果用var定义变量，循环结束后这个变量会保留最后一次循环的值，尤其是循环里包含异步操作（比如setTimeout、API请求）时，这个问题会特别突出。

举个典型的反例：

var arr = [1,2,3];
arr.forEach(function(item) {
  var num = item;
  setTimeout(function() {
    console.log(num); // 会输出三次3，而不是预期的1、2、3
  }, 100);
});

解决方案： #

• 优先用let/const代替var：let和const拥有块级作用域，每次循环都会创建一个新的变量绑定，异步操作就能拿到当前循环的正确值：

const arr = [1,2,3];
arr.forEach(function(item) {
  let num = item;
  setTimeout(function() {
    console.log(num); // 正常输出1、2、3
  }, 100);
});

• 兼容旧环境的话用闭包：如果你的项目还需要支持ES6之前的环境，可以用闭包把变量包裹起来，不过现在主流环境都支持ES6了，还是let/const更简洁直观。

这个需求核心是把角色已分配的权限和全量权限做匹配，给匹配上的权限标记选中状态，然后渲染到页面。咱们一步步来实现：

第一步：先明确数据结构（可根据你的实际结构调整） #

假设你的数据是这样的：

// 带已分配权限的角色数组
const roles = [
  {
    id: 1,
    name: "管理员",
    permissions: [
      { id: "p1", name: "用户管理" },
      { id: "p3", name: "系统设置" }
    ]
  },
  {
    id: 2,
    name: "编辑",
    permissions: [
      { id: "p2", name: "内容编辑" }
    ]
  }
];

// 所有可选权限的全量数组
const allPermissions = [
  { id: "p1", name: "用户管理" },
  { id: "p2", name: "内容编辑" },
  { id: "p3", name: "系统设置" },
  { id: "p4", name: "数据统计" }
];

第二步：处理数据，给权限添加选中状态 #

我们可以先把每个角色的已分配权限ID存入Set（查找效率更高），再遍历全量权限，判断是否属于该角色的权限，添加checked属性：

// 遍历每个角色，处理权限选中状态
roles.forEach(role => {
  // 把当前角色的权限ID转成Set，O(1)时间复杂度查找
  const assignedIds = new Set(role.permissions.map(perm => perm.id));
  // 给全量权限添加checked标记
  role.permissionsWithStatus = allPermissions.map(perm => ({
    ...perm,
    checked: assignedIds.has(perm.id)
  }));
});

第三步：渲染到HTML页面 #

用原生JS动态生成DOM即可，也可以结合框架（Vue/React）实现，这里给原生示例：

<!-- 页面容器 -->
<div id="role-perms-container"></div>

const container = document.getElementById('role-perms-container');

roles.forEach(role => {
  // 创建角色标题
  const roleHeader = document.createElement('h3');
  roleHeader.textContent = `${role.name}的权限`;
  container.appendChild(roleHeader);

  // 创建权限复选框组
  const permGroup = document.createElement('div');
  role.permissionsWithStatus.forEach(perm => {
    const permItem = document.createElement('div');
    permItem.innerHTML = `
      <input type="checkbox" id="perm-${perm.id}" ${perm.checked ? 'checked' : ''}>
      <label for="perm-${perm.id}">${perm.name}</label>
    `;
    permGroup.appendChild(permItem);
  });
  container.appendChild(permGroup);
});

关键细节说明： #

• 用Set存储权限ID是因为Set.has()比数组的includes()查找效率更高，权限数量多的时候差异会很明显。
• 用扩展运算符...perm复制原权限对象，避免修改原始数据，保持数据的纯净性。

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