数组对象的常见操作(草稿)

[heightzhang]

Welcome to Array Object

1.全部遍历完数组对象后 ，再进行判断执行相应操作

案例模拟

let list = [{
  id: 1,
  pic: 'a',
  adress: 'a1'
}, {
  id: 2,
  pic: 'b',
  adress: 'b1'
}, {
  id: 3,
  pic: 'c',
  adress: 'c1'
}]
let newArr = {id: 3, pic: 'a', address: 'c2'}
let newArr2 = {id: 4, pic: 'd',adress: 'd1'}

/*
 * 要求：遇到重复的id，覆盖原先的数组对象，遇到不重复的，添加入数组
 [{
  id: 1,
  pic: 'a',
  adress: 'a1'
}, {
  id: 2,
  pic: 'b',
  adress: 'b1'
}, {
  id: 3,
  pic: 'a', // 指定pic覆盖，
  adress: 'c1'
}，{
  id: 4,
  pic: 'd',
  adress: 'd1'
}]
*/

解决方法

// 原始方法
function test (arr) {
  let temp = true
  let tempI
  for (let i = 0; i < list.length; i++) {
    if (list[i].id === arr.id) {
      temp = true
      tempI = i
    }
  }
  if (temp) {
    list[tempI].pic = arr.pic
  } else {
    list[i].pic = arr.pic
  }
}
// ES6方法
function test3 (arr) {
  let idx = list.findIndex(n => n.id === arr.id)
  idx > -1 ? list[idx].pic = arr.pic : list.push(arr)
}

test4(newArr)
console.log(list)

2.数组对象去重

3.数组对象指定值的部分去重

案例模拟

// demo
var spread = [{
  "id": 16,
  "name": "丑柑",
  "picType": 0,
  "title": "丑柑"
}, {
  "id": 16,
  "name": "丑柑",
  "picType": 0,
  "title": "丑柑"
}, {
  "id": 11
}, {
  "id" : 11
}, {
  "id": 11,
  "name": "丑柑",
  "picType": 0,
  "title": "丑柑"
}]
// 要求： 输出格式如下
/*
 [{
  "id": 16,
  "name": "丑柑",
  "picType": 0,
  "title": "丑柑"
},{
  "id": 11
},{
  "id": 11,
  "name": "丑柑",
  "picType": 0,
  "title": "丑柑"
}]
*/

解决方法

// 原始方法
function removeRepeatArrObj (arr) {
  // 创建一个临时变量进行记忆
  var hash = {}
  arr = arr.reduce(function (total, item) {
    // 相同则添加一个空的，不同则push进 累加的数组  --指定name属性值
    hash[item.name] = hash[item.name] ? '' : true && total.push(item)
    return total
  }, [])
  return arr
}
// lodash方法
var result = _.uniqWith(spread, _.isEqual)
console.log('结果', result)

4.数组对象指定值的完全去重

案例模拟

// demo
var spread = [{
  "id": 16,
  "name": "丑柑",
  "picType": 0,
  "title": "丑柑"
}, {
  "id": 16,
  "name": "丑柑",
  "picType": 0,
  "title": "丑柑"
}, {
  "id": 11
}, {
  "id" : 11
}, {
  "id": 11,
  "name": "丑柑",
  "picType": 0,
  "title": "丑柑"
}]
// 要求：输入格式如下
/*
[{
  "id": 16,
  "name": "丑柑",
  "picType": 0,
  "title": "丑柑"
}, {
  "id": 11
}]
*/

解决方法：

// lodash方法
var result = _.unionBy(spread, 'id')
console.log('结果', result)

5.？数组对象的指定值去重(后面覆盖前面)

案例模拟

var spread = [{
  "id": 1,
  "name": "html"
}, {
  "id": 2,
  "name": "css"
}, {
  "id": 1,
  "name": "javaScript"
}, {
  "id" : 2,
  "name": "javaQuery"
}, {
  "id": 4,
  "name": "vue"
}]
/*
 * 要求 遇到重复的值，后面的覆盖前面的
[{
  "id": 1,
  "name": "javaScript"
  }, {
    "id": 2,
    "name": "javaQuery"
  },{
    "id": 4,
    "name": "vue"
}]
 */

解决方法

// -守候
function removeRepeatArrObj (arr, key, replaceKey) {
  let objItems = {}, _items = []
  arr.forEach(item => {
    if (!objItems[item[key]]) {
      objItems[item[key]] = item
    } else {
      objItems[item[key]][replaceKey] = item[replaceKey]
    }
  })
  for (let i in objItems) {
    _items.push(objItems[i])
  }
  return _items
}
var result = removeRepeatArrObj(spread, 'id', 'name')
console.log('结果', result)

// jiangzg
function removeRepeatArrObj (arr, key, replaceKey) {
  let temp_object = {}
  arr.forEach(n => temp_object[n.id] = n)
  temp_object = Object.keys(temp_object).map(n => temp_object[n])
  return temp_object
}
var result = removeRepeatArrObj(spread)
console.log('结果', result)

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

案例模拟

const arr = [{
  id: 1,
  sub: [{
    id: 2,
    sub: [{
      id: 3,
      sub: null
    }]
  }]
 },
 {
    id: 4,
    sub: null
 }]
/*
  * 要求：获取所有元素子孙内的id 输出[1,2,3,4]
*/
​```JS
解决方法
// jiangzg
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]

7.传递四个参数，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 result =  arr.find(n => n.value === params[0]).children.find(n => n.value === params[1]).children.find(n => n.value === params[2]).children.find(n => n.value === params[3]).label
  // console.log(result)
  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)) // '体育馆街道'

8.参数赋值

案例模拟：

let obj1 = {
  cat_id: NaN,
  name: null
}
let obj2 = {
  cat_id: 1,
  name: 'John',
  hobby: 'playfootball'
}
// 封装一个函数，传递obj1与obj2参数， return以下数据
/*
 * 思路： 保持第一个对象中的属性名不变，第二对象中出现相同的属性名，则将属性值覆盖到对应的属性值下。
 * 条件：判断第二个对象中的属性名是否跟第一个对象的属性名相同
 *      遍历第二个对象中的属性名，遍历第一个对象中的属性名。
 * 执行：如果相同则值覆盖，否则不进行任何操作。
let targetObj = {
  cat_id: 1,
  name: 'John'
}
*/
解决方法
​```JS
// 原始方法
function test (obj1, obj2) {
  for (var prop in obj2) {
    for (var prop2 in obj1) {
      if (prop2 === prop) {
        obj1[prop] = obj2[prop]
      }
    }
  }
  return obj1
}
// ES6方法
function test2 (obj1,obj2) {
  // 拿到共同元素属性名，通过属性名去判断
  Object.keys(obj1).forEach(key => {
    if (key in obj2) obj1[key] = obj2[key]
  })
  return obj1
}
console.log(test2(obj1,obj2))

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

案例模拟

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)
console.log(formatDaraArray)
//更具目标值查找地址
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))

[heightzhang]

10.输入一个数组对象，输出该数组对象在数组中的索引值