JustForSmiling
  • 3
  • 新人请关照

如何优雅的判断一个对象及该对象中的某个属性是否存在(JS)

像这样, 需要拿到传入参数的padding值, 但是不确定是否传入了eleStyle, 更不确定eleStyle中的其他属性是否传入, 目前使用三元表达式进行判断, 但依然有些繁琐...

data: {
    show: true,
    //可能传入的参数
    eleStyle: {
        //以下某一参数均有可能不传
        width: 100,
        height: 100,
        padding: 20,
    }
}
let padding = eleStyle && eleStyle.padding ? eleStyle.padding : 10
//当eleStyle.padding为0时, 所得到的padding值仍为默认, 所以可能应该是下面这种:
let padding = eleStyle && eleStyle.padding !== undefined ? eleStyle.padding : 10

如果需要的参数取自更深层的对象, 那这样写也显得十分臃肿, 所以请教一下有没有什么好的方法解决这种问题...

阅读 686
评论 2019-10-10 提问
    5 个回答
    let padding = 'eleStyle.padding'.split('.').reduce((res,key)=>{return res != null ? res[key] : null},data)
    padding = padding != null ? padding : 10;
    评论 赞赏 2019-10-10

      30-seconds-of-code里有算是很优雅的写法,可以参考一下。其他做法的内部实现可能不一样,但理念很类似。

      const get = (from, ...selectors) =>
        [...selectors].map(s =>
          s
            .replace(/\[([^\[\]]*)\]/g, '.$1.')
            .split('.')
            .filter(t => t !== '')
            .reduce((prev, cur) => prev && prev[cur], from)
        );
      评论 赞赏 2019-10-10
        Yooloo
        • 788

        JS确实没啥好办法
        TS3.7中提供了一种用于处理你这种需求的方案

        interface EleStyle{
            width?:Number,
            height?:Number,
            padding?:Number
        }
        interface Data {
            show:Boolean,
            eleStyle?:EleStyle
        }
        
        let data:Data = {
            show:true,
            eleStyle:{
                width: 100,
                height: 100
            }
        }
        
        console.log(data.eleStyle?.padding);
        评论 赞赏 2019-10-10
          JustForSmiling
          • 3
          • 新人请关照

          看了一下文档, 不是很清楚reduce在这里是怎么工作的...

          评论 赞赏 2019-10-11

            lodash _.get

            _.get(eleStyle, 'padding', 10)
            评论 赞赏 2019-10-11
              撰写回答

              登录后参与交流、获取后续更新提醒