深层级数据的判断和获取
当后端返给前端的数据层级很深,前端去获取的时候,往往会因为数据缺失而导致页面崩溃。
这里我封装了两个函数,一个是判断深层级数据是否存在,另一个是获取深层级的数据。
// methods.js function actionGetExistedOfValue(value) { return [null, undefined].indexOf(value) === -1; } function emptyObject() {} /** * 判断对象最深层级是否为空 * @example actionGetExistedOfObjectTree(information, 'customer.customer_id'); * @param targetObject * @param targetObjectString */ function actionGetExistedOfObjectTree(targetObject, targetObjectString) { if (!targetObject || typeof targetObject !== 'object' || targetObject instanceof emptyObject) { return false; } const targetLevelArray = targetObjectString.split('.'); if (!actionGetExistedOfValue(targetObject[targetLevelArray[0]])) { return false; } const parentLevelString = targetLevelArray.shift(); if (!parentLevelString) { return false; } if (targetLevelArray.length) { const targetObjectStrings = targetLevelArray.join('.'); return actionGetExistedOfObjectTree(targetObject[parentLevelString], targetObjectStrings); } return true; } /** * 当判断深层级存在的时候使用 * 取出该深层级的值 */ function getValueObject(targetObject, targetObjectString){ const targetLevelArray = targetObjectString.split('.'); const val=targetObject[targetLevelArray[0]]; targetLevelArray.shift(); if (targetLevelArray.length&&val) { const targetObjectStrings = targetLevelArray.join('.'); return getValueObject(val, targetObjectStrings); } return val; } export { actionGetExistedOfObjectTree, getValueObject };
使用:
import {actionGetExistedOfObjectTree,getValueObject} from './methods'; const data={ person:{ name:{ fistName:"zzz" } } } // 判断fistName是否存在,true存在,false不存在 actionGetExistedOfObjectTree(data,`person.name.fistName`); // 获取fistName的值 fistName=getValueObject(data,`person.name.fistName`)