一文掌握ES6解構賦值的原理與運用

本篇文章為大家帶來了關於javascript的相關知識，ES6允許按照一定模式從陣列或物件中提取值，然後對變數進行賦值，稱為解構。只要等號兩邊的模式相同，左邊的變數就會被賦予對應的值，這種寫法屬於「模式匹配」。統稱起來就叫做「解構賦值」。下面一起來看一下，希望對大家有幫助。

【相關推薦：javascript影片教學、web前端】

##陣列的解構賦值

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

同時定義多個變量，a匹配1、b匹配2、c匹配3

#解構賦值允許指定預設值，即左邊變數指定預設值，右邊沒有對應的值，會優先輸出預設值。

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

x符合字元a，y預設值為字元b，若右邊沒有對應的，預設輸出字元b。

對象的解構賦值

解構不僅可以用於數組，還可以用於對象，對象的解構與數組有一個重要的不同，數組的元素是按照順序排列的，變數的取值由它的位置決定的；而物件的屬性沒有次序，變數必須與屬性同名才能取到正確的值。

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)

利用解構賦值交換變數

let x = 1;
let y = 2;
[x, y] = [y, x];

console.log('x => ', x)
console.log('y => ', y)

這樣交換變數x和y的值，寫法不但簡潔，而且易讀，語意非常清晰。

從函數傳回多個值

函數只能傳回一個值，如果要傳回多個值，只能將它們放在陣列或物件裡返回，有了解構賦值，就變得更方便了。

提取hobbies數組中的第二個值

function getArray() {
    return {
        name: 'kongsam',
        age: 21,
        hobbies: ['骑行', '动漫', '羽毛球']
    }
}
console.log(getArray().name + '喜欢' + getArray().hobbies[1]) // 动漫

利用解構賦值來取得hobbies數組中的第二個值

let {name, age, hobbies} = getArray()
console.log(name + '喜欢' + hobbies[1]) // 动漫

遍歷Map結構

對於for...of循環遍歷來說，遍歷出來的值是一個數組，而解構賦值對於數組是可以「模式匹配」的，這很快速地取出鍵-值。

for...of迴圈遍歷配合解構賦值取得鍵-值就非常方便。

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]

可以給函數的參數中傳入對象，並且可以對傳入的對象設定預設值。它將被解構到函數內部裡進行使用，你也可以這樣理解。

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]

上面的寫法不一樣，也會導致結果不一樣

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不對應物件屬性中的值，匹配不成功所導致的。

【相關推薦：

javascript影片教學、web前端】

以上是一文掌握ES6解構賦值的原理與運用的詳細內容。更多資訊請關注PHP中文網其他相關文章！