ES6 解构赋值详解:数组、对象与字符串

作者:木棉

时间:2026-10-22

浏览:484

本文详细介绍 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 解构赋值,欢迎支持。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章