四种常用安全访问嵌套属性的方法

363 阅读1分钟
let data = {
    test1: {
      test2: 'hello'
    }
  }
  //方法一(适用于简单嵌套)
  //缺点:不优雅,通用性差
  let target1 = data && data.test1 ? data.test1.test2 : null
  console.log(target1)

  //方法二:
  //优点:不会取到未定义的对象属性(因为没有的时候会创建一个空对象)
  //缺点:不能兼容嵌套数组
  let target2 = ((data || {}).test1 || {}).test2
  console.log(target2)


  //方法三 使用reduce辅助完成
  function getNestedObject(nestedObj, pathArr) {
    return pathArr.reduce(function (obj, key) {
      return (obj && obj[key] !== 'undefined') ? obj[key] : null
    }, nestedObj)
  }
  
  
  const area = [{
    value: '01',
    province: '四川',
    children: [{
      value: '01',
      city: '成都',
      children: [
        {
          value: '01',
          area: '高新区'
        }, {
          value: '02',
          area: '锦江区'
        }]
    }]
  }, {
    value: '02',
    province: '浙江',
    children: [{
      value: '01',
      city: '杭州',
      children: [
        {
          value: '01',
          area: '西湖区'
        }, {
          value: '02',
          area: '拱墅区'
        }]
    }]
  }]

  // 将对象结构作为数组元素传入
  let address = getNestedObject(area, [0, 'children', 0, 'children', 0])
  // console.log(area[0])
  // console.log(area[0].children)
  // console.log(area[0].children[0])
  // console.log(area[0].children[0].children)
  // console.log(area[0].children[0].children[0])
  console.log('address: ', address)

  //方法四 使用lodash或者其他插件库
  let object = {
    'a': [{
      'b': {
        'c': 3
      }
    }]
  }

  _.get(object, 'a[0].b.c')  // 3
  _.get(object, ['a', '0', 'b', 'c'])  // 3
  _.get(object, 'a.b.c', 'default')  // 'default'