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

最新推荐文章于 2024-10-12 14:12:43 发布

tanpenggood

最新推荐文章于 2024-10-12 14:12:43 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文为【tanpenggood】原创文章，允许转载，但转载必须注明出处并附带首发链接！

本文链接：https://blog.youkuaiyun.com/AV_woaijava/article/details/106928397

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

本文探讨了在JavaScript中使用对象解构赋值来优雅地处理默认值的方法，避免了深层属性访问时可能引发的异常，通过示例展示了如何在不同情况下应用解构赋值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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