ES6數(shù)組與對(duì)象的解構(gòu)賦值詳解
本文實(shí)例講述了ES6數(shù)組與對(duì)象的解構(gòu)賦值。分享給大家供大家參考，具體如下：
數(shù)組的解構(gòu)賦值
基本用法
ES6允許按照一定的模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱之為解構(gòu)(Destructuring)
// 以前為變量賦值，只能直接指定值 var a = 1; var b = 2; var c = 3; // ES6允許寫成這樣 var [a,b,c] = [1,2,3];
本質(zhì)上，這種寫法屬于“模式匹配”，只要等號(hào)兩邊的模式相同，左邊的變量就會(huì)被賦予對(duì)應(yīng)的值。
下面是一些使用嵌套數(shù)組進(jìn)行解構(gòu)的例子：
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 // []
默認(rèn)值
解構(gòu)賦值允許制定默認(rèn)值
var [foo = true] = []; foo // true [x,y='b'] = ['a']; // x='a', y='b'
注意，ES6內(nèi)部使用嚴(yán)格相等運(yùn)算符(===)，判斷一個(gè)位置是否有值。
所以，如果一個(gè)數(shù)組成員不嚴(yán)格等于undefined，默認(rèn)值是不會(huì)生效的。
var [x=1] = [undefined]; x //1 var [x=1] = [null]; x // null
如果默認(rèn)值是一個(gè)表達(dá)式，那么這個(gè)表達(dá)式是惰性求值的，即只有在用到的時(shí)候，才會(huì)求值：
function f(){
console.log('aaa');
}
let [x=f()] = [1];
上面的代碼中，因?yàn)閤能取到值，所以函數(shù)f()根本不會(huì)執(zhí)行。上面的代碼其實(shí)等價(jià)于下面的代碼：
let x;
if([1][0] === undefined){
x = f();
}else{
x = [1][0];
}
默認(rèn)值可以引用解構(gòu)賦值的其他變量，但該變量必須已經(jīng)聲明：
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
上面最后一個(gè)表達(dá)式，因?yàn)閤用到默認(rèn)值是y時(shí)，y還沒有聲明。
對(duì)象的解構(gòu)賦值
解構(gòu)不僅可以用于數(shù)組，還可以用于對(duì)象
var {foo,bar} = {foo:"aaa",bar:"bbb"};
foo // "aaa"
bar // "bbb"
對(duì)象的解構(gòu)和數(shù)組有一個(gè)重要的不同。數(shù)組的元素是按此排序的，變量的取值由它的位置決定；而對(duì)象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。
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"
對(duì)象的解構(gòu)賦值是內(nèi)部機(jī)制，是先找到同名屬性，然后再賦給對(duì)應(yīng)的變量。
真正被賦值的是后者，而不是前者。
var {foo:baz} = {foo:"aaa",bar:"bbb"};
baz // "aaa"
foo // error: foo is not defined
上面的代碼中， foo是匹配的模式， baz才是變量。真正被賦值的是變量baz，而不是模式foo。
和數(shù)組一樣，解構(gòu)也可以用于嵌套解構(gòu)的對(duì)象
var obj = {
p:["hello",{y:"world"}]
};
var {p:[x,{y}]} = obj;
x // "hello"
y // "world"
注意，這時(shí)p是模式，不是變量，因此不會(huì)被賦值。
對(duì)象的解構(gòu)也可以指定默認(rèn)值：
var {x=3} = {};
x // 3
var {x,y=5} = {x:1};
x // 1
y // 5
var {x: y=3} = {x: 5};
y // 5
如果解構(gòu)失敗，變量的值等于undefined
var {foo} = {bar:"baz"};
foo // undefined
如果解構(gòu)模式是嵌套的對(duì)象，并且子對(duì)象所在的父屬性不存在，那么會(huì)報(bào)錯(cuò)：
// 報(bào)錯(cuò)
var {foo: {bar}} = {baz:"baz"};
由于數(shù)組本質(zhì)是特殊的對(duì)象，因此可以對(duì)數(shù)組進(jìn)行對(duì)象屬性的解構(gòu)：
var arr = [1,2,3];
var {0:first, [arr.length-1]:last} = arr;
first // 1
last // 3
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
ES5 模擬 ES6 的 Symbol 實(shí)現(xiàn)私有成員功能示例
這篇文章主要介紹了ES5 模擬 ES6 的 Symbol 實(shí)現(xiàn)私有成員功能,結(jié)合實(shí)例形式分析了ES5 模擬 ES6 的 Symbol 實(shí)現(xiàn)私有成員功能相關(guān)原理、實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05
JavaScript實(shí)現(xiàn)換膚效果(換背景)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)換膚效果，即換背景功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
JavaScript輪播停留效果的實(shí)現(xiàn)思路
輪播停留與無線滾動(dòng)十分類似，都是利用屬性及變量控制移動(dòng)實(shí)現(xiàn)輪播。下面通過本文給大家分享JavaScript輪播停留效果的實(shí)現(xiàn)思路，感興趣的朋友一起看看吧2018-05-05
Bootstrap路徑導(dǎo)航與分頁學(xué)習(xí)使用
這篇文章主要為大家詳細(xì)介紹了Bootstrap路徑導(dǎo)航與分頁學(xué)習(xí)使用的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
純js實(shí)現(xiàn)重發(fā)驗(yàn)證碼按鈕倒數(shù)功能
這篇文章主要介紹了純js實(shí)現(xiàn)重發(fā)驗(yàn)證碼按鈕倒數(shù)功能,本文整理了兩個(gè)實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-04-04
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)自動(dòng)輪播的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
JavaScript 是世界上最流行的編程語言。javaScript中有五種空值和假值，分別為false，null，undefined，“”，0。從廣義上來說，這五個(gè)值都是對(duì)應(yīng)數(shù)據(jù)類型的無效值或空值2017-12-12
閉包是有權(quán)訪問另一個(gè)函數(shù)作用域中的變量的函數(shù)。首先要明白的就是，閉包是函數(shù)。由于要求它可以訪問另一個(gè)函數(shù)的作用于中的變量，所以我們往往是在一個(gè)函數(shù)的內(nèi)部創(chuàng)建另一個(gè)函數(shù)，而“另一個(gè)函數(shù)”就是閉包。本文對(duì)其進(jìn)行系統(tǒng)分析，需要的朋友可以看下2016-12-12
這篇文章介紹了js單例模式的兩種方案，有需要的朋友可以參考一下2013-10-10
使用JavaScript實(shí)現(xiàn)獲取頁面滾動(dòng)位置
這篇文章主要為大家詳細(xì)介紹了在JavaScript中如何獲取水平和垂直的滾動(dòng)位置,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下2024-12-12