JavaScript数组复制洗牌后添加唯一id出现重复问题如何解决

• 引用类型浅拷贝问题：原数组元素为对象类型，使用展开运算符合并数组时仅复制了对象引用，两个相同名称的元素实际指向同一块内存地址，修改任意一个的id属性都会同步到另一个，直接导致id重复。
• id赋值时机错误：循环中先给当前位置元素赋值id，随即执行元素交换。已经赋过id的元素被交换到未遍历区域时会被二次赋值覆盖id，未遍历到的元素被交换到已遍历区域时则不会被赋值，最终出现id重复、部分元素无id的问题。

调整实现逻辑：先对每个元素做浅拷贝生成独立对象，完成数组复制后统一给所有元素添加唯一id，最后再执行洗牌算法打乱顺序。
修正后的代码如下：

const duplicateCards = (arr) => {
  // 复制数组时每个元素生成新的独立对象，避免引用共用
  const duplicatedArr = [...arr.map(item => ({...item})), ...arr.map(item => ({...item}))];
  // 先给所有元素添加唯一id
  duplicatedArr.forEach((item, index) => item.id = index);
  // 执行Fisher-Yates洗牌算法打乱顺序
  for (let i = duplicatedArr.length - 1; i > 0; i--) {
    const randomIndex = Math.floor(Math.random() * (i + 1));
    [duplicatedArr[i], duplicatedArr[randomIndex]] = [duplicatedArr[randomIndex], duplicatedArr[i]];
  }
  return duplicatedArr;
};

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