ES6入門教程之變量的解構(gòu)賦值詳解

2024-05-06 16:49:53

字體：大中小

供稿：網(wǎng)友

前言

我們經(jīng)常定義許多對象和數(shù)組，然后有組織地從中提取相關(guān)的信息片段。在ES6中添加了可以簡化這種任務(wù)的新特性：解構(gòu)。解構(gòu)是一種打破數(shù)據(jù)結(jié)構(gòu)，將其拆分為更小部分的過程。本文將詳細(xì)介紹ES6解構(gòu)賦值，下面話不多說了，來一起看看詳細(xì)的介紹吧

數(shù)組的解構(gòu)賦值

基本用法

ES6 允許按照一定模式，從數(shù)組和對象中提取值，對變量進(jìn)行賦值，這被稱為結(jié)構(gòu)。

在ES6之前想要為變量賦值，只能指定其值，如下：

let a = 1;let b = 2

而在ES6中可以寫成這樣，如下：

let [a,b] = [1,2]// a = 1, b = 2

值得注意的是，等式兩邊的值要對等，這樣左邊的變量才會被賦上右邊對應(yīng)的值，如果不對等左邊的值將會出現(xiàn)undefined，如下寫法：

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

注意：只有左右兩邊的格式一定要對等，數(shù)量可以不對等。

let [a,b,c] = [1,2]a = 1, b = 2, c = undefinedlet [a,,c] = [1,2,3]a = 1, c = 3let [a, ...b] = [1,2,3]a = 1, b = [2,3]let [a] = []let [b,a] = [1]a = undefined

還有一種情況，等號左邊為數(shù)組，但是等號右邊為其他值，將會報錯。如下：

let [a] = 1;let [a] = false;let [a] = NaN;let [a] = undefined;let [a] = null;let [a] = {};以上都會報錯

但是如果左邊為數(shù)組，右邊為字符串，將會取字符串的第一個下標(biāo)的值

let [a] = '121321' a = '1'let [a] = 'adgasg' a = 'a'

對于Set結(jié)構(gòu)，同樣可以使用數(shù)組的解構(gòu)賦值。

let [x,y,z] = new Set([1,2,3])x = 1, y = 2, z = 3

默認(rèn)值

解構(gòu)賦值允許指定默認(rèn)值

let [a = 3] = [] // a:3let [a = 3,b] = [,4] // a:3 b:4let [a = 3,b] = [5,4] // a:5 b:4

特殊

let [a = 3] = [undefined] // a:3let [a = 3] = [null] // a:null

Tips: 在es6中使用嚴(yán)格相等運(yùn)算符，在結(jié)構(gòu)賦值中如果需要默認(rèn)值生效，則應(yīng)對等的值為undefined的時候才會采用默認(rèn)值，否則還是使用賦值。上面中null 不嚴(yán)格等于undefined++

如果默認(rèn)值的賦值為一個表達(dá)式，只有當(dāng)?shù)忍栍疫叺馁x值沒有值為undefined的時候，才會取表達(dá)式中的值，如下：

function demo(){ console.log('demo')}let [a = demo()] = [] // a: demolet [a = demo()] = [1] // a : 1

對象的解構(gòu)賦值

與數(shù)組的不同點(diǎn)是，數(shù)組的元素必須和賦值的元素要位置一致才能正確的賦值，而對象的解構(gòu)賦值則是等號兩邊的變量和屬性同名即可取到正確的值。否則值為 undefined

let {a,b} = {a:'23',b:'3'}let {a,b} = {b:'3',a:'23'}// 上面兩個的值 都是 a: 23 b: 3let {a,b} = {a:'3',c:'d'}//a: 3 b: undefined

對象的解構(gòu)賦值還有將某一個現(xiàn)有對象的方法賦值到一個新的變量，如下：

let {sin,cos} = Math// Math 中的sin cos 方法將賦值給變量 sin coslet {log} = console// log(2) === console.log(2)

如果等號左邊的變量名不能和等號右邊的對象的屬性名一致，則必須寫成如下格式：

let {a:b} = {a:'ss'} // b：ss//a是屬性名，b才是實(shí)際賦值的變量名

對象的解構(gòu)賦值一樣是可以嵌套解構(gòu)的，如下：

第一種：let obj = {	p:[		'Hello', {y:'world'}	]}let {p:[x,{y}]} = obj // x: Hello, y: world這邊的p只是屬性不是變量，如果p想賦值可以寫成：let {p,:[x,{y}]} = obj第二種：const a = {	loc: {		t :1,		b :{			c:1,			d:2			}	}}let {loc:{t,b:{c,d}}} = a或者let {loc,loc:{t,b,b:{c,d}}} = a

嵌套賦值

let o = {}, arr = []({foo:o.prop,bar: arr[0]} = {foo:123,bar:true})//o: 123, arr = [true]

如果解構(gòu)模式是嵌套的對象，如果子對象所在的父屬性不存在，則會報錯，如下：

let {foo:{bar}} = {baz:'baz'} //報錯

默認(rèn)值

let {x = 3} = {}// x: 3let {x,y = 5} = {x : 1}// x: 1, y: 5let {x: y = 5} = {}// y = 5let {x: y = 5} = {x : 4}// y = 4let {x: y = 'hhhh'} = {}//y = 'hhhh'Tips:以上左邊 x為屬性名，y為變量let {x = 5} = {x: undefined}// x: 5let {x = 4} = {x: null}// x: null同數(shù)組一樣遵循 嚴(yán)格等于 只有右邊為undefined的時候默認(rèn)值才會生效

注意點(diǎn)：

1）不能將已聲明的變量用于解構(gòu)賦值，因為已經(jīng)是一個代碼塊。

字符串的解構(gòu)賦值

如果賦值的對象是數(shù)組，字符串將被分割為數(shù)組的格式，一一對應(yīng)賦值

let [a,b] = 'ha'// a = h , b = a同時可以獲得字符串的長度：let {length:len} = '12121'// len = 5

數(shù)值和布爾值的解構(gòu)賦值

如果等號右邊是數(shù)字或者布爾值則轉(zhuǎn)換成對象或者說，除了是數(shù)組和對象，其他值都將轉(zhuǎn)換成對象，null 和 undefined 除外。如下：

let {t:s} = 123let {t: s} = true

函數(shù)參數(shù)的解構(gòu)賦值

function add([x,y]){ return x+y}add([3,5]) // 8[[3,5],[6,7]].map(([a,b]) => a + b)//8 , 13function m({x=3, y=4} = {}){ return [x,y]}m({x:33,y:8})  // [33,8]m({x:32})   // [32,4]m({})    // [3,4]m()    // [3,4]function m({x,y} = {x=0,y=0}){ return [x,y]}m({x:33,y:8})  // [33,8]// 代替右邊的 x:0, y:0 所以是傳值 33 8m({x:32})   // [32,undefined]//因為傳值替代右邊的賦值，但是只有x沒有y//所以y是取 左邊y的默認(rèn)值，因為你沒有賦值 為undefinedm({})    // [undefined,undefined] // 取左邊x,y的默認(rèn)值，因為沒有賦值 為undefinedm()    // [0,0]// 沒有傳值，使用本身的賦值 都是0

其他

不能使用圓括號的情況