变量的解构赋值

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

解构：分解数据结构；赋值：给变量赋值。

数组的解构赋值

语法

在 ES5 中，当我们在为一组变量赋值时，一般是这样写：

var a = 1;
var b = 2;
var c = 3;

在 ES6 中，通过解构赋值，可以这么写：（按照位置顺序一一对应）

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

未匹配到的情况

数据的解构赋值，是根据位置进行一一对应来赋值的。如果表达式左边的变量的数量 大于 表达式右边的变量的数量，那么多余的变量会被赋值为 undefined。

let [a, b] = [1];
console.log(a);		//1
console.log(b);		//undefined

默认值

在解构赋值时，是允许使用默认值的。

{
	let [a = 1, b = 2] = [];
    console.log(a);		//1
    console.log(b);		//2
}

{
	let [a, b = 'bar'] = ['foo'];	//a被赋值为'foo'，b采用默认值'bar'
    console.log(a);		//foo
    console.log(b);		//bar
}

将右边的 undefined 和 null 赋值给变量

{
	let [a, b = 'bar'] = ['foo', undefined];	//b虽然被赋值undefined，但仍采用默认值'bar'
    console.log(a);		//foo
    console.log(b);		//bar
}

{
	let [a, b = 'bar'] = ['foo', null];	//a被赋值为'foo'，b被赋值为null
    console.log(a);		//foo
    console.log(b);		//null
}

对象的解构赋值

语法

在 ES5 中，我们从接口拿到 json 数据后，一般这么赋值：

let name = json.name;
let age  = json.age;
let sex = json.age;

在 ES6 中，通过解构赋值，可以这么写：

let person = { name: 'Tom', age: 12, sex: 'man' };
let { name, age, sex } = person;
console.log(name);		//Tom
console.log(age);		//12
console.log(sex);		//man

对象的解构赋值与数组的解构赋值不同是：数组是按照位置顺序一一对应的，而对象是按照属性名来对应的。也就是说对象的解构赋值只要表达式的左右两边的属性名相同就行，和位置顺序无关。

未匹配到的情况

对象的解构赋值，是按照属性名一一对应来赋值的。如果表达式左边的变量的数量 大于 表达式右边的变量的数量，那么多余的变量同样会被赋值为 undefined。

给左边的变量自定义命名

在对象的解构赋值时，还可以给表达式左边的变量设置自定义的名字

{
    let person = { name: 'Tom', age: 12, sex: 'man' };
    let { name: myname, age: myage, sex: mysex } = person;
    console.log(myname);	//Tom
    console.log(myage);		//12
    console.log(mysex);		//man
    console.log(name);		//Uncaught ReferenceError: name is not defined
    console.log(age);		//Uncaught ReferenceError: age is not defined
    console.log(sex);		//Uncaught ReferenceError: sex is not defined
}

{
    let person = { name: 'Tom', age: 12 };
    // 对象解构赋值同样可以给变量设置默认值
    let { name: myname, age: myage, sex:mysex = 'man' } = person;
    console.log(myname);	//Tom
    console.log(myage);		//12
    console.log(mysex);		//man
}

圆括号的使用

如果变量 name 在解构前就已经定义了，此时你再去解构，就会出现问题。下面的代码，在编译时会报错。

let name = 'Jerry';
{ name } = { name: 'Tom'};

只要在解构赋值的表达式外面加上括号就可以解决：

let name = 'Jerry';
({ name } = { name: 'Tom'});
console.log(name);		//Tom

字符串的解构赋值

字符串也可以解构赋值，和数组的解构赋值类似。

let [a, b, c] = 'hello';
console.log(a);			//h
console.log(b);			//e
console.log(c);			//l
console.log(typeof a);	//string