2、变量的解构赋值 —ES6学习笔记

基本概念
本质上是一种匹配模式，只要等号两边的模式相同，那么左边的变量就可以被赋予对应的值。

解构赋值主要分为：
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;//报错