ES6 解构赋值常用总结

ES6 允许按照一定模式从数组和对象中提取值，然后对变量进行赋值，被称为解构赋值

1.数组的解构赋值

看下边两个例子就明白啦！

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

console.log(a,b,c)  // 1 2 3

// 注意这里！ 如果等号右边不是数组，那么将报错！


// ②
const F4 = ['孙悟空', '唐僧', '猪八戒', '沙僧']

let [sun, tang, zhu, sha] = F4

console.log(sun, tang, zhu, sha) // 孙悟空 唐僧 猪八戒 沙僧

2.对象的解构赋值

const xiyouji = {
    name: '孙悟空',
    age: '18',
    ball: ()=> {
        console.log('金箍棒!')
    }
}

let {name, age, ball} = xiyouji

console.log(name)  // 孙悟空

console.log(age)  // 18

console.log(ball)  

//()=> {
//        console.log('金箍棒!')
//    }

// 可以直接调用
let {ball} = xiyouji
ball()  // 金箍棒!

3.字符串的解构赋值

const [a, b, c, d, e] = 'hello'
console.log(a)  // h
console.log(b)  // e
console.log(c)  // l
console.log(d)  // l
console.log(e)  // o

4.用途（列举常用功能）

1）交换变量值

let x = 1
let y = 2

[x, y] = [y, x]

2）提取JSON 数据

let jsonData = {
    id: 1,
    status: true,
    data: [123, 456]
}
let {id, status, data} = jsonData
console.log(id, status, data)  // 1 true  [123, 456]

3）遍历Map结构

let map = new Map()
map.set('sunwukong', 'hello')
map.set('zhubajie', 'world')
for(let [key, val] of map) {
    console.log(key + '~~~' + val)  // sunwukong~~~hello  // zhubajie~~~world
}
// 如果只想获取键: 
for (let [key] of map) {
    console.log('键:'+ key)  // 键:sunwukong   // 键:zhubajie
}

// 如果只想获取值: 
for (let [,val] of map) {
    console.log('值:'+ val)  // 值:hello  // 值:world
}