ES6学习笔记(2)

变量的解构赋值

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

数组的解构赋值

let [a, b, c] = [1, 2, 3];
console.log(a);	//=> 1
console.log(b);	//=> 2
console.log(c);	//=> 3

这种写法称为 "模式匹配",只要等号两边的模式相同,左边的变量会被赋予右边对应的值.

let [a, , c] = [1, 2, 3];
console.log(a);	//=> 1
console.log(c);	//=> 3
let [a, ...b] = [1, 2, 3, 4];
console.log(a);	//=> 1
console.log(b);	//=> [2, 3, 4]
let [a, b, '''c] = [1];
console.log(a);	//=> 1
console.log(b);	//=> undefined 解构不成功
console.log(c);	//=> []

当等号左右的模式只匹配右边的一部分时,称之为不完全机构

在不完全解构的情况下依然可以解构成功

let [a, b] = [1, 2, 3];
console.log(a);	//=> 1
console.log(b);	//=> 2
let [a, [b], c] = [1, [2, 3, 4], 5];
console.log(a);	//=> 1
console.log(b); //=> 2
console.log(c); //=> 5

只要数据结构具有 Iterator接口,都可以采用数组的解构赋值

在解构赋值的时候,也可以提前给变量一个默认值,当一个变量有默认值的时,将会判断对应数组里的值 与 undefined 比较, 如果为真,这赋值默认值

let [a, b = 2, c = 3, d = 4] = [5, 6, undefined, null];
console.log(a);	//=> 5
console.log(b);	//=> 6
console.log(c);	//=> 3
console.log(d);	//=> null

对象的解构赋值

对象的解构赋值,需要等号的变量与右边对象的属性同名,才能取得正确的值

var {a, b, c} = {a: 111, b: 222};
console.log(a);	//=> 111
console.log(b);	//=> 222
console.log(c);	//=> undefined

若变量名和属性名不一致,同时也想该变量名取到值,可通过以下的方式

var {a, b: c} = {a: 111, b: 222, c: 333};
console.log(a);	//=> 111
console.log(c);	//=> 222

事实上,以上只是一种形式的简写,原来的形式为

var {a: a, b: c} = {a: 111, b: 222, c: 333};

ES6只是将等号右边的对象的属性的值赋值给左边同属性名下的变量

与数组一样,对象也同样可以用于嵌套解构,甚至与数组相互嵌套

!对于对象的简写,有种情况下需要小心使用,即该变量已经声明过.

var x;
{x} = {x: 1};	//=> error

因为 JS会将 {x} 当成一个代码块而执行其内的语句.因此需要将他包含在一个()里.即({x} = {x: 1})

字符串的解构赋值

字符串可转换为类似数组的对象,同时也具有对象的一些属性,比如length.因此字符串也可以使用解构赋值

const [a,...b] = "hello";
console.log(a);	//=> "h"
console.log(b);	//=> ["e", "l", "l", "o"]
let {length} = "hello";
console.log(length);	//=> 5	等效于 "hello".length

数值和布尔值的解构赋值

解构赋值时,如果等号右边是数值或布尔值,则先转为对象

函数参数的解构赋值

function add([x, y, z = 1]) {
	console.log(x + y + z);
}
add([1, 2]);	//=> 1 + 2 + 1 = 4

PS:有了解构赋值,写法将变的非常简洁,代码也变得更加容易阅读.