基本概念
本质上是一种匹配模式,只要等号两边的模式相同,那么左边的变量就可以被赋予对应的值。
解构赋值主要分为:
1 数组的解构赋值
2 对象的解构赋值
3 基本类型的解构赋值
举个例子,比如我们要声明
let a = 1;
let b = 2;
let c = 3;
现在有了解构赋值以后,我们完全可以这样写
let [a,b,c] = [1,2,3];
console.log(a,b,c); // 1 2 3
上面两种声明方式完全是等价的,控制台可以正常的打印出a,b,c的值
1 数组的解构赋值
let [a,[[b],c]] = [1,[[2],3]];
console.log(a,b,c); //1,2,3
//只要等号两边的模式相同,那么左边的变量就可以被赋予对应的值。
let [,,c] = [1,2,3];
console.log(c); //3
let [x] = [];
console.log(x); //let x; 解构不成功,那么它的值默认就是undefind
//就是说声明了一个变量,并没有赋值
在解构赋值的时候,还允许指定默认值,
let [y = 1] = [];
console.log(y); //1
2 对象的解构赋值
let {a,b} = {b:'bbb',a:'aaa'}; //顺序无影响
console.log(a,b); // aaa bbb
let {a : b} = {a : 1};
console.log(b); //1
console.log(a); //未定义
//所以这种形式定义的是b的变量,和a没有任何关系
3 基本类型的解构赋值
首先我们来看一看字符串的解构赋值
let [a,b,c,d] = '1234';
console.log(a,b,c,d);//这也就证明的咱们声明了四个变量,分别是1,2,3,4
我们都知道字符串是可以被转化为数组的,那么字符串length属性
因此我们还可以为这种length属性进行解构赋值
let {length: len} = 'zhang';
console.log(len); //5 这个5刚好是字符串的长度
除了字符串以外,我们还可以对数值和布尔值进行解构赋值
let {toString:ts} = 1;
let {toString:bs} = true;
console.log(ts === Number.prototype.toString);//true
console.log(bs === Boolean.prototype.toString);//true
除了以上基本类型还有null和undefind
null和undefind是不能进行解构赋值的,使用null和undefind解构赋值的时候都会报错
如:
let [a] = null;//报错