解构赋值

1.基本用法

1.数组的解构
const [a, b] = [10, 100]
//a = 10
//b = 100

注意：因为数组没key，所有解构出来的a, b可以任意取名然后使用

2.对象的结构
const obj = {
    name: "Roven",
    age: 30
}
const { name, age } = obj
//name = 'Roven'
//age = 30

注意：解构的name, age必须对应目标对象obj, 如果没有值，为undefined

2.默认值

1.数组的默认值
const [a = 10, b = 20, c = 30] = [100, 200]
//a = 100
//b = 200
//c = 30

注意：当解构项多于目标数组本身，默认值从原来的undefined -> 设置的默认值

1.对象的默认值
const obj = {
    name: "Roven",
    age: 30
}
const { name = 'curry', age = '20', gender = '男' } = obj
//name = 'Roven'
//age = 30
//gender = '男'

注意：与数组相同

3.字符串的解构赋值

const str = 'hello world'
const [a, b, c, d, e, f, g] = str
//h, e, l, l, o, , w

注意：字符串类似于数组

4.函数参数的解构赋值

(1) 参数是对象
const obj = {
    a: 100,
    b: 200
}
function fn({a, b}){
    return a + b
}
const sum = fn(obj)
console.log(sum)
//sum = 300

(2) 参数为数组
const arr = [100, 300]
function fn2([a, b]){
    return a + b
}
const sum2 = fn2(arr)
console.log(sum2)
//sum2 = 400

5.解构重命名

const obj = {
    name: "cuury",
    age: 30
}
const { name, age:currentAge } = obj
console.log(name, currentAge)
//curry, 30
注意：重命名后不能使用命名前的变量名称

6. 应用场景

1. 交换变量
let x = 1
let y = 2
console.log([x, y]) //[1, 2]
console.log([x, y] = [y, x])  //[2, 1]

2. 结构函数返回值
function fn(){
    return {
        name: "curry",
        age: 30
    }
}
const { name, age } = fn()

3. 函数默认值
function fn({ name = 'curry', age = 30 }){ ... }

4. 遍历 Map 结构
const map = new Map()
map.set("name", "curry")
map.set("age", 30)
for( const [key, value] of map ){
    console.log([key])  //["name"] ["age"]
    console.log([, value])  //["empty", "curry"] ["empty", 30]
    console.log([key, value])  // ["name", "curry"] ["age", 30]
}