ES6數組的解構賦值詳解


數組的解構賦值

基本用法

ES6允許按照一定的模式,從數組和對象中提取值,對變量進行賦值,這被稱之為解構(Destructuring)

// 以前為變量賦值,只能直接指定值

var a = 1;

var b = 2;

var c = 3;

// ES6允許寫成這樣

var [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 [head,...tail] = [1,2,3,4];

head // 1

tail // [2,3,4]

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

x // "a"

y // undefined

z // []

 

默認值

解構賦值允許制定默認值

var [foo = true] = [];

foo // true

[x,y='b'] = ['a'];

// x='a', y='b'

 

注意,ES6內部使用嚴格相等運算符(===),判斷一個位置是否有值。

所以,如果一個數組成員不嚴格等於undefined,默認值是不會生效的。

var [x=1] = [undefined];

x //1

var [x=1] = [null];

x // null

 

如果默認值是一個表達式,那么這個表達式是惰性求值的,即只有在用到的時候,才會求值:

function f(){

 console.log('aaa');

}

let [x=f()] = [1];

 

上面的代碼中,因為x能取到值,所以函數f()根本不會執行。上面的代碼其實等價於下面的代碼:

let x;

if([1][0] === undefined){

 x = f();

}else{

 x = [1][0];

}

 

默認值可以引用解構賦值的其他變量,但該變量必須已經聲明:

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

// x=1; y=1

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

// x=2; y=2

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

// x=1; y=2

let [x=y,y=1] = []; // ReferenceError

 

上面最后一個表達式,因為x用到默認值是y時,y還沒有聲明。

對象的解構賦值

解構不僅可以用於數組,還可以用於對象

var {foo,bar} = {foo:"aaa",bar:"bbb"};

foo // "aaa"

bar // "bbb"

 

對象的解構和數組有一個重要的不同。數組的元素是按此排序的,變量的取值由它的位置決定;而對象的屬性沒有次序,變量必須與屬性同名,才能取到正確的值。

var {bar,foo} = {foo:"aaa",bar:"bbb"};

foo // "aaa"

bar // "bbb"

var {baz} = {foo:"aaa",bar:"bbb"};

baz // undefined

 

如果變量名與屬性名不一致,必須寫成這樣:

var {foo:baz} = {foo:"aaa",bar:"bbb"};

baz // "aaa"

let obj = {first:"hello",last:"world"};

let {first:f,lats:l} = obj;

f // "hello"

l // "world"

 

對象的解構賦值是內部機制,是先找到同名屬性,然后再賦給對應的變量。

真正被賦值的是后者,而不是前者。

var {foo:baz} = {foo:"aaa",bar:"bbb"};

baz // "aaa"

foo // error: foo is not defined

 

上面的代碼中, foo是匹配的模式, baz才是變量。真正被賦值的是變量baz,而不是模式foo。

和數組一樣,解構也可以用於嵌套解構的對象

var obj = {

 p:["hello",{y:"world"}]

};

var {p:[x,{y}]} = obj;

x // "hello"

y // "world"

 

注意,這時p是模式,不是變量,因此不會被賦值。

對象的解構也可以指定默認值:

var {x=3} = {};

x // 3

var {x,y=5} = {x:1};

x // 1

y // 5

var {x: y=3} = {x: 5};

y // 5

 

如果解構失敗,變量的值等於undefined

var {foo} = {bar:"baz"};

foo // undefined

 

如果解構模式是嵌套的對象,並且子對象所在的父屬性不存在,那么會報錯:

// 報錯

var {foo: {bar}} = {baz:"baz"};

 

由於數組本質是特殊的對象,因此可以對數組進行對象屬性的解構:

var arr = [1,2,3];

var {0:first, [arr.length-1]:last} = arr;

first // 1

last // 3

 

更多關於JavaScript相關內容可查看本站專題:《javascript面向對象入門教程》、《JavaScript查找算法技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM