本文详细介绍 ECMAScript 6 中的解构赋值语法,涵盖数组、对象及字符串的解构方式。重点讲解变量匹配规则、默认值生效条件(严格相等)、嵌套解构及惰性求值机制,并说明数值与布尔值转对象的规则及 null/undefined 报错情况。
解构赋值概述
概述
解构赋值允许将结构相同的数组或对象中的值,提取并一一对应赋值给一组变量。
数组解构详解
数组解构
示例如下:
let [a,b,c] = [1,2,3];
console.log(a); //1
console.log([a,b,c]); //[1, 2, 3]
上述代码中,数组元素 1、2、3 分别赋值给变量 a、b、c。
支持对嵌套数组进行解构操作。
let [a,[b,[c]]] = [1,[2,[3]]];
console.log(c); //3
let [d,,e] = [1,2,3];
console.log(e); //3
let [f,...tail] = [1,2,3];
console.log(tail); //[2, 3]
若解构失败,即右侧元素不足,对应变量值为 undefined。
let [a,b] = [1];
console.log(b); //undefined
不完全解构同样合法。
let [a,b,c] = [1,2,3,4];
console.log(c); //3
可为变量设置默认值。
let [a = 1] = [];
console.log(a); //1
let [b = 1] = [2];
console.log(b); //2
let [c = 1] = [undefined];
console.log(c); //1
let [d = 1] = [null];
console.log(d); //null
需注意,ES6 默认值判断使用严格相等运算符(===)。若右侧值与 undefined 不严格相等(如 null),则默认值不生效。
默认值可以是表达式。仅当解构失败触发默认值时,该表达式(如函数调用)才会执行,体现惰性求值特性。
function f(){
alert(1);
}
let [a = f()] = [3]; //f()不会执行
let [b = f()] = [undefined]; //会执行
对象解构规则
对象解构
示例如下:
let {foo,bar} = {foo:1,bar:2};
console.log(foo); //1
与数组不同,对象解构依据变量名而非位置进行匹配,变量名必须与属性名一致。
let {bar,foo} = {foo:1,bar:2};
console.log(foo);//1
若变量名与属性名不一致,需使用以下语法:
let {first: f,last: l} = {first:1,last:3};
console.log(l); //3
此写法表示在对象中查找 first 属性,若存在则赋值给变量 f。其中 first 为模式匹配名,f 为实际变量名。
对象解构的标准完整形式为:
let {first: first,last: last} = {first:1,last:3};
支持对对象进行嵌套解构。
let obj = {
a:1,
b:[
'hello',
{c:'world'}
]
}
let {a: a,b: [h,{c:w}]} = obj;
console.log(a); //1
console.log(h); //hello
console.log(w); //world
对象解构同样支持默认值。若解构失败,变量值为 undefined。
let {x: x = 1,y: y=2,z: z=3,w: w} = {x:3,y:null,z:undefined};
console.log(x) //3
console.log(y) //null
console.log(z) //3
console.log(w) //undefined
其他类型解构
字符串解构
字符串可解构,因其被转换为类似数组的结构。
let [a,b,c] = 'hello';
console.log(a); //h
console.log(b); //e
console.log(c); //l
数值与布尔值解构
若等号右侧为数值或布尔值,解构时会先将其转换为对应的包装对象。
let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: a} = true;
a === Boolean.prototype.toString // true
示例中,数值和布尔值的包装对象均包含 toString 属性,因此变量 s 可获取到该值。
解构规则规定,若右侧非对象或数组,则先转为对象。由于 null 和 undefined 无法转换为对象,对其解构会报错。
以上内容为本文全部要点,旨在帮助读者理解 ES6 解构赋值,欢迎支持。