JavaScript赋值全攻略：从基础操作到高级技巧，彻底掌握数据流向！265

嗨，各位前端小伙伴们！今天我们要聊一个JavaScript中最基本、却又充满“魔力”的概念——赋值（Assignment）。你可能觉得这不就是把一个值赋给一个变量那么简单吗？非也！从最简单的等号到复杂的解构、对象拷贝，再到ES2021新增的逻辑赋值，JavaScript的赋值操作远比你想象的要丰富和强大。掌握好它，你才能真正掌控数据在程序中的流动。系好安全带，我们一起深入探索JavaScript赋值的奥秘吧！

一、初识赋值：变量声明与基础 `=` 操作符

在JavaScript中，赋值最常见的形式就是通过等号 `=` 来实现。但在此之前，我们需要先声明一个变量来存放这个值。这里就不得不提我们熟悉的 var、let 和 const 三兄弟了。
`var`：老大哥，函数作用域，存在变量提升，可重复声明和赋值。现代JS中不推荐使用。
`let`：块级作用域，不可重复声明，但可以重复赋值。是日常变量的首选。
`const`：块级作用域，不可重复声明，一旦赋值后就不能再修改（对于基本类型是值不变，对于引用类型是引用地址不变）。用于声明常量或不希望被重新赋值的变量。

无论哪种声明方式，基础赋值的语法都是相同的：变量名 = 值;
let message = "Hello JavaScript!"; // 将字符串 "Hello JavaScript!" 赋值给变量 message
const PI = 3.14159; // 将数字 3.14159 赋值给常量 PI
let count = 0;
count = 10; // 重新赋值
// PI = 3.14; // 错误！const声明的常量不能重新赋值

等号 `=` 的作用是将右侧表达式的值赋给左侧的变量。这是一个从右到左的操作。

二、效率提升：复合赋值运算符

当你需要对一个变量进行某种操作后，再将结果重新赋回给它时，JavaScript提供了一系列复合赋值运算符，它们是基础赋值符 `=` 和算术、位操作符的结合体，能让代码更简洁高效。

