解构赋值的运用

什么是解构赋值

解构赋值是赋值运算符的扩展，左边结构与右边结构一一对应赋值。

let [a, b, c] = [1, 2, 3]
console.log(a, b, c)

// a => 1
// b => 2
// c => 3

除了上面最基本的解构赋值，我们还可以省略

let [a, , b] = [1, 2, 3]
console.log(a, b)

// a => 1
// b => 3

还可以配合...运算符赋值

let [a, b, ...c] = [1, 2, 3, 4, 5]
console.log(a, b, c)

// a => 1
// b => 2
// c => [3, 4, 5]

还可以设置默认值，当赋值为undefined是会赋值默认值。

let [a = 10, b = 20, c = 30] = [1, 2]
console.log(a, b, c)

// a => 1
// b => 2
// c => 30

数组的长度

let arr = [1, 2, 3, 4, 5]
let {
    length
} = arr;
console.log(length)

---

以上都是在Array中的运用，我们来看看在Object中的运用。

let {
    name,
    age
} = {
    name: 'robbit',
    age: 20
};
console.log(name, age)

// robbit 20

在我们开发中，后台通常返回的数据一个Json对象的，我们可以通过解构赋值部分需要的参数。

let dataset= {
    name: "robbit",
    age: 18,
    sex: "nan",
    class: 10
}
let {
    name: oName,
    age: oAge,
    sex: oSex
} = dataset;
console.log(oName, oAge, oSex)

// oName => robbit
// oAge => 18
// oSex => nan

---

当左右解构一致时，Array和Object也可以解构嵌套。

数组里嵌套对象

let arr = [1, 2, 3, {
    name: 'robbit'
}];
let {
    0: a,
    1: b,
    2: c,
    3: {
        name: oName
    }
} = arr;
console.log(a, b, c, oName)

// a => 1
// b => 2
// c => 3
// oName => robbit

对象里嵌套对象

let obj = {
    name: 'robbit',
    age: 20,
    arr: {
        data: 1,
    }
}
let {
    name: a,
    age: b,
    arr: {
        data: c
    }
} = obj
console.log(a, b, c)

// a => robbit
// b => 20
// c => 1

---

对象里嵌套数组

let obj = {
    name: 'robbit',
    age: 20,
    arr: [1]
}
let {
    name: a,
    age: b,
    arr: [c]
} = obj
console.log(a, b, c)

// a => robbit
// b => 20
// c => 1

优点
由此看来，左边结构与右边结构一一对应就可以完成赋值，这的确是一种非常简洁的语法。