5-1.对象解构

var obj = {
  id: 19,
  name: 'yxp',
  city: 'BeiJing'
}
// 1.解构对象
var { id, name } = obj
console.log(id)
console.log(name)
// 2.重命名
var { city: place } = obj
console.log(place)
// 3.默认值
var { age = '1000' } = obj
console.log(age)

5-2.数组解构

var list = [19, 'yxp', 'BeiJing']
// 1.解构数组
var [id, name] = list
console.log(id)
console.log(name)
console.log(city)
// 2、也可以取固定位置
var [id, , city] = list
console.log(id)
console.log(city)
// 3.默认值
var [, , , age = '1000'] = list
console.log(age)

5-3.嵌套解构

// 1.嵌套对象解构
var obj = {
  key: 'person',
  info: {
    id: 19,
    name: 'yxp'
  }
}
var { key, info: { id, name} } = obj
console.log(key)
console.log(id)
console.log(name)
// 2.嵌套数组解构
var list = [
  {
    id: 19,
    name: 'yxp',
    hobby: ['code', 'book']
  },
  {
    id: 20,
    name: 'zgl'
  }
]
var [{ id, name, hobby: [firstHobby, secondHobby]}, thePerson] = list
console.log(id)
console.log(name)
console.log(firstHobby)
console.log(secondHobby)
console.log(thePerson)

5-4.数组中的不定元素

var list = [1, 2, 3, 4]
var [first, ...values] = list
console.log(first)
console.log(values)
// 不定参数只能用在末尾项 => Uncaught SyntaxError: Rest element must be last element
var [first, ...values, last] = list
console.log(first)
console.log(values)
console.log(last)

5-5.函数形参解构

var obj = {
  id: 19,
  name: 'yxp'
}
// 1.普通形式
function fn1 ({id, name}) {
  console.log(id, name)
}
fn1(obj)
// 2.默认值
function fn2 ({id, name, age = '1000'}) {
  console.log(id, name, age)
}
fn2(obj)
// 3.上述的两种写法当入参是undefined时 会报错，因为undefined无法被解构
function fn3({id, name, age = '1000'} = { age: '1000' }) {
  console.log(id, name, age)
}
// 4.再精简优化一下例3的代码
var params = {
  age: '1000'
}
function fn4({id, name, age = params.age} = params) {
  console.log(id, name, age)
}