JavaScript使用for循环生成带唯一ID的对象数组ID重复如何解决

问题根因 #

• 你仅在代码初始化阶段生成了一次子数组内容，后续给外层数组resultArray添加的都是同一个testArray的引用。JavaScript中数组、对象属于引用类型，变量存的是内存地址而非实际值，所以你实际往外层数组里塞了三个指向同一个内存空间的数组，自然所有子数组内容完全一致。
• 原代码中子数组的生成逻辑没有和外层循环绑定，不会为每个外层子项单独生成新的随机ID。

修复方案 #

直接把生成子数组的逻辑挪到外层循环内部，每次循环都创建全新的子数组和对象即可：

const testFunc = () => {
  let resultArray = []

  const rn = () => {
    return ~~(Math.random() * 1000)
  }

  // 外层循环生成3个独立子数组
  for (let i = 0; i < 3; i++) {
    // 每次循环新建独立子数组，避免引用共用
    let testArray = []
    // 内层循环生成子数组内的5个对象，和预期输出长度对齐
    for (let j = 0; j < 5; j++) {
      testArray.push({
        id: rn(),
        text: j
      })
    }
    resultArray.push(testArray)
  }

  console.log(resultArray)
  return resultArray
}

扩展说明 #

如果需要支持对象嵌套子数组的需求，可以把生成单组对象的逻辑抽成递归函数，需要嵌套时递归生成子数组即可。如果担心随机数ID重复，可以用Date.now() + 随机数的组合，或者用全局自增变量作为ID，保证全局唯一。

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