数组对象查找的常见操作

1.获得数组对象中子孙的值

const arr = [{
  id: 1,
  sub: [{
    id: 2,
    sub: [{
      id: 3,
      sub: null
    }]
  }]
 },
 {
    id: 4,
    sub: null
 }]
/*
  * 要求：获取所有元素子孙内的id 输出[1,2,3,4]
*/

解决方法

function getIds (arr) {
  var result = []
  arr.forEach((item) => {
    // 最外层
    result.push(item.id)
    // 内层递归
    result = item.sub ? result.concat(getIds(item.sub)) : result
  })
  return result
}
var abc = getIds(arr)
console.log('结果', abc) // [1, 2, 3, 4]

2. 传递四个参数，find的层层筛选

案例模拟

const list = [{
  label: '北京市',
  value: 1,
  children:[{
    label: '全部',
    value: 0
  }, {
    label: '北京市',
    value: 10,
    children: [{
      label: '东城区',
      value: 100,
      children: [{
        label: '东华门街道',
        value: 1000
      }]
    }]
  }],
  label: '天津市',
  value: 2,
  children: [{
    label: '全部',
    value: 0,
  }, {
    label: '天津市',
    value: 20,
    children: [{
      label: '和平区',
      value: 200,
      children: [{
        label: '体育馆街道',
        value: 2000
      }]
    }]
  }]
}]
// 要求： 封装一个函数， 输入[2,20, 200, 2000]，  找到体育馆街道

解决方法

const params = [2,20, 200, 2000]
function findLast (arr, params) {
  let temp
  params.forEach((item, idx) => {
    if (idx === params.length - 1) {
      temp =  arr.find(n => n.value === item).label
    } else {
      arr = arr.find(n => n.value === item).children
    }
  })
  return temp
}
console.log(findLast(list, params)) // '体育馆街道'

3.传入单个参数，搜索最底层的数据

案例模拟

var json = [{
  label: '北京市',
  value: 1,
  children: [{
    label: '海淀区',
    value: 10,
    children: [{
      label: '街道100',
      value: 100
    }, {
      label: '街道1000',
      value: 1000
    }, {
      label: '街道10000',
      value: 10000
    }]
  }]
}, {
  label: '2北京市',
  value: 2,
  children: [{
    label: '2海淀区',
    value: 20,
    children: [{
      label: '2街道',
      value: 200
    }]
  }]
}]
// 要求： 封装一个函数，传入10000，输出 街道10000

解决方法

// jiangzg
let cache_data = {
  array: [],
  currentid: 0
}
//扁平化数组
function formatData(arr, pid) {
  let result = []
  arr.forEach((item) => {
    result.push({
      label: item.label,
      value: item.value,
      pid: pid
    })
    if (({}).toString.call(item.children) === '[object Array]') {
      //地柜处理 children 链接返回的结果
      result = result.concat(formatData(item.children, item.value))
    }
  })
  return result
}
// -------------------- 格式化数据后的查找操作 -------------------------------
let formatDaraArray = formatData(json, 0)
//更具目标值查找地址
function getResult(formatDaraArray, targetValue) {
  //把数组处理成目标值
  //如 [1,2,3] 目标值是3
  if (({}).toString.call(targetValue) === '[object Array]') {
    targetValue = targetValue[targetValue.length - 1]
  }
  let result = []
  //由于数据已经扁平化啦，这里就可以一次循环查找
  formatDaraArray.forEach((item) => {
    if (item.value == targetValue) {
      //由于是反向查找的，所以unshift讲找到的数据添加在结果的头部
      result.unshift(item)
      if (item.pid) {
        //同理 由于是反向查找的，所以unshift讲找到的数据添加在结果的头部
        result.unshift(...getResult(formatDaraArray, item.pid))
      }
    }
  })
  return result
}
let put = 10000
console.log(getResult(formatDaraArray, put))