JavaScript变量赋值与动态数组更新异常问题求助

嗨，我来帮你理清这两个问题，先从基础的变量赋值说起，再解决你遇到的数组元素意外更新的bug～

一、JavaScript中给新变量赋值的两种情况 #

在JS里，变量赋值分两种核心场景，取决于你要赋值的是基本类型还是引用类型：

• 基本类型（字符串、数字、布尔值、null、undefined）：直接用=赋值就好，这时候新变量会拿到原变量值的独立副本，修改新变量完全不会影响原变量。比如：

  let original = 25;
  let newVar = original;
  newVar = 50;
  console.log(original); // 输出25，不受新变量修改影响
  

• 引用类型（对象、数组）：用=赋值时，传递的是内存中对象的引用地址，新变量和原变量指向同一个对象。这时候修改其中一个变量的属性，另一个也会跟着变——这正是你遇到问题的根源。

二、解决你的动态数组元素意外更新问题 #

看你的代码，问题出在reitems.push(allItems[i]);这一行：你每次push到数组里的都是allItems[i]这个对象的引用，而不是独立的副本。当你在循环里不断修改allItems[i]['categoryId']时，之前已经push到reitems里的元素也会被同步修改，因为它们指向的是同一个对象。

修复方案1：浅拷贝（适合无嵌套对象的场景） #

如果你的allItems[i]对象没有深层嵌套的子对象，用扩展运算符创建对象副本最简洁：

for(let i=0;i<allItems.length;i++){ 
  let categories = allItems[i].categories; 
  for(let j=0;j<categories.length;j++){ 
    let categoryId = categories[j].id; 
    // 创建原对象的副本，并直接添加categoryId属性
    let itemCopy = {...allItems[i], categoryId: categoryId};
    reitems.push(itemCopy); 
  } 
}

修复方案2：深拷贝（适合有嵌套对象的场景） #

如果你的对象有多层嵌套（比如categories里还有子对象），浅拷贝无法复制深层结构，这时候可以用JSON序列化+反序列化来做深拷贝：

for(let i=0;i<allItems.length;i++){ 
  let categories = allItems[i].categories; 
  for(let j=0;j<categories.length;j++){ 
    let categoryId = categories[j].id; 
    // 深拷贝原对象，生成完全独立的新对象
    let itemCopy = JSON.parse(JSON.stringify(allItems[i]));
    itemCopy.categoryId = categoryId;
    reitems.push(itemCopy); 
  } 
}

用简单例子理解问题本质 #

比如这段代码就能复现你遇到的情况：

let obj = {name: "初始值"};
let arr = [];
arr.push(obj);
obj.name = "修改后的值";
console.log(arr[0].name); // 输出"修改后的值"，因为数组存的是对象引用

你的代码逻辑和这个例子一致，每次循环修改的都是同一个对象，所以数组里的所有元素最后都会变成最后一次循环修改的结果。

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