obj类型属性取值，属性嵌套取值，为空且不存在安全取值方法

Posted 2021-11-30 yxfboke

我们业务场景经常会有后台返回数据，然后从数据里面取属性值，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>

输出：

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