我们业务场景经常会有后台返回数据,然后从数据里面取属性值,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>
输出:
以后就不用每次都判断是不是存在值了。直接调用取之传名称就行了。