ECMAScript 6 解构

解构

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
解构是ES6的新特性, 比ES5代码简洁，清晰，减少代码量
ES5中的为变量赋值，只能直接指定值

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

数组解构

es6匹配模式写法

var [a,b,c] = [1,2,3]; 
// 这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值
var x = 1;
var y = [1,2];
var z = 3;
var [x,y,z] = [1,[1,2],3];// 数组
var [x,y,z] = [1,{'name':'amy'},3]; // 对象

如果解构不成功，变量的值就等于undefined

let [a] = [];
let [a,b] = [1];

解构赋值允许指定默认值

var [x=1,y=2] = [10,20]; // x = 10, y = 20;
var [x=1,y=2] = [10]; // x = 10, y = 2;
var [x= 10,y = 20] = []; // x=10, y=20;
var [x,y='b']= ['a']; // x='a', y='b';
var [x=1,y] = [10,20]; // x = 10, y=20;
var [x = 1] = [null]; // x= null

只有当一个数组成员严格等于undefined，默认值才会生效

var [x = 1]=[undefined]; // x=1;
var [x,y='b'] =['a',undefined]; // x='a',y='b';

惰性求值

如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值

function f(){ 
	return '12345'
}
var [x = f()] = [1]; // x=1
var [x = f()] = []; // x='12345'
var [x = f()] = [undefined]; // x='12345'

对象解构

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对
象的属性没有次序，变量必须与属性同名，才能取到正确的值。

// 对象解构的写法
let {a,b} = {b:1,a:2};

实际的运用

var obj = {
	id:1,
	name:'abc',
	sex:'男',
	friends:['x','y','z'],
	o:{id:2,msg:'hello'}
};
// es5从对象中取值的方式
var _id = obj.id;
var f = obj.friends;
// es6通过解构更简洁清晰
var {id, name, sex, o} = obj;

别名

变量名与属性名不一致，name 是匹配模式 ，n 是变量

var {name:n,age:a} = {name:'123',age:18};

解构赋值允许指定默认值

默认值生效的条件是，对象的属性值严格等于 undefined

let {x,y = 5} = {x:10}; // x=10, y=5
let {x:y = 5} = {x:50}; // y=50
let {x:a = 10,y:b=20} = {x:undefined}; // a=10,b=20

注意

如果要将一个已经声明的变量用于解构赋值，必须非常小心。

// 错误的写法
let x;
{x} = {x: 1};
// 报错的原因：因为 JavaScript 引擎会将{x}理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，避免 JavaScript 将其解释为代码块，才能解决这个问题
// 正确的写法
let x; ({x} = {x: 1});
// 将整个解构赋值语句，放在一个圆括号里面，就可以正确执行

字符串解构

let [a,b,c,d,e,f] ='nodejs';

函数参数解构

解构在函数中具体运用

// 数组解构
function add([x, y]){
	return x + y;
}
add([1, 2]); // 3
// 对象解构
function move({x, y}) {
	return x +y;
}
move({x: 3, y: 8});

参数默认值的定义

function fun([x=0,y=0]) {
	return x+y;
}
fun([2,4]);
function move({x = 0, y = 0}) {
	return x +y;
}
move({x: 3, y: 5}); // 当实参为空时，不会报错
function fun([x=0,y=0]) {
	return x+y;
}
fun([2]);
function fun([x=0,y=0]) {
	return x+y;
}
fun([,4]);
function move({x = 0, y = 0}) {
	return x +y;
}
move({x: 3});
function move({x = 0, y = 0}) {
	return x +y;
}
move({y: 5});