前言
創(chuàng)新互聯(lián)專注于昌江黎族企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),商城開(kāi)發(fā)。昌江黎族網(wǎng)站建設(shè)公司,為昌江黎族等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站制作,專業(yè)設(shè)計(jì),全程項(xiàng)目跟蹤,創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)
我們經(jīng)常定義許多對(duì)象和數(shù)組,然后有組織地從中提取相關(guān)的信息片段。在ES6中添加了可以簡(jiǎn)化這種任務(wù)的新特性:解構(gòu)。解構(gòu)是一種打破數(shù)據(jù)結(jié)構(gòu),將其拆分為更小部分的過(guò)程。本文將詳細(xì)介紹ES6解構(gòu)賦值,下面話不多說(shuō)了,來(lái)一起看看詳細(xì)的介紹吧
數(shù)組的解構(gòu)賦值
基本用法
ES6 允許按照一定模式,從數(shù)組和對(duì)象中提取值,對(duì)變量進(jìn)行賦值,這被稱為結(jié)構(gòu)。
在ES6之前想要為變量賦值,只能指定其值,如下:
let a = 1; let b = 2
而在ES6中可以寫(xiě)成這樣,如下:
let [a,b] = [1,2] // a = 1, b = 2
值得注意的是,等式兩邊的值要對(duì)等,這樣左邊的變量才會(huì)被賦上右邊對(duì)應(yīng)的值,如果不對(duì)等左邊的值將會(huì)出現(xiàn)undefined,如下寫(xiě)法:
let [foo,[[bar],baz]] = [1,[[2],3]] foo // 1 bar // 2 baz // 3
注意:只有左右兩邊的 格式一定要對(duì)等,數(shù)量可以不對(duì)等。
let [a,b,c] = [1,2] a = 1, b = 2, c = undefined let [a,,c] = [1,2,3] a = 1, c = 3 let [a, ...b] = [1,2,3] a = 1, b = [2,3] let [a] = [] let [b,a] = [1] a = undefined
還有一種情況,等號(hào)左邊為數(shù)組,但是等號(hào)右邊為其他值,將會(huì)報(bào)錯(cuò)。如下:
let [a] = 1; let [a] = false; let [a] = NaN; let [a] = undefined; let [a] = null; let [a] = {}; 以上都會(huì)報(bào)錯(cuò)
但是如果左邊為數(shù)組,右邊為字符串,將會(huì)取字符串的第一個(gè)下標(biāo)的值
let [a] = '121321' a = '1' let [a] = 'adgasg' a = 'a'
對(duì)于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:3 let [a = 3,b] = [,4] // a:3 b:4 let [a = 3,b] = [5,4] // a:5 b:4
特殊
let [a = 3] = [undefined] // a:3 let [a = 3] = [null] // a:null
Tips: 在es6中使用嚴(yán)格相等運(yùn)算符,在結(jié)構(gòu)賦值中如果需要默認(rèn)值生效,則應(yīng)對(duì)等的值為undefined的時(shí)候才會(huì)采用默認(rèn)值,否則還是使用賦值。上面中null 不嚴(yán)格等于undefined++
如果默認(rèn)值的賦值為一個(gè)表達(dá)式,只有當(dāng)?shù)忍?hào)右邊的賦值沒(méi)有值為undefined的時(shí)候,才會(huì)取表達(dá)式中的值,如下:
function demo(){ console.log('demo') } let [a = demo()] = [] // a: demo let [a = demo()] = [1] // a : 1
對(duì)象的解構(gòu)賦值
與數(shù)組的不同點(diǎn)是,數(shù)組的元素必須和賦值的元素要位置一致才能正確的賦值,而對(duì)象的解構(gòu)賦值則是等號(hào)兩邊的變量和屬性同名即可取到正確的值。否則值為 undefined
let {a,b} = {a:'23',b:'3'} let {a,b} = {b:'3',a:'23'} // 上面兩個(gè)的值 都是 a: 23 b: 3 let {a,b} = {a:'3',c:'d'} //a: 3 b: undefined
對(duì)象的解構(gòu)賦值還有將某一個(gè)現(xiàn)有對(duì)象的方法賦值到一個(gè)新的變量,如下:
let {sin,cos} = Math // Math 中的sin cos 方法將賦值給變量 sin cos let {log} = console // log(2) === console.log(2)
如果等號(hào)左邊的變量名不能和等號(hào)右邊的對(duì)象的屬性名一致,則必須寫(xiě)成如下格式:
let {a:b} = {a:'ss'} // b:ss //a是屬性名,b才是實(shí)際賦值的變量名
對(duì)象的解構(gòu)賦值一樣是可以嵌套解構(gòu)的,如下:
第一種: let obj = { p:[ 'Hello', {y:'world'} ] } let {p:[x,{y}]} = obj // x: Hello, y: world 這邊的p只是屬性不是變量,如果p想賦值可以寫(xiě)成: 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)模式 是嵌套的對(duì)象,如果子對(duì)象所在的父屬性不存在,則會(huì)報(bào)錯(cuò),如下:
let {foo:{bar}} = {baz:'baz'} //報(bào)錯(cuò)
默認(rèn)值
let {x = 3} = {} // x: 3 let {x,y = 5} = {x : 1} // x: 1, y: 5 let {x: y = 5} = {} // y = 5 let {x: y = 5} = {x : 4} // y = 4 let {x: y = 'hhhh'} = {} //y = 'hhhh' Tips:以上左邊 x為屬性名,y為變量 let {x = 5} = {x: undefined} // x: 5 let {x = 4} = {x: null} // x: null 同數(shù)組一樣遵循 嚴(yán)格等于 只有右邊為undefined的時(shí)候默認(rèn)值才會(huì)生效
注意點(diǎn):
1)不能將已聲明的變量用于解構(gòu)賦值,因?yàn)橐呀?jīng)是一個(gè)代碼塊。
字符串的解構(gòu)賦值
如果賦值的對(duì)象是數(shù)組,字符串將被分割為數(shù)組的格式,一一對(duì)應(yīng)賦值
let [a,b] = 'ha' // a = h , b = a 同時(shí)可以獲得字符串的長(zhǎng)度: let {length:len} = '12121' // len = 5
數(shù)值和布爾值的解構(gòu)賦值
如果等號(hào)右邊是數(shù)字或者布爾值 則轉(zhuǎn)換成對(duì)象或者說(shuō),除了是數(shù)組和對(duì)象,其他值都將轉(zhuǎn)換成對(duì)象,null 和 undefined 除外。如下:
let {t:s} = 123 let {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 , 13 function 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 8 m({x:32}) // [32,undefined] //因?yàn)閭髦堤娲疫叺馁x值,但是只有x沒(méi)有y //所以y是取 左邊y的默認(rèn)值,因?yàn)槟銢](méi)有賦值 為undefined m({}) // [undefined,undefined] // 取左邊x,y的默認(rèn)值,因?yàn)闆](méi)有賦值 為undefined m() // [0,0] // 沒(méi)有傳值,使用本身的賦值 都是0
其他
不能使用圓括號(hào)的情況
可以使用圓括號(hào)的情況
解構(gòu)賦值的用途
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)創(chuàng)新互聯(lián)的支持。
文章題目:ES6入門(mén)教程之變量的解構(gòu)賦值詳解
網(wǎng)站路徑:http://muchs.cn/article30/pidcso.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)建站、云服務(wù)器、網(wǎng)站設(shè)計(jì)、Google、手機(jī)網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
營(yíng)銷型網(wǎng)站建設(shè)知識(shí)