品牌建设不断深化网站推广与优化平台
JavaScript 赋值运算符
一、基础赋值运算符
1. 简单赋值 =
let x = 10; // 变量初始化
const PI = 3.14; // 常量声明
let obj = {a:1}; // 对象引用传递（非深拷贝）
2. 链式赋值
let a, b, c;
a = b = c = 5; // 从右向左执行：c=5 → b=c → a=b
3. 解构赋值（ES6+）
// 数组解构
let [x, y] = [1, "text"]; // x=1, y="text"// 对象解构
let {name, age} = {name: "Alice", age: 25};
二、复合赋值运算符（更新变量）
4. 算术复合运算
| 运算符 | 等效表达式 | 示例 | 结果 |
|---|---|---|---|
+= | x = x + y | x=3; x += 2; | 5 |
-= | x = x - y | x=5; x -= "3"; | 2（隐式转换） |
*= | x = x * y | x=2; x *= 1e3; | 2000 |
/= | x = x / y | x=10; x /= "2"; | 5 |
**= | x = x**y | x=3; x **= 2; | 9 |
%= | x = x % y | x=10; x %= 3; | 1 |
5. 位运算复合
let n = 5;
n <<= 1; // 左移1位 → 10（二进制 101 → 1010）
n |= 0b001; // 按位或 → 11（二进制 1010 | 0001 = 1011）
三、逻辑赋值运算符（ES2021+）
6. 短路赋值
| 运算符 | 等效逻辑 | 典型场景 |
|---|---|---|
&&= | x = x && y | 条件初始化：config.debug &&= true |
| ` | =` | |
??= | x = x ?? y | 避免覆盖null/undefined：value ??= 0 |
示例对比：
let a = 0;
a ||= 10; // a保持0（0非假值，但 || 认为0是假值）
a ??= 10; // a保持0（?? 仅处理null/undefined）
四、特殊赋值场景
7. 对象属性动态赋值
const key = "age";
const person = {};
person[key] = 30; // {age:30}// 计算属性名（ES6）
const obj = { [key.toUpperCase()]: 25 }; // {AGE:25}
8. 函数返回值赋值
function getData() { return [1, [2,3]]; }
let [num, [, subNum]] = getData(); // num=1, subNum=3
五、运算符优先级与注意事项
9. 优先级规则
| 运算符类型 | 优先级 | 示例解析 |
|---|---|---|
赋值运算符 =系列 | 3（最低） | x = y = 5 → 先执行y=5 |
逗号运算符 , | 1 | x = (y=2, y+3) → x=5 |
10. 避坑指南
-
隐式类型转换风险
let str = "5"; str += 3; // "53"（字符串拼接） str =+ 3; // 3（错误写法，实为 str = +3） -
不可变值的操作
const arr = [1,2]; arr[0] = 99; // 允许（修改引用内容） arr = [3,4]; // 报错（禁止重新赋值） -
解构默认值设定
let {width=100, height=200} = {width: null}; // width=null（默认值对null无效），height=200
总结：JavaScript 赋值运算符从基础的 = 到现代的逻辑赋值 ??=，展现了语言的高效演进。关键要掌握复合运算符的隐式转换规则、解构赋值的模式匹配能力，以及优先级对运算顺序的影响。在复杂场景中，建议通过括号明确运算顺序，并优先使用 const 声明避免意外修改。