数组的解构、对象解构 （ECMAScript 2015（ES6））

es6 数组结构

原始取值方式

const arr = [100, 200, 300]

 const foo = arr[0]
 const bar = arr[1]
 const baz = arr[2]
 console.log(foo, bar, baz)

结构方式

const arr = [100, 200, 300]
// 依次对应
 const [foo, bar, baz] = arr
 console.log(foo, bar, baz)

单独获取第三个，前两个位置用逗号’,'空出来

const arr = [100, 200, 300]
// 单独获取第三个，前两个位置用逗号','空出来
 const [, , baz] = arr
 console.log(baz)

使用扩展运算符’…’，从当前位置往后的全部展开

const arr = [100, 200, 300]
// 使用扩展运算符'...'，从当前位置往后的全部展开
 const [foo, ...rest] = arr
 console.log(rest)

如果结构成员位置大于数组，则提取到的为 ‘undefined’

const arr = [100, 200, 300]
// 如果结构成员位置大于数组，则提取到的为 'undefined'
 const [foo, bar, baz, more] = arr
 console.log(more)

果给解构成员设置默认值，如果没有解构获得对应值，则会使用默认值

const arr = [100, 200, 300]
// 如果给解构成员设置默认值，如果没有解构获得对应值，则会使用默认值
 const [foo, bar, baz = 123, more = 'default value'] = arr
 console.log(bar, more)

可以用数组解构获取路径中的值

const path = '/foo/bar/baz'
// 传统方式获取
// const tmp = path.split('/')
// const rootdir = tmp[1]

// 解构方式获取
const [, rootdir] = path.split('/')
// console.log(path.split('/'));
console.log(rootdir)

es6对象解构

除了没有像数组一样排序，其他与数组差不多

const obj = { name: 'zce', age: 18 }

// 解构对象中的属性
  const { name } = obj
  console.log(name)

解构时重命名对象属性的的名称

const obj = { name: 'zce', age: 18 }
  const name = 'tom'
  const { name: objName } = obj
  console.log(objName)

解构时重命名对象属性的的名称，并赋予默认值

const obj = { name: 'zce', age: 18 }
  const name = 'tom'
  const { name: objName = 'jack' } = obj
  console.log(objName)

解构console.log

const { log } = console
log('foo')
log('bar')
log('123')