【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