ES6入門 變數的解構賦值

2021-08-28 20:52:37 字數 3420 閱讀 4551

es6 允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構（destructuring）。

以前，為變數賦值，只能直接指定值。

let a = 1;


let b = 2;


let c = 3;
es6 允許寫成下面這樣。

let [a, b, c] = [1, 2, 3];
只要等號兩邊的模式相同，左邊的變數就會被賦予對應的值。下面是一些使用巢狀陣列進行解構的例子。

let [foo, [[bar], baz]] = [1, [[2], 3]];


foo // 1


bar // 2


baz // 3


let [ , , third] = ["foo", "bar", "baz"];


third // "baz"


let [x, , y] = [1, 2, 3];


x // 1


y // 3


let [head, ...tail] = [1, 2, 3, 4];


head // 1


tail // [2, 3, 4]


let [x, y, ...z] = ['a'];


x // "a"


y // undefined


z //
如果解構不成功，變數的值等於undefined

let [foo] = ;


let [bar, foo] = [1];
以上兩種情況都屬於解構不成功，foo的值都會等於undefined。

如果等號的右邊不是陣列（或者嚴格地說，不是可遍歷的結構），那麼將會報錯。

// 報錯


let [foo] = 1;


let [foo] = false;


let [foo] = nan;


let [foo] = undefined;


let [foo] = null;


let [foo] = {};
事實上，只要某種資料結構具有 iterator 介面，都可以採用陣列形式的解構賦值。

function* fibs() 


}let [first, second, third, fourth, fifth, sixth] = fibs();


sixth // 5
上面**中，fibs是乙個 generator 函式（參見《generator 函式》一章），原生具有 iterator 介面。解構賦值會依次從這個介面獲取值。

預設值

解構賦值允許指定預設值

let [foo=true]=; // foo=true


let [x,y='b']=['a'] //x='a', y='b'


let [x,y='b']=['a',undefined] // 結果同上
注意：es6內部使用嚴格相等運算子（===），判斷乙個位置是否有值。所以只有當乙個陣列成員嚴格等於undefined,預設值才會生效。

let [x=1]=[null]  // x=null
預設值沒有生效，因為null不嚴格等於undefined

解構不僅可以用於陣列，還可以用於物件。

let  = ;


foo // "aaa"


bar // "bbb"
物件的屬性沒有次序，變數必須與屬性同名，才能取到正確的值。

如果變數名與屬性名不一致，必須寫成下面這樣

let =;


// baz:aaa
物件解構也可以有預設值

var ={}  // x=3


var = // x=5,y=3


var = ; // y = 5
字串也可以解構賦值。這是因為此時，字串被轉換成了乙個類似陣列的物件。

const [a, b, c, d, e] = 'hello';


a // "h"


b // "e"


c // "l"


d // "l"


e // "o"
類似陣列的物件都有乙個length屬性，因此還可以對這個屬性解構賦值。

let  = 'hello';


len // 5
函式的引數也可以使用解構賦值。

function add([x,y])


console.log(add([2,5])); 


// 7
函式add的引數表面上是乙個陣列，但在傳入引數的那一刻，陣列引數被解構成變數x和y。

函式引數的解構也可以使用預設值。

function move(={})


console.log(move()) //[3,8]


console.log(move()) //[3,0]


console.log(move({})) // [0,0]


console.log(move()) //[0,0]
（1）交換變數的值

let x=1;


let y=2;


[x,y]=[y,x];
（2）函式返回多個值

// 返回乙個陣列


function example1() 


let [a, b, c] = example1();


// 返回乙個物件


function example2() ;


}let = example2();
（3）函式引數的定義

解構賦值可以方便地將一組引數與變數名對應起來。

// 引數是一組有次序的值


function f([x, y, z]) 


f([1, 2, 3]);


// 引數是一組無次序的值


function f() 


f();
（4）提取 json 資料

解構賦值對提取 json 物件中的資料，尤其有用。

let jsondata = ;


let = jsondata;


console.log(id, status, number);


// 42, "ok", [867, 5309]

es6入門 變數的解構賦值

從陣列和物件中提取值，對變數進行賦值 陣列是位置對應，物件是屬性對應。可使用var let const進行宣告賦值。傳統的賦值語句 var str hello var str1 word var who you 1.陣列的解構賦值 位置對應 傳統的賦值語句可更改為 let str,str1,who ...

es6變數解構賦值

es6允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構。解構賦值在實際開發中可以大量減少我們的 量，並且讓我們的程式結構更清晰。陣列的解構賦值 let a,b 1 2 console.log a 1 console.log b 2 上面的 表示，可以從陣列中提取值，按照位置的物件...

ES6變數解構賦值

es6 允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構 es6之前我們申明多個變數需要按照下面的方法 let l a 1 let b 2 let c 3 let d 4 或者 let a 1,b 2,c 3,d 4 現在我們可以更加簡便 let a,b,c,d 1,2,3,4 ...