這篇文章主要介紹“ES6解構(gòu)賦值的原理是什么及怎么運用”的相關(guān)知識,小編通過實際案例向大家展示操作過程,操作方法簡單快捷,實用性強,希望這篇“ES6解構(gòu)賦值的原理是什么及怎么運用”文章能幫助大家解決問題。
成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供羅源網(wǎng)站建設、羅源做網(wǎng)站、羅源網(wǎng)站設計、羅源網(wǎng)站制作等企業(yè)網(wǎng)站建設、網(wǎng)頁設計與制作、羅源企業(yè)網(wǎng)站模板建站服務,10多年羅源做網(wǎng)站經(jīng)驗,不只是建網(wǎng)站,更提供有價值的思路和整體網(wǎng)絡服務。
let [a, b, c] = [1, 2, 3]
同時定義多個變量,a匹配1、b匹配2、c匹配3
解構(gòu)賦值允許指定默認值,即左邊變量指定默認值,右邊沒有對應的值,會優(yōu)先輸出默認值。
let [x, y = 'b'] = ['a'] // x = 'a', y = 'b'
x匹配字符a,y默認值為字符b,若右邊沒有對應的,默認輸出字符b。
解構(gòu)不僅可以用于數(shù)組,還可以用于對象,對象的解構(gòu)與數(shù)組有一個重要的不同,數(shù)組的元素是按照次序排列的,變量的取值由它的位置決定的;而對象的屬性沒有次序,變量必須與屬性同名才能取到正確的值。
let { name, age, hobbies: [one, two] } = { name: 'shiramashiro', age: 21, hobbies: ['騎行', '動漫'] }
比如我取age的值,改成取abc的值,由于沒有和對象中的屬性名對應,無法對應賦值,所以是undefined。
正常想到交換變量的值的方式
let x = 1, y = 2, temp = 0 temp = x // x = 1 = temp x = y // y = 2 = x y = temp // temp = 1 = y console.log('x => ', x) console.log('y => ', y)
利用解構(gòu)賦值交換變量
let x = 1; let y = 2; [x, y] = [y, x]; console.log('x => ', x) console.log('y => ', y)
這樣交換變量x和y的值,寫法不僅簡潔,而且易讀,語義非常清晰。
函數(shù)只能返回一個值,如果要返回多個值,只能將它們放在數(shù)組或?qū)ο罄锓祷?,有了解?gòu)賦值,就變得更加方便了。
提取hobbies數(shù)組中的第二個值
function getArray() { return { name: 'kongsam', age: 21, hobbies: ['騎行', '動漫', '羽毛球'] } } console.log(getArray().name + '喜歡' + getArray().hobbies[1]) // 動漫
利用解構(gòu)賦值獲取hobbies數(shù)組中的第二個值
let {name, age, hobbies} = getArray() console.log(name + '喜歡' + hobbies[1]) // 動漫
對于for...of循環(huán)遍歷來說,遍歷出來的值是一個數(shù)組,而解構(gòu)賦值對于數(shù)組是可以“模式匹配”的,這很快速地取出鍵-值。
for...of循環(huán)遍歷配合解構(gòu)賦值獲取鍵-值就非常方便。
for (let [key, value] of map) { console.log("key => ", key) console.log("value => ", value) }
// let { x = 10, y = 5 } = {} function f({ x = 10, y = 5 } = {}) { return [x, y] } console.log(f({ x: 100, y: 50 })) // [100, 50] console.log(f({ x: 3 })) // [3, 5] console.log(f({})) // [10, 5] console.log(f()) // [10, 5]
可以給函數(shù)的參數(shù)中傳入對象,并且可以對傳入的對象設置默認值。它將被解構(gòu)到函數(shù)內(nèi)部里進行使用,你也可以這樣理解。
function f(x = 10, y = 5) { return [x, y] } console.log(f(100, 50)) // [100, 50] console.log(f(3)) // [3, 5] console.log(f()) // [10, 5]
上面的寫法不一樣,也會導致結(jié)果不一樣
function f({ x, y } = { x: 10, y: 5 }) { return [x, y] } console.log(f({ x: 100, y: 50 })) // [100, 50] console.log(f({ x: 3 })) // [3, undefined] console.log(f({})) // [undefined, undefined] console.log(f()) // [10, 5]
第三和第四個打印會有undefined,這是因為傳入的x或y不對應對象屬性中的值,匹配不成功所導致的。
關(guān)于“ES6解構(gòu)賦值的原理是什么及怎么運用”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識,可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,小編每天都會為大家更新不同的知識點。
分享文章:ES6解構(gòu)賦值的原理是什么及怎么運用
URL地址:http://muchs.cn/article12/ghepgc.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供響應式網(wǎng)站、云服務器、企業(yè)網(wǎng)站制作、服務器托管、定制開發(fā)、網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)