【JavaScript 数据处理-番外篇】手写了几个数据处理,都是用的递归

简介: 【JavaScript 数据处理-番外篇】手写了几个数据处理,都是用的递归



一些原理我也不讲了,我就是记录一下

对象修改结构

给出一个深层次嵌套对象, 要求编译成如下格式

let obj_one = {
    name: '张三',
    age: '18',
    address: '山东',
    info: {
      phone: '110',
      sex: '男'
    }
}
// 将此对象,改为 { value: { key: value } }, 结构不变
// let obj_one = {
//   '张三': { name: '张三' },
//   '18': { age: '18' }
//   '山东': { address: '山东' },
//   info: {
//     '110': { phone: '110' },
//     '男': { sex: '男' }
//   }
// }

解答

const changeObjDataFuc = obj => {
  // 定义存储对象
  let saveObj = {}
  // 判断对象内每一项是否为对象,若为对象,递归
  for (const key in obj) {
    if (Object.hasOwnProperty.call(obj, key)) {
      const item = obj[key]
      if (typeof item === 'object' && item !== null) {
        itemValue = changeObjDataFuc(item) // itemValue深层次对象
        saveObj[key] = itemValue;
      } else {
        saveObj = Object.assign(saveObj, reverseObject(key, item)); // 第一次: saveObj: { 张三: { name: "张三" }, ... }
      }
    }
  }
  return saveObj
}
const reverseObject = (key, value) => {
  return {
    [value]: { [key]: value } 
  }
}
console.log(changeObjDataFuc(obj_one))

判断两对象是否全等(只针对对象未做其他类型)

之前写过一次, 别跟我说用 JSON.stringify

let obj_one = {
  name: '张三',
  age: '18',
  address: '山东',
  info: {
    phone: '110',
    sex: '男'
  }
}
let obj_two = {
  name: '张三',
  age: '18',
  address: '山东',
  info: {
    phone: '110',
    sex: '男'
  }
}
// 判断两个对象键值是否全部相同,若是则返回true,否则返回false

解答

const objectFind = (obj_one, obj_two) => {
  if (Object.keys(obj_one).length !== Object.keys(obj_two).length) {
    // 判断键长度
    return false
  }
  for (const key in obj_one) {
    if (Object.hasOwnProperty.call(obj_one, key)) {
      const element = obj_one[key]
      if (typeof obj_one[key] === 'object' && typeof obj_two[key] === 'object') {
        // 判断每一项与obj_two对应的每一项
        // 递归判断若不等于
        if (!objectFind(obj_one[key], obj_two[key])) return false
      } else if (obj_one[key] !== obj_two[key]) {
        // 判断属性值
        return false
      }
    }
  }
  // 都相等返回true
  return true
}
const findData = objectFind(obj_one, obj_two);
console.log(findData);

复杂结构去重

给出一个复杂结构,要求去重,并且返回数据之后格式不变

let data = [
  {
    name: '小芳',
    age: 1,
    info: [
      {
        address: '北京',
        class: '三年级二班'
      },
      {
        address: '北京',
        class: '三年级二班'
      }
    ],
    obj: {
      objInfo1: [
        {
          objinfo1: 1
        },
        {
          objinfo1: 1
        }
      ],
      objInfo2: 2
    }
  },
  {
    name: '小明',
    age: 1,
    info: [
      {
        address: '北京',
        class: '三年级二班'
      }
    ]
  },
  {
    name: '小方',
    age: 1,
    obj: {
      arr: [
        {
          name: '123',
          age: 1
        },
        {
          name: '123',
          age: 1
        }
      ]
    }
  },
  {
    name: '小芳',
    age: 1,
    info: [
      {
        address: '北京',
        class: '三年级二班'
      }
    ]
  },
  {
    name: '小芳',
    age: 1
  },
  {
    name: '小芳',
    age: 1
  }
]
// 要求data数组去重,并且为深层次递归判断,不能更改数据结构,返回一个没有重复数据的新对象
// 较难

我写的破代码(没用,逻辑,结构都不对)

这是我写的, 逻辑有问题, 结构还不对, 如果有大佬会这个题, 希望可以贴在评论区, 嘤嘤嘤

let keys_data = {} // 定义数据第一次出现列表
// --------------------------------------------------------------------------------------
// 判断对象下data中是否有重复的元素, 此方法为递归
const getData = arr => {
  let newArr = []; // 新建一个数组
  for (let i = 0; i < arr.length; i++) {
    let newObj = getRepeatData(arr[i]);
    // 将处理后的对象添加到新数组
    newArr.push(newObj);
    // 循环里面的子项
    for (const key in arr[i]) {
      if (Array.isArray(arr[i][key])) {
        getData(arr[i][key])
      } else if (typeof arr[i][key] === 'object') {
        getRepeatData(arr[i][key])
      }
    }
  }
  return newArr
}
// 对象重复判断方法
// 思路: 每一项先存储,然后用存储的判断为存储的item, key以及value是否全等, 如果全等, 那么就gg
const getRepeatData = obj => {
  for (const key in obj) {
    if (Object.hasOwnProperty.call(obj, key)) {
      const item = obj[key]
      if (Array.isArray(item)) {
        getData(item)
      }
      if (keys_data[item] === undefined) {
        keys_data[key] = item
      }
    }
  }
  obj = keys_data
  newData = obj
  return obj
}
console.log(getData(obj.data))
相关文章
|
JavaScript 数据处理
|
JSON JavaScript 前端开发
js树形菜单 如何用递归制作一个简单的树形菜单
js树形菜单 如何用递归制作一个简单的树形菜单
193 0
|
存储 JavaScript 前端开发
JavaScript中的递归函数
JavaScript中的递归函数
102 0
|
3月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
153 19
|
6月前
|
JavaScript 算法 前端开发
JS数组操作方法全景图,全网最全构建完整知识网络!js数组操作方法全集(实现筛选转换、随机排序洗牌算法、复杂数据处理统计等情景详解,附大量源码和易错点解析)
这些方法提供了对数组的全面操作,包括搜索、遍历、转换和聚合等。通过分为原地操作方法、非原地操作方法和其他方法便于您理解和记忆,并熟悉他们各自的使用方法与使用范围。详细的案例与进阶使用,方便您理解数组操作的底层原理。链式调用的几个案例,让您玩转数组操作。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
5月前
|
JavaScript 前端开发 测试技术
|
11月前
|
前端开发 JavaScript
JavaScript递归菜单栏
JavaScript递归菜单栏
JavaScript递归菜单栏
|
JSON JavaScript 前端开发
JavaScript第五天(函数,this,严格模式,高阶函数,闭包,递归,正则,ES6)高级
JavaScript第五天(函数,this,严格模式,高阶函数,闭包,递归,正则,ES6)高级
|
缓存 JavaScript 前端开发
|
数据采集 资源调度 JavaScript
Node.js 适合做高并发、I/O密集型项目、轻量级实时应用、前端构建工具、命令行工具以及网络爬虫和数据处理等项目
【8月更文挑战第4天】Node.js 适合做高并发、I/O密集型项目、轻量级实时应用、前端构建工具、命令行工具以及网络爬虫和数据处理等项目
220 5