ES6新特性——解构赋值

基础用法

• 解构赋值：解构的目标是数组和对象，在表达式的左边定义了从原变量中区出什么变量。
• 解构数组

const arr = ['E', 'S', '6', '新', '特', '性']
// 变量声明并赋值
let [a, b, c] = arr
console.log(a, b, c) // 'E' 'S' '6'
// 变量先声明再赋值
let d, e, f
[, , , d, e, f] = arr 
console.log(d, e, f) // '新' '特' '性'
// 剩余变量赋值,注意：剩余变量赋值的变量必须是最后一个
let [a, b, c, ...d] = arr
console.log(a, b, c, d) // 'E' 'S' '6' ['新', '特', '性']
// 解构函数返回值
function fun () {
  return [1, 2, 3]
}
let [a, b] = fun()
console.log(a, b) // 1 2
// 默认值，防止解构出undefined，可以为变量设置一个默认值
let [a, d, c = 0] = [1, 2]
console.log(c) // 0

• 解构对象

// 变量声明并赋值
let {a, b} = { a: 1, b: 2}
console.log(a, b) // 1 2
// 变量先声明再赋值
let a, b
({a, b} = { a: 1, b: 2});
console.log(a, b) // 1 2
// 默认值
let {a, b, c = 0} = { a: 1, b: 2}
console.log(c) // 0
// 重命名
let { a: aa, b: bb} = { a: 1, b: 2}
console.log(aa, bb) // 1 2

进阶用法

• 解构嵌套的数组和对象

let obj = {
      'a': 1,
      'b': {
        'b1': 11,
        'b2': 22
      },
      'c': [ 'c1', 'c2']
    }
    let {
      a,
      'b': {
        b1,
        b2,
      },
      'c': [c1,c2]
    } = obj

• for of 迭代和解构

const arr = [{ name: 'Jack', age: 18}, { name: 'Pink', age: 20}]
for (let { age } of arr) {
    console.log(age) // 18 20
}

• 函数参数默认值
  • 必须传递参数
  • 可不传递参数

function Stu ({ age = 18, name = 'Jack'}) {
      console.log(name, age)
    }
Stu({}) // Jack 18
Stu({age:20}) // Jack 20
Stu()	// 报错

function Stu1 ({ age = 18, name = 'Jack'} = {}) {
  console.log(name, age)
}
Stu1({})	// Jack 18
Stu1({age:20})	// Jack 20
Stu1()	// Jack 18

• 函数实参解构

const obj = {
      name: 'Pink',
      data: {
        id: 111234,
        age: 22,
        denger: '男'
      }
    }
function Stu1 ({ data: { id } }) {
  console.log(id)
}
Stu1(obj)	// 111234