JavaScript基础执行流程疑问：变量赋值后值异常变化问题

嘿，这个问题戳中了JavaScript里一个非常基础但容易踩坑的点——基本类型和引用类型的赋值差异，很多刚入门的同学都会在这里困惑，我给你一步步讲明白～

首先先还原一下你遇到的场景，代码大概是这样的对吧？

let a = [5];
let b = a;
a.push(2);
console.log(b); // 结果是 [5, 2]，而不是你预期的 [5]

核心原因：JavaScript的两种数据类型存储逻辑 #

JavaScript里的数据类型分为两类，它们在内存中的存储和赋值方式完全不同：

• 基本类型：比如数字（number）、字符串（string）、布尔值（boolean）这些，变量存储的是值本身。当你把一个基本类型变量赋值给另一个变量时，会把值完整复制一份，两个变量是完全独立的个体。举个例子：

  let x = 5;
  let y = x;
  x = 10;
  console.log(y); // 输出 5，因为y存的是x原来的值的副本，和x现在的值没关系
  

• 引用类型：数组（Array）、对象（Object）、函数（Function）都属于这类。变量存储的不是值本身，而是这个值在内存中的地址（也就是引用）。当你执行let b = a时，其实是把a里存的那个数组的内存地址复制给了b，现在a和b指向的是内存里的同一个数组对象。所以不管你用a还是b去操作这个数组，本质上都是在修改同一个东西，自然另一个变量也会同步看到变化。

怎么让b和a独立？ #

如果你想让b成为a的“独立副本”，修改a的时候不影响b，就需要手动复制数组，常见的方法有这些：

• 使用展开运算符：let b = [...a];
• 使用Array.from()：let b = Array.from(a);
• 使用数组的slice()方法：let b = a.slice();

这样处理后，b就会指向一个新的数组对象，和a原来的数组完全独立，再修改a就不会影响b啦。

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