您好,登錄后才能下訂單哦!
本文實例講述了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數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。