zoukankan      html  css  js  c++  java
  • obj类型属性取值,属性嵌套取值,为空且不存在安全取值方法

    我们业务场景经常会有后台返回数据,然后从数据里面取属性值,es6有了默认值之后,可以直接数据取值,取不到或者没有直接返回的是默认值

    抽空时间封装了一个取值的方法:

       /**
        * {}类型属性取值,属性嵌套取值,为空且不存在安全取值方法
        * @param {obj} obj           [要从取值的对象]
        * @param {string} props      [要从对象中取的属性名]
        * @param {*} defaultValue    [属性的默认值]
        */
       safeData (obj, props, defaultValue) {
        if (!obj) { // 如果没有返回数据,直接展示默认值
            return defaultValue;
        }
        if (typeof (obj[props]) !== 'undefined') { // 数据单层,typeof (undefined) = 'undefined'
            if (obj[props] === null ) {
                return defaultValue;
            }
            return obj[props];
        }
        // 数据多层嵌套
        let propsArr = props.split('.'); // 多层分割成数组
        // 循环一层一层取
        for (let i = 0, l = propsArr.length; i < l; i++) {
            let k = propsArr[i]; 
            if (obj && typeof obj === 'object' && k in obj && (obj[k] !== null)) {
                obj = obj[k]; // obj重新赋值为新的一层
            } else {
                return defaultValue;
            }
        }
        return obj;
       }

    测试下如下数据结构:

    const data = {
      code: 'FTH001',
      constructorCation: {
        company: '锅巴工作室',
        name: {
          lastname: '锅巴',
          firstname: '杨'
        }
      }
    };

    分别嵌套取值:

                <div>
                    <h6>公司编码:{safeData(data, 'code', '')}</h6>
                    <h6>公司名称:{safeData(data, 'constructorCation.company', '')}</h6>
                    <h6>公司法人:{safeData(data, 'constructorCation.name.firstname', '')}{safeData(data, 'constructorCation.name.lastname', '')}</h6>
                </div>

    输出:

    以后就不用每次都判断是不是存在值了。直接调用取之传名称就行了。

  • 相关阅读:
    Flutter-路由
    写一个底部Tabs导航动态组件
    实例:Flutter布局01
    HTTP报文
    HTML文本的各种属性
    HTML必要简介和基础
    MySQL8.0.23安装超详细傻瓜式
    从一个HTTP请求来研究网络分层原理
    MySQL的增删改查
    MySQL常用数据类型有哪些?
  • 原文地址:https://www.cnblogs.com/yxfboke/p/10880580.html
Copyright © 2011-2022 走看看