es6的解構賦值就是利用模式匹配從按照一定模式的陣列或者物件中提取值賦值給變數。
1.陣列的解構賦值
在es6以前,變數的賦值是直接指定的,以後可以這麼來寫,如下所示
let [a,b,c] = [1,2,3];console.log(a,b,c)
1 2 3
解構賦值只要等號兩邊的模式一致,便可解析成功,如下所示
var [d,[f,g]] = [3,[4,5]];console.log(d,f,g);
3 4 5
-----------------------------
var [,,e] = [0,0,1];
console.log(e);
1-----------------------------
var [f,...g] = [2,4,5,6,7];
console.log(g);
array [ 4, 5, 6, 7 ]
如果解構不成功,則變數的值等於undefined,如下所示
var [x,y] = [1];console.log(x,y);
1 undefined
不完全解構,即是等號左邊部分匹配等號右邊,如下所示
var [x,y] = [1,2,4];console.log(x,y);
1 2------------------------
var [[m],n] = [[1,2],3];
console.log(m,n);
1 3
如果右邊是不可遍歷的資料解構,解構將會報錯,如下所示
var [x,y] = 1;typeerror: 1 is not iterable
帶預設值的解構賦值,如下所示
var [x='hello',y="world"] = ;console.log(x+' '+y);
hello world
//在es6內部實現中,使用的是全等===來判斷變數是否有值,因此變數的值不是嚴格的undefined,將不會採用預設值
var [w="hello",y="world"] = [,null];
console.log(w+' '+y);
hello null
2.物件的解構賦值
物件的解構是按照屬性名來的,不分先後順序,如下所示
var =console.log(i,j);
1 2
如果解構的時候等號左邊出現等號右邊沒有的屬性,則變數的值為undefined。如下所示
var = ;console.log(y);
undefined
物件的解構也可以使用預設值,規則和陣列解構一致
在使用已宣告的變數進行物件解構賦值時,需要小心,因為大括號很有可能被解析器解析為**塊,如下所示
var x;= ;syntaxerror: expected expression, got '='
//這裡需要用小括號括起來
( = );
3.字串的解構賦值
字串在進行解構賦值時會被轉換層類陣列,然後進行解析,如下所示
const [a,b,c] = "hello";console.log(a,b,c);
h e l
var = "test";console.log(len);
4
4.函式引數的解構賦值
函式引數也可以使用解構賦值,如下所示
function test([x,y])test([1,3]);
4
function test1()test1({});
0test1();
20
在解構賦值中,最好不要使用小括號。
解構賦值的用處也挺多的,比如在提取json資料,交換資料等地方
ES6 解構賦值
陣列的解構賦值 let a,b 12,13 let a,b,c d 13,15,16 let a,b c 78,12 23 let x,y 1,3,5 x 1,y 3 let x,y,z a x a,y undefined z let h,b 1,2,3,4 1,2,3,4 預設值 let x tr...
ES6解構賦值
一 基本用法 解構 destructuring 按照一定的模式,從陣列或者物件中提取值,對變數進行賦值。let par1,par2,par3 1,2 console.log par1,par2,par3 1 2 不完全解構時par3對值為undefined 解構賦值允許指定變數對預設值。let pa...
es6解構賦值
coding changes the world accumulating makes yourself 主要從三個方面講述 陣列式的解構賦值 物件式的解構賦值 函式中的解構賦值 preface 現今的變數宣告語法十分的直接 左邊是乙個變數名,右邊可以是乙個陣列 的表示式或乙個物件 的表示式,等等。...