您好,登錄后才能下訂單哦!
這篇文章主要講解了“es6解構(gòu)的含義是什么”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“es6解構(gòu)的含義是什么”吧!
在es6中,解構(gòu)指的是按照一定的模式從數(shù)組和對象中提取值,對變量進(jìn)行賦值的行為;常見的有對象結(jié)構(gòu)、數(shù)組解構(gòu)和混合解構(gòu),是一種將數(shù)據(jù)結(jié)構(gòu)分解成更小的部分的過程,從而達(dá)到簡化提取信息的目的。
本教程操作環(huán)境:windows10系統(tǒng)、ECMAScript 6.0版、Dell G3電腦。
destructuring:百度百科的意思是結(jié)構(gòu)分解,ES6 中允許按照一定模式,從數(shù)組和對象中提取值,對變量進(jìn)行賦值,這被稱為解構(gòu)(Destructuring)。
開發(fā)中比較常見的有對象解構(gòu)、 數(shù)組解構(gòu)、混合解構(gòu)。這是一種將數(shù)據(jù)結(jié)構(gòu)分解為更小的部分的過程,從而達(dá)到簡化提取信息的目的。
傳統(tǒng)方法獲取對象中的值
let node = { type: 'Identifier', name: 'foo' } console.log(node.type) // Identifier console.log(node.foo) // foo
使用解構(gòu)
let node = { type: 'Identifier', name: 'foo' } let { type, name } = node console.log(type) // Identifier console.log(name) // foo
如果指定的局部變量名稱在對象中不存在,那么這個局部變量會被賦值為undefined
let { type, name, value } = node console.log(type) // Identifier console.log(name) // foo console.log(value) // undefined
當(dāng)指定的屬性不存在時,可以給不存在的屬性定義任意的默認(rèn)值
let { type, name, value = true } = node console.log(type) // Identifier console.log(name) // foo console.log(value) // true
指定新的變量名進(jìn)行解構(gòu)賦值
let arr = { six: '男', age: 19 } let {six:newSix, age:newAge} = arr console.log(six, age) // six is not defined console.log(newSix, newAge) // 男 19
看上面是不是覺得很奇怪,傳統(tǒng)對象賦值都是左邊四屬性,右邊是值。但是在解構(gòu)寫法中右邊是屬性,左邊是值,所以新的變量名在右邊。
如果使用let、var、const對對象進(jìn)行解構(gòu)時,被解構(gòu)對象的值不能不存在。
不使用var、let、const賦值時,需要將解構(gòu)語句使用()進(jìn)行包裹
({type,name} = node);//{}在js中作為代碼塊,單獨(dú)使用加等號會報錯會報錯
嵌套對象解構(gòu)
在對象嵌套對象中解構(gòu),我們會在第一層解構(gòu)中繼續(xù)使用花括號來深入下一層進(jìn)行查找;我們先來看一個栗子:
let node = { type: "Identifier", name: "foo", loc: { start: { line: 1, column: 1 }, end: { line: 1, column: 4 } } }
上面是一個嵌套對象node,我們先解構(gòu)第一層
let { loc, type, name } = node // {} Identifier foo
可以看到我們特意打亂了{(lán)}中屬性的順序,結(jié)果仍然正確輸出,所以可以猜到具體的對應(yīng)方式應(yīng)該是根據(jù)名字來對應(yīng)的,和順序無關(guān)。
繼續(xù)解構(gòu)第二層
let { loc: { start }} = node; console.log(start.line); // 1 console.log(start.column); // 4
此處我們也可以將start賦值給一個新的自定義的局部變量,假設(shè)我們賦值給newStart
let { loc: { start: newStart }} = node console.log(newStart.line) // 1 console.log(newStart.column) // 4
總結(jié)如下:
所有冒號前的標(biāo)識符都代表在對象中的檢索位置,其右側(cè)為被賦值的變量名;如果冒號后是花括號,則意味著要賦予的最終值嵌套在對象內(nèi)部更深的層級中。
數(shù)組解構(gòu)使用的是數(shù)組字面量,且解構(gòu)操作全部在數(shù)組內(nèi)完成,并且數(shù)組解構(gòu)不需要像對象字面量語法一樣使用對象的命名屬性。
let colors = [ 'red', 'green', 'blue' ] let [ firstColor, secondColor ] = colors console.log(firstColor) // 'red' console.log(secondColor) // 'green'
數(shù)組解構(gòu)語法中,我們主要是通過值在數(shù)組中的位置進(jìn)行選取,且可以將其存儲在任意變量中,未顯示聲明的元素會被直接忽略。
let [ , , thirdColor ] = colors console.log(thirdColor) // 'blue'
數(shù)組解構(gòu)之變量交換
傳統(tǒng)ES5中互換值一般需要引入第三個臨時變量作為中轉(zhuǎn),但如果使用數(shù)組解構(gòu)賦值語法,就不需要在增加額外變量了。
// ES5中互換值: let a = 1, b = 2, tmp; tmp = a a = b b = tmp console.log(a, b) // 2, 1 // ES6中互換值 let a = 1, b = 2; [ a, b ] = [b, a] console.log(a, b) // 2, 1
嵌套數(shù)據(jù)解構(gòu)
let colors = [ 'red', [ 'green', 'lightgreen'], 'blue' ] let [ firstColor, [ secondColor, thirdColor ], fourthColor ] = colors console.log(firstColor) // red console.log(secondColor) // green console.log(thirdColor) // lightgreen console.log(fourthColor) // blue
默認(rèn)值
也可以在數(shù)組解構(gòu)賦值表達(dá)式中為數(shù)組中的任意位置添加默認(rèn)值,當(dāng)指定位置的屬性不存在或其值為undefined時使用默認(rèn)值
let colors = [ 'red' ] let [ firstColor, secondColor = 'green' ] = colors console.log(firstColor) // red console.log(secondColor) // green
不定元素
...為展開運(yùn)算符我們應(yīng)該都知道它的用途,操作數(shù)組時可以用來把數(shù)組展開成字符串。在數(shù)組解構(gòu)中,可以通過...語法將數(shù)組中的其余元素賦值給一個特定的變量。
let colors = [ 'red', 'green', 'blue' ] let [ firstColor, ...restColors ] = colors console.log(firstColosr) // 'red' console.log(restColors.length); // 2 console.log(restColors[0]); // "green" console.log(restColors[1]); // "blue"
數(shù)組復(fù)制
在ES5中,開發(fā)者們經(jīng)常使用concat()方法來克隆數(shù)組
var colors = [ "red", "green", "blue" ]; var clonedColors = colors.concat(); console.log(clonedColors); //"[red,green,blue]"
concat()方法的設(shè)計初衷是連接兩個數(shù)組,如果調(diào)用時不傳遞參數(shù)就會返回當(dāng)前函數(shù)的副本
在ES6中,可以通過不定元素的語法來實(shí)現(xiàn)相同的目標(biāo)
let colors = [ "red", "green", "blue" ]; let [ ...clonedColors ] = colors; console.log(clonedColors); //"[red,green,blue]"
在被解構(gòu)的數(shù)組中,不定元素必須為最后一個條目,在后面繼續(xù)添加逗號會導(dǎo)致程序拋出語法錯誤。
let err = { errors: [ { msg: 'this is a message' }, { title: 'this is a title' } ] }
上面的代碼中,err對象中包含errors,errors又是一個數(shù)組又包含新的對象,提取對象中的msg。我們可以將上述栗子一步一步拆開進(jìn)行解構(gòu):
let { errors } = err let [ firstArr ] = errors let { msg } = firstArr console.log(msg) // 'this is a message' 也可以這樣解構(gòu) let [ , { title }] = err.errors console.log(title) // 'this is a title' let [{ msg }] = err.errors console.log(msg) // 'this is a message'
來看一個更復(fù)雜一點(diǎn)的,其實(shí)只要會找順序,這個理解起來還是很簡單的。
let node = { type: "Identifier", loc: { start: { line: 1, column: 1 } }, range: [0, 3] }; let { loc: { start }, range: [ startIndex ] } = node; console.log(start.line); // 1 console.log(start.column); // 1 console.log(startIndex); // 0
實(shí)際使用- 參數(shù)解構(gòu)
一般用在封裝函數(shù)參數(shù)的情況,如下栗子:
// options 上的屬性表示附加參數(shù) function setCookie(name, value, options) { options = options || {}; let secure = options.secure, path = options.path, domain = options.domain, expires = options.expires; // 設(shè)置 cookie 的代碼 } //可以改寫為:對options進(jìn)行解構(gòu)并賦予默認(rèn)值 function setCookie(name, value, { secure, path, domain, expires } = {}) { // ... }
感謝各位的閱讀,以上就是“es6解構(gòu)的含義是什么”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對es6解構(gòu)的含義是什么這一問題有了更深刻的體會,具體使用情況還需要大家實(shí)踐驗證。這里是億速云,小編將為大家推送更多相關(guān)知識點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。