解构时可空嵌套对象上的 ES6 默认参数

Posted

技术标签:

【中文标题】解构时可空嵌套对象上的 ES6 默认参数【英文标题】:ES6 default parameters on a nullable nested object while destructuring 【发布时间】:2019-07-23 21:26:15 【问题描述】:

我有一个这样的对象

const obj = 
  foo: 
    bar:  // maybe null
      id: 0
    
  
;

我想解构obj 得到id。如果 bar 曾经只是 undefined 或一个对象,这就足够了:

const 
        foo: 
          bar: 
            id,
           = ,
         = ,
       = obj;

但是当barnull 我得到错误Cannot read property 'id' of null

我可以做到,suggested here

const 
        foo: 
          bar = ,
         = ,
            = obj;
const  id  = bar || ;

但这意味着我需要将每个可为空的对象解构为单独的语句,我不希望这样做。

如果对象的值为 null,有没有办法让其默认初始化程序运行?

【问题讨论】:

【参考方案1】:

您可以在某种程度上“劫持”展开运算符。你会有一个不那么漂亮的语法,但它可以工作:

const obj = 
  foo: 
    bar: null
  


const id = .........obj.foo.bar.id
// id = undefined

You can add an "or something" to the end to get a default value, like:
const id = .........obj.foo.bar.id || 42
// id = 42

其工作原理是,如果您尝试传播未定义或空值,您将得到一个空对象:

console.log('spreaded null',  ...null )
// 

console.log('spreaded undefined',  ...undefined )
// 

现在,如果您访问一个未在对象上定义的属性,JS 引擎将返回您undefined,因此,您可以将它传播到另一个空对象来链接您需要访问的下一个内部属性.

【讨论】:

哎呀,它绝对不是很可读。这看起来我仍然需要一个单独的语句,而不是能够在原始解构语句中解决它,对吧?

以上是关于解构时可空嵌套对象上的 ES6 默认参数的主要内容,如果未能解决你的问题,请参考以下文章

React - 解构时的 defaultProps 与 ES6 默认参数(性能问题)

ES6第二篇:变量的解构赋值

[JavaScript]解构赋值详解

ES6浅谈--解构,字符串扩展

ES6-04:函数的扩展

ES6 函数拓展