提示：文章寫完后，目錄可以自動生成，如何生成可參考右邊的幫助文檔
什么是解構(gòu)
??????es6允許按照一定模式，從數(shù)組和對象中提取值，對變量進行賦值，稱之為解構(gòu)。
解構(gòu)是es6的新特性，比ES5代碼簡介、清晰、減少代碼量
ES5中的為變量賦值，只能直接指定值。
var name = '天秀'
數(shù)組解構(gòu)
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];// 數(shù)組
var [x,y,z] = [1,{'name':'any'},3];// 對象
如果解構(gòu)不成功，變量的值就等于undefined
let [a] = [];
let [a,b] = [1];
解構(gòu)賦值允許指定默認值
var [x=1,y=2] = [10,20];// x=10,y=20
var [x=1,y=2] = [10];// x= 10,y=2
只有當一個數(shù)組成員嚴格等于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 = '上山打老虎'
對象解構(gòu)
??????與數(shù)組不同的是按次序排列的，變量的取值由它的位置決定，而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。
對象解構(gòu)的寫法
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通過解構(gòu)取值
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
注意
如果要將一個已經(jīng)聲明的變量用于解構(gòu)賦值，需注意
let x;
{x} = {x:1};
//js引擎會將{x}理解成一個代碼塊，從而發(fā)生語法錯誤，只有不將大括號寫在行首，才能解決
({x} = {x:1})
字符解構(gòu)
let [a,b,c,d,e] = 'express'
函數(shù)參數(shù)解構(gòu)
// 數(shù)組解構(gòu)
function add([x,y]){
return x + y;
}
add([1,2]);// 3
// 對象解構(gòu)
function add({x,y}){
return x + y;
}
add({x:3,y:2});// 5
參數(shù)默認值的定義文章來源：http://www.zghlxwxcb.cn/news/detail-682535.html
function fun([x=0,y=0]){
return x + y;
};
fun([1,2]);
// 目的是當實參為空時，不會報錯
總結(jié)
解構(gòu)新特性的優(yōu)勢可以使代碼簡潔，清晰，減少代碼量。文章來源地址http://www.zghlxwxcb.cn/news/detail-682535.html
到了這里，關于ES6-解構(gòu)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
