提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
什么是解构
🍿🍿🍿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
参数默认值的定义文章来源：https://www.toymoban.com/news/detail-682535.html
function fun([x=0,y=0]){
return x + y;
};
fun([1,2]);
// 目的是当实参为空时，不会报错
总结
解构新特性的优势可以使代码简洁，清晰，减少代码量。文章来源地址https://www.toymoban.com/news/detail-682535.html
到了这里，关于ES6-解构的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