常见的复合赋值运算符有：
`+=` (加等于): a += b; 等同于 a = a + b;
`-=` (减等于): a -= b; 等同于 a = a - b;
`*=` (乘等于): a *= b; 等同于 a = a * b;
`/=` (除等于): a /= b; 等同于 a = a / b;
`%=` (模等于): a %= b; 等同于 a = a % b;
`=` (幂等于): a = b; 等同于 a = a b; (ES7新增)
`> b;
`>>>=` (无符号右移等于): a >>>= b; 等同于 a = a >>> b;
`&=` (按位与等于): a &= b; 等同于 a = a & b;
`|=` (按位或等于): a |= b; 等同于 a = a | b;
`^=` (按位异或等于): a ^= b; 等同于 a = a ^ b;


let num = 10;
num += 5; // num 现在是 15 (10 + 5)
num *= 2; // num 现在是 30 (15 * 2)
let str = "Hello";
str += " World!"; // str 现在是 "Hello World!"

三、艺术与效率的结合：解构赋值（Destructuring Assignment）

ES6引入的解构赋值绝对是JavaScript赋值操作中的一大亮点，它允许我们从数组或对象中提取值，并将它们赋给独立的变量，语法简洁，极大地提升了代码可读性和编写效率。

1. 数组解构赋值

你可以按位置将数组的元素赋值给变量：
const colors = ["red", "green", "blue"];
const [firstColor, secondColor, thirdColor] = colors;
(firstColor); // "red"
(secondColor); // "green"

还可以跳过不关心的元素，或者使用剩余（rest）语法来捕获数组的其余部分，以及设置默认值：
const [,, lastColor] = colors; // 跳过前两个元素
(lastColor); // "blue"
const [a, b, ...restColors] = ["red", "green", "blue", "yellow", "purple"];
(a); // "red"
(restColors); // ["blue", "yellow", "purple"]
const [name, age, city = "未知"] = ["张三", 30]; // 提供默认值
(city); // "未知"

2. 对象解构赋值

对象解构通过属性名来匹配值。它更加灵活，因为顺序不重要。
const user = {
name: "李四",
age: 25,
occupation: "Developer"
};
const { name, age } = user;
(name); // "李四"
(age); // 25

你可以给解构出的变量起一个不同的名字，设置默认值，或者使用剩余语法：
const { name: userName, age: userAge, city: userCity = "北京" } = user;
(userName); // "李四"
(userCity); // "北京"
const { occupation, ...restInfo } = user;
(occupation); // "Developer"
(restInfo); // { name: "李四", age: 25 }

解构赋值在函数参数中也大放异彩，让函数参数的定义更加清晰。

四、深入理解：对象的赋值与拷贝（浅拷贝与深拷贝）

当涉及到对象和数组（它们都是引用类型）的赋值时，情况就变得有些微妙了。直接使用 `=` 赋值，传递的不是值本身，而是对内存地址的引用。
let obj1 = { a: 1, b: 2 };
let obj2 = obj1; // obj2 引用了 obj1 的内存地址
obj2.a = 10;
(obj1.a); // 10，obj1 也被修改了！

这通常不是我们想要的结果，我们可能需要一个完全独立的副本。这就引出了“拷贝”的概念，分为浅拷贝（Shallow Copy）和深拷贝（Deep Copy）。

1. 浅拷贝（Shallow Copy）

浅拷贝会创建一个新对象，然后将原始对象的所有属性值（对于基本类型是值，对于引用类型是引用地址）拷贝到新对象中。也就是说，如果属性值是对象，新旧对象仍然共享同一个嵌套对象。

a. 使用展开运算符（Spread Syntax `...`）

这是最常用也是最简洁的浅拷贝方式，适用于对象和数组。
const originalArray = [1, 2, { c: 3 }];
const shallowCopiedArray = [...originalArray];
shallowCopiedArray[0] = 100; // 修改基本类型，不影响原数组
shallowCopiedArray[2].c = 300; // 修改引用类型内部，会影响原数组
(originalArray); // [1, 2, { c: 300 }]
(shallowCopiedArray); // [100, 2, { c: 300 }]
const originalObject = { name: "Tom", score: { math: 90, english: 85 } };
const shallowCopiedObject = { ...originalObject };
= "Jerry"; // 修改基本类型，不影响原对象
= 95; // 修改引用类型内部，会影响原对象
(); // 95

b. 使用 `()` 方法

() 方法用于将所有可枚举的自有属性的值从一个或多个源对象复制到目标对象。它返回目标对象。
const target = {};
const source = { a: 1, b: { c: 2 } };
(target, source);
target.b.c = 20;
(source.b.c); // 20，依然是浅拷贝

2. 深拷贝（Deep Copy）

深拷贝会创建一个完全独立的新对象，包括所有嵌套的对象和数组。新对象和原对象之间没有任何引用关系。

JavaScript原生并没有提供直接的深拷贝方法，常见的实现方式有：
`((obj))`： 适用于纯粹的JSON兼容对象（不能处理函数、Symbol、`undefined`、循环引用等）。
递归拷贝函数： 自己实现一个递归函数来遍历并拷贝所有层级的属性。
第三方库： 如Lodash的 `()`。

深拷贝是处理复杂数据结构时非常重要的概念，虽然复杂，但在避免意外副作用时不可或缺。

五、新时代赋值利器：逻辑赋值运算符（ES2021+）

随着ECMAScript 2021的发布，JavaScript引入了三个新的复合赋值运算符，它们结合了逻辑运算符和赋值操作，让条件赋值变得更加简洁。

1. 逻辑与赋值 (`&&=`)：当左侧为真时才赋值

a &&= b; 等同于 if (a) { a = b; }，或者更精确地是 a = a && b;。它会在 a 为真值（truthy）时，将 b 的值赋给 a。
let x = 10;
let y = 20;
x &&= y; // x 为真 (10), 所以 x = y; 此时 x 为 20
(x); // 20
let z = null;
let w = "hello";
z &&= w; // z 为假 (null), 所以 z 不会被赋值
(z); // null

2. 逻辑或赋值 (`||=`)：当左侧为假时才赋值

a ||= b; 等同于 if (!a) { a = b; }，或者更精确地是 a = a || b;。它会在 a 为假值（falsy）时，将 b 的值赋给 a。常用于为变量设置默认值。
let config = { theme: "dark" };
||= "light"; // 为真 ("dark"), 不会被赋值
(); // "dark"
let settings = {};
||= "en"; // 为 undefined (假), 所以 = "en"
(); // "en"

3. 空值合并赋值 (`??=`)：当左侧为 `null` 或 `undefined` 时才赋值

a ??= b; 等同于 if (a === null || a === undefined) { a = b; }，或者更精确地是 a = a ?? b;。它只会在 a 的值为 `null` 或 `undefined` 时，才将 b 的值赋给 a。这是 `||=` 的更严格版本，不会将 `0` 或空字符串 `''` 视为需要赋值的“假值”。
let preference = 0; // 0 是假值，但不是 null/undefined
preference ??= 100; // preference 不为 null/undefined, 不会被赋值
(preference); // 0
let username; // undefined
username ??= "Guest"; // username 为 undefined, 被赋值为 "Guest"
(username); // "Guest"
let email = null;
email ??= "default@"; // email 为 null, 被赋值
(email); // "default@"

这三个逻辑赋值运算符让代码的意图表达更加清晰，尤其是在处理默认值和条件赋值的场景下。

六、赋值的链式操作与表达式特性

1. 链式赋值

你可能会看到这样的代码：
let x, y, z;
x = y = z = 10; // 从右向左依次赋值
(x, y, z); // 10 10 10

这是因为赋值操作符 `=` 具有右结合性，它会从右向左执行。首先 `z = 10` 被执行，然后这个赋值操作的结果（也就是10）又被赋给了 `y`，最后 `y` 的赋值结果（也是10）又被赋给了 `x`。

2. 赋值作为表达式

在JavaScript中，赋值操作本身是一个表达式，它会返回被赋的值。这意味着你可以在其他表达式中使用赋值操作。
let a = 5;
let b = (a = 10) + 2; // a 被赋值为 10，然后 (10 + 2) 赋给 b
(a); // 10
(b); // 12
let isValid = false;
if (isValid = true) { // isValid 被赋值为 true，并且 if 语句判断为真
("条件成立！");
}

虽然这种特性很强大，但在 `if` 语句等条件判断中直接使用赋值操作可能会导致代码不易读或产生混淆，因此通常不推荐这种做法，除非你非常清楚其意图。

结语

看到这里，你是不是对JavaScript的赋值操作有了更全面、更深入的理解呢？从最基础的 `=`，到高效的复合赋值，再到优雅的解构赋值，处理引用类型时的深浅拷贝考量，以及ES2021带来的逻辑赋值新特性，再到赋值作为表达式的巧妙应用，每一个细节都值得我们细细品味和实践。

赋值是构建任何JavaScript应用的基础，理解它的运作机制，不仅能帮助你写出更健壮、更高效的代码，也能让你在阅读他人代码时更加游刃有余。现在，就去你的代码编辑器里，把这些知识点都操练起来吧！如果你有任何疑问或心得，欢迎在评论区与我交流！

2025-10-22

上一篇：解锁JavaScript中的“清单”力量：PWA、模块化与性能优化的秘钥

下一篇：JavaScript `noop` 函数：不起眼的“空操作”，却是代码设计中的优雅利器！