欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久

解構

我們經(jīng)常使用數組或對象存儲數據，然后從中提取出相關(guān)數據信息

試圖解決的問(wèn)題

以前開(kāi)發(fā)者為了從對象或數組中提取出特定數據并賦值給變量，編寫(xiě)了很多重復的代碼，就像這樣：

function demo1(obj){
    let key1 = obj.key1
    let key2 = obj.key2
    let key3 = obj.key3
    let key4 = obj.key4
    
    // 使用key1,key2,key3,key4變量，做進(jìn)一步操作
}

demo1({
    key1: 'value1',
    key2: 'value2',
    key3: 'value3',
    key4: 'value4'
})

解決的方法

es6引入新特性：解構。來(lái)解決上面的問(wèn)題，請看下面：

function demo1({key1, key2, key3, key4}){
    console.log(key2) // value2
    
    // 使用key1,key2,key3,key4變量，做進(jìn)一步操作
}

demo1({
    key1: 'value1',
    key2: 'value2',
    key3: 'value3',
    key4: 'value4'
})

可以把解構簡(jiǎn)單理解成賦值

更詳細的介紹請看下面補充部分

補充

對象解構

對象解構的語(yǔ)法：在賦值操作符左邊放置一個(gè)對象字面量

聲明變量時(shí)使用解構

let obj = {
    key1: 'value1',
    key2: 'value2'
}
let {key1, key2} = obj

console.log(key1) // value1

不要忘記初始化

// 語(yǔ)法錯誤
var {key1, key2}

// 語(yǔ)法錯誤
let {key1, key2}

變量賦值時(shí)使用解構

let obj = {
    key1: 'value1',
    key2: 'value2'
}
let key1 = '11';
// 一定要用小括號包裹賦值語(yǔ)句。否則js引擎將{}是為代碼塊，而代碼塊不允許出現在賦值語(yǔ)句的左側
({key1} = obj)

console.log(key1) // value1

解構時(shí)的默認值

let obj = {
    key1: 'value1',
    key2: 'value2',
    key5: undefined
}
let {key1, key2, key3, key4 = 'value4', key5 = 'value5'} = obj

console.log(key2) // value2
console.log(key3) // undefined 該變量名在obj中不存在，則賦值undefined
console.log(key4) // value4 對應的屬性不存在，使用默認值
console.log(key5) // value5 對應屬性值為undefined，使用默認值

非同名變量賦值

let obj = {
    key1: 'value1'
}
let {key1: v1, key2: v2 = 'value5'} = obj

console.log(v1) // value1
console.log(v2) // value5

嵌套對象的解構

let obj = {
    loc: {
        key1: 'value1',
    }
}
let {loc: {key1, key2, key3 = 'value3'}} = obj;

console.log(key1) // value1
console.log(key2) // undefined
console.log(key3) // value3

數組解構

數組解構語(yǔ)法：與對象解構語(yǔ)法相比要簡(jiǎn)單多了，使用的是數組字面量

聲明變量時(shí)使用解構

let arr = ['value1', 'value2', 'value3', 'value4', 'value5']
let [,,key3,key4,key5] = arr

console.log(key3) // value3 逗號是占位符
console.log(key5) // value5

不要忘記初始化

// 語(yǔ)法錯誤
let [,,key3,key4,key5]

變量賦值時(shí)使用解構

不需要用小括號包裹表達式，這一點(diǎn)與對象解構不同

let arr = ['value1', 'value2']
let key1, key2;
[key1, key2] = arr
console.log(key1) // value1

數組解構有一個(gè)獨特用法：交換兩個(gè)變量的值

let key1 = 'value1';
let key2 = 'value2';
[key1, key2] = [key2, key1];

console.log(key1) // value2
console.log(key2) // value1

解構時(shí)的默認值

let arr = ['value1']
let [key1, key2 = 'value2'] = arr

console.log(key2) // value2

嵌套數組的解構

let arr = ['value1', ['value2', 'value3'], 'value4']
let [key1,[key2],key4] = arr

console.log(key2) // value2
console.log(key4) // value4

不定元素

前面我們介紹了不定參數，而在數組解構語(yǔ)法中有一個(gè)與之類(lèi)似的概念：不定元素。在數組中，可以通過(guò)三個(gè)點(diǎn)（...）的語(yǔ)法將數組中的其余元素賦值給一個(gè)特定的變量，就像這樣：

let arr = ['value1', 'value2', 'value3', 'value4']
let [key1, ...restKeys] = arr

console.log(key1) // value1
console.log(restKeys.length) // 3
console.log(restKeys[0]) // value2

注：與不定參數一樣，不定元素也必須是最后一個(gè)

可以使用不定元素克隆數組

let arr = ['value1', 'value2']
let [...copy] = arr

console.log(Array.isArray(copy)) // true
console.log(copy[1]) // value2

解構參數

解構參數必須傳值

function demo(key1, {key2, key3}){
    console.log(key2) // value2
}
// 正確
demo('value1', {key2: 'value2'})
// 報錯
demo('value1')

當調用 demo('value1') 時(shí)，js引擎實(shí)際上做了這些事:

function demo(key1, options){
    let {key2, key3} = options
}

如果需要讓解構參數可選，必須為其提供默認值

function demo(key1, {key2, key3} = {}){
    console.log(key2) // undefined
}

// 正確
demo('value1')

下面這種寫(xiě)法，讓解構參數支持可選，并且能提供默認值：

function demo(key1, {key2 = 'value2', key3 = 'value3'} = {}){
    console.log(key2)
}

demo('value1') // value2 解構參數支持可選
demo('value1', {}) // value2
demo('value1', {key2: 'value20'}) // value20
demo('value1', {key3: 'value30'}) // value2