基本概念
变量的解构赋值本质上就是一种匹配模式,只要等号两边的的模式相同,左边的变量就可以被赋予对应的值。
那么根据 javascript 的数据类型可分为:
1.数组的解构赋值。
2.对象的解构赋值。
3.基本类型的解构赋值。
首先我们来看看数组的解构赋值。
例1:
let [a,b,c] = [1,2,3]; //实际上和我们平时常用的let a=1,b=2,c=3;是一个意思。
例2:
let [a,[[b],c]] = [1,[[2],3]] //a=1,b=2,c=3
let [ , ,c] = [1,2,3]; //c=3;
let [y=1] = []; //y=1
let [y=1] = [2]; // y=2
以上例子我们不难看出数组的赋值就是要找准=号两边对应的位置。ps:[y=1]这种写法是默认值,如果没找到对应的值就取默认值。
对象的解构赋值。
例1:
let {a,b} = {a: 1,b: 2} //a=1,b=2
例2:
let {a: b} = {a:1} //console.log(a)会报错,console.log(b)//1
以上例子可以看出对象的解构赋值是根据key值来的。只要找到相对应的key就可以赋值成功。
基本类型的解构赋值。
例1:
let [a,b,c,d] = '1234' ;
console.log(a,b,c,d) //1,2,3,4
let {length:len} = 'java' ;
console.log(len) // 4
let {toString: ts} = 1,{toString: bs} = true;
console.log(ts,bs) // function toString() { [native code] } function toString() { [native code] }
console.log(ts === Number.prototype.toString) // true
console.log(bs === Boolean.prototype.toString) //true
ts.call(1) // 字符串'1' ps:不能直接调用ts().需要指定this对象(number类型的)。直接调用this是指向window的。
以上例子可以看出基本类型的赋值数组的赋值就是index对应赋值,对象的赋值就是属性调用后赋值。
注意: null和undefind不能被解构赋值!
以上都是个人理解如有不对之处还望指正交流!