欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

ES6 解構(gòu)賦值的原理及運(yùn)用

 更新時(shí)間:2021年05月25日 10:42:01   作者:shiramashiro  
ES6允許按照一定模式從數(shù)組或?qū)ο笾刑崛≈?,然后對變量進(jìn)行賦值,稱為解構(gòu)。只要等號兩邊的模式相同,左邊的變量就會被賦予對應(yīng)的值,這種寫法屬于“模式匹配”。統(tǒng)稱起來就叫做“解構(gòu)賦值”。

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

let [a, b, c] = [1, 2, 3]

同時(shí)定義多個(gè)變量,a匹配1、b匹配2、c匹配3

解構(gòu)賦值允許指定默認(rèn)值,即左邊變量指定默認(rèn)值,右邊沒有對應(yīng)的值,會優(yōu)先輸出默認(rèn)值。

let [x, y = 'b'] = ['a'] // x = 'a', y = 'b'

x匹配字符a,y默認(rèn)值為字符b,若右邊沒有對應(yīng)的,默認(rèn)輸出字符b。

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

解構(gòu)不僅可以用于數(shù)組,還可以用于對象,對象的解構(gòu)與數(shù)組有一個(gè)重要的不同,數(shù)組的元素是按照次序排列的,變量的取值由它的位置決定的;而對象的屬性沒有次序,變量必須與屬性同名才能取到正確的值。

let {
    name,
    age,
    hobbies: [one, two]
} = {
    name: 'shiramashiro',
    age: 21,
    hobbies: ['騎行', '動(dòng)漫']
}

比如我取age的值,改成取abc的值,由于沒有和對象中的屬性名對應(yīng),無法對應(yīng)賦值,所以是undefined。

解構(gòu)賦值的運(yùn)用

交換變量的值

正常想到交換變量的值的方式

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ù)返回多個(gè)值

函數(shù)只能返回一個(gè)值,如果要返回多個(gè)值,只能將它們放在數(shù)組或?qū)ο罄锓祷?,有了解?gòu)賦值,就變得更加方便了。

提取hobbies數(shù)組中的第二個(gè)值

function getArray() {
    return {
        name: 'kongsam',
        age: 21,
        hobbies: ['騎行', '動(dòng)漫', '羽毛球']
    }
}
console.log(getArray().name + '喜歡' + getArray().hobbies[1]) // 動(dòng)漫

利用解構(gòu)賦值獲取hobbies數(shù)組中的第二個(gè)值

let {name, age, hobbies} = getArray()
console.log(name + '喜歡' + hobbies[1]) // 動(dòng)漫

遍歷Map結(jié)構(gòu)

對于for...of循環(huán)遍歷來說,遍歷出來的值是一個(gè)數(shù)組,而解構(gòu)賦值對于數(shù)組是可以“模式匹配”的,這很快速地取出鍵-值。

for...of循環(huán)遍歷配合解構(gòu)賦值獲取鍵-值就非常方便。

for (let [key, value] of map) {
    console.log("key => ", key)
    console.log("value => ", value)
}

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

// 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ù)中傳入對象,并且可以對傳入的對象設(shè)置默認(rèn)值。它將被解構(gòu)到函數(shù)內(nèi)部里進(jìn)行使用,你也可以這樣理解。

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]

上面的寫法不一樣,也會導(dǎo)致結(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]

第三和第四個(gè)打印會有undefined,這是因?yàn)閭魅氲膞或y不對應(yīng)對象屬性中的值,匹配不成功所導(dǎo)致的。

以上就是ES6 解構(gòu)賦值的原理及運(yùn)用的詳細(xì)內(nèi)容,更多關(guān)于ES6 解構(gòu)賦值的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

最新評論