本文深入解析JavaScript中的解构赋值语法，涵盖数组、对象及字符串的解构规则。详细讲解结构匹配、默认值设置、变量交换、类数组处理及已声明变量赋值等核心应用场景，帮助开发者高效提取数据并简化代码逻辑。
1. 什么是解构赋值？
解构赋值的核心机制是从对象或数组中提取属性或值，并将其赋值给独立的变量。
通俗而言，这是一种解析数据结构的技术，旨在从复杂数据中提取所需部分，并赋值给变量或常量。
通过具体示例可以更直观地理解这一概念。
const [a, b, c] = [1, 2, 3];
console.log(a, b, c);
以下代码展示了如何从数组中提取值并赋值给a、b和c。
2. 数组的解构赋值
数组解构依赖于模式（结构）匹配机制。
这意味着赋值语句左侧与右侧的数据结构必须一致，例如左侧为数组，右侧也必须是数组。
赋值过程遵循索引值对应的原则。
即左侧变量与右侧数组在相同索引位置上的值进行匹配和赋值。
通过具体代码示例可以深入理解这一机制。
对于第一个示例：
let [e, [ , , f], g] = [1, [2, 4, 5], 3]; // 可以正确输出
console.log(e, f, g);
若代码书写格式不符合结构匹配要求，则会引发报错。
let [e, [ , , f], [g]] = [1, [2, 4, 5], 3];
console.log(e, f, g);
原因在于左侧与右侧的结构不匹配，例如右侧索引为2的位置是数值3，而左侧对应位置是数组结构，导致无法完成匹配。
对于第二个示例：
let [, a, ] = [1, 2, 3];
console.log(a);
根据索引值相同的赋值原则，a的索引值为1，对应右侧索引为1的值是2，因此a = 2。
2.1) 数组解构赋值的默认值
const [a, b] = [];console.log(a, b);
当左侧对应的索引在右侧为undefined时（例如右侧不存在该值的情况），此时赋值为undefined。
那么如何修改这种默认赋值行为呢？
可以通过在左侧变量后添加“= 期望值”来指定默认值。
因此，当左侧的值=== undefined时，若设置了默认值，左侧变量将等于该默认值。
const [a = 1, b = 2] = [];
console.log(a, b);
2.2) 数组解构赋值的应用
类数组中的应用
例如在arguments对象中的应用场景。
可以将arguments中的值提取出来进行解构。
function fun() {
const [a, b, c] = arguments;
console.log(a, b);
}
fun(1, 2, 3, 4);
再如NodeList集合中的应用场景。
在此场景中，可以将p元素提取出来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>解构赋值的应用</title>
</head>
<body>
<p>one</p>
<p>two</p>
<p>three</p>
<script>
// 利用数组解构赋值将 p 元素获取的同时解构出来
const [p1, p2, p3] = document.querySelectorAll('p');
console.log(p1, p2, p3);
</script>
</body>
</html>
交换变量的值
let a = 1, b = 2;
[a, b] = [b, a]; // 相当于 [a, b] = [2, 1];
console.log(a, b);
3. 对象的解构赋值
对象解构同样依赖于模式（结构）匹配。
即左侧与右侧的结构必须相同，例如左侧是对象，右侧也必须是对象。
赋值过程遵循属性名相同的匹配原则。
即左侧变量名与右侧对象属性名相同时，完成赋值操作。
通过具体示例可以深入理解这一机制。
const {val, objName} = {objName: "object", val: 1};
console.log(objName, val);
属性名相同的完成赋值，无需关心左侧属性名出现的顺序是否与右侧一致。
此外，还可以采用这种写法，为新的变量名赋值。
const {val: vvv, objName: objnnn} = {objName: "object", val: 1};
console.log(objnnn, vvv);
3.1) 对象解构赋值的默认值
其规则与数组解构赋值类似。
当对象的属性值=== undefined时，若设置了默认值，则变量等于对应的默认值。
const {age: val = 18} = {};
console.log(val);
3.2) 对一个已声明的变量解构赋值
在数组解构中，可以直接采用如下写法：
let a, b;
[a, b] = [1, 2];
console.log(a, b);
但在对象解构中，直接采用相同写法会引发报错。
let a, b;
{a, b} = {a: 1, b: 2};
console.log(a, b);
原因在于在此处，左侧的花括号会被浏览器解析为代码块。
那么如何解决这一问题呢？
解决方法是在外层添加圆括号。
let a, b;
({a, b} = {a: 1, b: 2});
console.log(a, b);
此外，对象解构赋值还可以获取继承的属性。
4. 字符串的解构赋值
字符串可以使用数组和对象的形式进行结构赋值。
const [a, b] = "Hello";
// 左边对象的属性名对应右边字符串的字符下标序号
const {2: c, 4: e} = "Hello";
console.log(a, b, c, e);
总结
本文到此结束，希望能为您提供帮助，也欢迎您关注本站更多内容！