【JavaScript】巧妙利用对象解构，实现设置变量默认值或变量重命名

很多时候我们经常使用，如下
const list = obj.list || ''
来给变量list设置默认值，保证它不为undefined。
但是我觉得这种方式还不够优雅，或者在获取一个比较深的对象的属性值时还可能会被抛异常，比如
const list = obj.data.list || ''
如果data就已经为undefined，那么再去获取list肯定就会抛异常了，最终导致程序中断。
所以，说了这么多。有没有什么解决方案呢？当然是有的，那就是对象解构

talk is cheap, show me the code.

简单的解构

function deconstruct(obj) {
  {
    const {list} = {...obj}
    console.log('直接解构 list=', list)
  }
  {
    const {list = '/'} = {...obj}
    console.log('有默认值的解构 list=', list)
  }
  {
    const {list: pageApi} = {...obj}
    console.log('解构后重命名 pageApi=', pageApi)
  }
  {
    const {list: pageApi = '/'} = {...obj}
    console.log('解构后重命名并设置默认值 pageApi=', pageApi)
  }
}

deconstruct({ list: '/users' })
console.log('----------------')
deconstruct({})
console.log('----------------')
deconstruct(undefined)

控制台输出

直接解构 list= /users
有默认值的解构 list= /users
解构后重命名 pageApi= /users
解构后重命名并设置默认值 pageApi= /users
----------------
直接解构 list= undefined
有默认值的解构 list= /
解构后重命名 pageApi= undefined
解构后重命名并设置默认值 pageApi= /
----------------
直接解构 list= undefined
有默认值的解构 list= /
解构后重命名 pageApi= undefined
解构后重命名并设置默认值 pageApi= /

小结

• 使用=设置默认值
• 使用:重命名解构后的变量
• 即使对undefined进行结构，也不会抛异常，所以可以放心大胆的解构啦

层级深一点的解构

function deconstruct(obj) {
  const {data = {}} = {...obj}
  const {list = ''} = {...data}
  console.log('list=', list)
  console.log('list=', obj.data.list || '')
}

const url = {
  data: {
    list: '/users'
  }
}

deconstruct(url)
console.log('----------------')
deconstruct({})

控制台输出

这里可以看见使用传统的方式来获取属性值是抛了异常的，
虽然这里是我人为故意传的值造成的，但是在实际开发中难免会遇到这种情况。

list= /users
list= /users
----------------
list= 

console.log('list=', obj.data.list || '')
                                ^
TypeError: Cannot read property 'list' of undefined