ES6之结构赋值-变量赋值——数组的解构赋值、对象的解构赋值、字符串解构赋值

ES6之结构赋值-变量赋值——数组的解构赋值、对象的解构赋值、字符串解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

1、数组的解构赋值

1、如果目标对象的结构不符合/不具备iterator接口，都将会报错

2、结构赋值可以有默认值，当数组中的值完全等于undefined，默认值才会生效

let [a=1] = [];
a //1

// 相当于
let [a=1] = [undefined];
a // 1

3、可以嵌套使用

let [a, [b],c] = [1, [2], 3];
a  // 1
b  // 2
c  // 3

4、结构赋值内部使用 ===

2、对象的解构赋值

1、对象和数组的区别在于，数组通过位置来匹配，而对象是通过属性找到需要被解构的值。

2、变量使用嵌套进行结构时

let {a, b, b: {c}} = {a: 1, b: {c: 2}};
a // 1
b // {c: 2}
c // 2

上方b:在这里是模式，必须这样才可以引用到b，来对c进行解构

3、字符串解构赋值

会把字符串转换成类似数组的对象
所以可以得到字符串的长度

let [a, b, c, d] = 'abcd';
a //"a"
b // "b"
// ... 

let {length} = 'abcd';
length // 4

4、数字和布尔值的解构赋值

数字和布尔值在进行解构赋值时， 会被先转换为对象

let {toString} = 123;
toString === Number.prototype.toString;

undefined 和 null 不能转换为对象，所以解构赋值会报错 typeError

5、函数参数的解构赋值

function fun({a, b} = {a: 0, b: 0}){}

function fun({a = 0, b = 0}){}

// 两种是完全不同的意思

6、慎用圆括号

可以使用圆括号的情况只有一种：赋值语句的非模式部分，可以使用圆括号。

let b, d;
[(b)] = [3]; 
({ p: (d) } = {}); 
[(parseInt.prop)] = [3];