ES6-解构

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

什么是解构

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

var name = '天秀'

数组解构

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':'any'},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

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

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

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

function f(){
  return '上山打老虎'
}
var [x = f()] = [1];// x=1
var [x = f()] = [];// x='上山打老虎';
var [x = f()] = [undefined];// x = '上山打老虎'

对象解构

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

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 newId = obj.id;
// es6通过解构取值
var {id,name,sex,o} = obj;

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

var {name:n,age:a} = {name:'张三',age:20};

同样允许指定默认值，生效的条件是，属性值严格等于undefined

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

注意
如果要将一个已经声明的变量用于解构赋值，需注意

let x;
{x} = {x:1};
//js引擎会将{x}理解成一个代码块，从而发生语法错误，只有不将大括号写在行首，才能解决
({x} = {x:1})

字符解构

let [a,b,c,d,e] = 'express'

函数参数解构

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

参数默认值的定义

function fun([x=0,y=0]){
	return x + y;
};
fun([1,2]);
// 目的是当实参为空时，不会报错

总结

解构新特性的优势可以使代码简洁，清晰，减少代码量。