1. 解构赋值

const arr = [100, 60, 80]
console.log(arr[0]) // 最大值
console.log(arr[1]) // 最小值
console.log(arr[2]) // 平均值

const arr = [100, 60, 80]
const max = arr[0]
const min = arr[1]
const avg = arr[2]
console.log(max) // 最大值
console.log(min) // 最小值
console.log(avg) // 平均值

以上要么不好记忆，要么书写麻烦，此时可以使用解构赋值的方法让代码更简洁

const [max, min, avg] = [100, 60, 80]
console.log(max) // 最大值
console.log(min) // 最小值
console.log(avg) // 平均值

解构赋值是一种快速为变量赋值的简洁语法，本质上仍然是为变量赋值。

2. 数组解构

数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法。

基本语法：

1. 赋值运算符 = 左侧的 [] 用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量

2. 变量的顺序对应数组单元值的位置依次进行赋值操作

// 普通的数组
const arr = [1, 2, 3]
// 批量声明变量 a b c
// 同时将数组单元值 1 2 3 依次赋值给变量 a b c
const [a, b, c] = arr
console.log(a)  // 1
console.log(b)  // 2
console.log(c)  // 3

// 同时将数组单元值 1 2 3 依次赋值给变量 a b c
const [a, b, c] = [1, 2, 3]
console.log(a)  // 1
console.log(b)  // 2
console.log(c)  // 3

基本语法：典型应用交互2个变量

let a = 1
let b = 3; // 这里必须有分号
[b, a] = [a, b]
console.log(a)  // 3
console.log(b)  // 1

注意： js 前面必须加分号情况

1. 立即执行函数

(function t() {})();
// 或者
;(function t() {})()

2. 数组解构

// 数组开头的，特别是前面有语句的一定注意加分号
;[b, a] = [a, b]

1.变量多单元值少的情况：

// 变量多，单元值少
const [a, b, c, d] = ['小米', '苹果', '华为']
console.log(a)  // 小米
console.log(b)  // 苹果
console.log(c)  // 华为
console.log(d)  // undefined

变量的数量大于单元值数量时，多余的变量将被赋值为 undefined

2.变量少单元值多的情况：

// 变量少，单元值多
const [a, b, c] = ['小米', '苹果', '华为', 'OPPO']
console.log(a)  // 小米
console.log(b)  // 苹果
console.log(c)  // 华为

3.利用剩余参数解决变量少单元值多的情况：

// 利用剩余参数 变量少，单元值多
const [a, b, ...tel] = ['小米', '苹果', '华为', 'OPPO', 'vivo']
console.log(a)  // 小米
console.log(b)  // 苹果
console.log(tel)  // ['华为', 'OPPO', 'vivo']

剩余参数返回的还是一个数组

4.防止有undefined传递单元值的情况，可以设置默认值：

const [a = '手机', b = '华为'] = ['小米']
console.log(a)  // 小米
console.log(b)  // 华为

允许初始化变量的默认值，且只有单元值为 undefined 时默认值才会生效

5. 按需导入，忽略某些返回值

const [a, , c, d] = ['小米', '苹果', '华为', 'OPPO']
console.log(a)  // 小米
console.log(c)  // 华为
console.log(d)  // OPPO

6. 支持多维数组的结构：

const [a, b] = ['苹果', ['小米', '华为']]
console.log(a)  // 苹果
console.log(b)  // ['小米', '华为']

// 想要拿到 小米 和 华为 怎么办？
const [a, [b, c]] = ['苹果', ['小米', '华为']]
console.log(a)  // 苹果
console.log(b)  // 小米
console.log(c)  // 华为

3. 对象解构

对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法

基本语法：

1. 赋值运算符 = 左侧的 {} 用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量

2. 对象属性的值将被赋值给与属性名相同的变量

3. 注意解构的变量名不要和外面的变量名冲突否则报错

4. 对象中找不到与变量名一致的属性时变量值为 undefined

// 普通对象
const user = {
    name: '小明',
    age: 18
}
// 批量声明变量 name age
// 同时将数组单元值 小明 18 依次赋值给变量 name age
const {name, age} = user
console.log(name)   // 小明
console.log(age)    // 18

1.给新的变量名赋值：

可以从一个对象中提取变量并同时修改新的变量名

// 普通对象
const user = {
    name: '小明',
    age: 18
}
// 把 原来的name 变量重命名为 uname
const {name: uname, age} = user
console.log(uname)  // 小明
console.log(age)    // 18

冒号表示“什么值：赋值给谁”

2. 数组对象解构

const pig = [
    {
        name: '佩奇',
        age: 6
    }
]
const [{name, age}] = pig
console.log(name, age)

3. 多级对象解构

const pig = {
    name: '佩奇',
    family: {
        mother: '猪妈妈',
        father: '猪爸爸',
        sister: '乔治'
    },
    age: 6
}
const {name, family: {mother, father, sister}} = pig
console.log(name)   // 佩奇
console.log(mother) // 猪妈妈
console.log(father) // 猪爸爸
console.log(sister) // 乔治