ES6-解构赋值

分为：解构对象，解构数组

作用：快速从对象或者数组中获取成员

解构对象

语法：const { 键名1，键名2，...... } = 对象

作用: 从对象中获取同名键名定义为变量

注意: 使用 {} 解构对象，并且不用一一对应，因为对象是没有顺序的，只要是能对应就行

特点：解构对象可以起一个别名，之后就用别名取值，用原来的名字取不到

           语法: const { 键名：别名 } = 对象

方法：数据怎么写, 解构就怎么写

把数据变成变量

// 解构赋值的方式从对象中获取成员
const obj = {
  name: 'Yuanyuan',
  age: 18,
  gender: '男'
}
// 前面的 {} 表示我要从 obj 这个对象中获取成员了
// obj 必须是一个对象
const { age } = obj
console.log(age)

// 解构赋值的方式从对象中获取成员
const obj = {
  name: 'Yuanyuan',
  age: 18,
  gender: '男'
}
const { age,score } = obj
console.log(age,score) // 不会报错,相当于是加了一个score,只不过显示undefined

或者可以给解构对象起别名

// 解构对象可以起一个别名
const obj = { name: 'Yuanyuan', age: 18, gender: '男' }
/*
 相当于是取出'Yuanyuan'这个值,并且起一个别名叫n,g也是一样,
 后面用的时候就用别名,相当于是起了一个简单点的名字，
 之后取值用n,age,b，用name和gender取不到值
*/ 
const { name: n, age, gender: g } = obj
console.log(n, age, g)

解构多维对象

// 解构多维对象
const obj = {
      name: 'Yuanyuan',
      age: 18,
      gender: '男',
      info: {
        name: 'Lala',
        weight: 180,
        height: 180,
        desc: {
          message:  '这个人很懒, 啥也没说!'
        }
      },
      hobby: [ '健身', '吃肉', '睡觉' ]
    }
const {
      name,
      age: a2,
      info: {
        name1,
        weight,
        height,
        desc: {
          message: m
        }
      },
      hobby: [ a, b, c ]
    } = obj
console.log(m, a2, a) // 可以起别名,也可以需要的就写,不需要的就不写

解构数组

语法：const [ 变量1，变量2，......] = 数组

作用：按照数组的索引顺序, 依次给变量赋值

注意：使用 [] 解构数组,并且是有顺序的，必须一一对应，后面的可以不写，但是中间不能不写

// 使用解构赋值的方式从数组中获取成员
const arr = ['reo', 'yuta', 'hayato']

// 前面的 [] 表示要从 arr 这个数组中获取成员了
// a b c 分别对应这数组中的索引 0 1 2
// arr 必须是一个数组
let [a, b, c] = arr

解构多维数组

原则: 数组怎么写的, 解构就怎么写

把数据替换成变量

// 解构多维数组
const arr = [1, 2, [3, 4, [5, 6, [7, 8, [9]]]]]
// 需求: 获取 9 这个数据
const [a, b, [c, d, [e, f, [g, h, [i]]]]] = arr
console.log(i, d)