很多时候我们经常使用,如下
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