js 循环数组取值

简介: js 循环数组取值

需要循环的数据
image.png

js将数组转换成树形结构
实验代码:

toTree(data) {
   
      let result = []
      if (!Array.isArray(data)) {
   
        return result
      }
      data.forEach(item => {
   
        delete item.children;
      });
      let map = {
   };
      data.forEach(item => {
   
        map[item.itemId] = item;
      });
      for (item in map) {
   
        // let parent = map[item.pid];
        // if (map[item.pid] && item.id !== item.pid) {
   
        //   if (!item.children) {
   
        //     item.children = []
        //   }
        //   if (!item.pid._level) {
   
        //     item.pid._level = 1
        //   }
        //   item._level = temp[item.pid]._level + 1
        //   item.pid.children.push(item)
        // } else {
   
        //   res.push(item)
        // }

        console.log(item);
        // if (parent) {
   
        //   (parent.children || (parent.children = [])).push(item);
        // } else {
   
        //   result.push(item);
        // }
      }
      return result;
    },

已验证代码:

/**
 * 树形数据转换
 * @param {*} data
 * @param {*} id
 * @param {*} pid
 */
export function treeDataTranslate(data, id = 'itemId', pid = 'parentId') {
   
  var res = []
  var temp = {
   }
  for (var i = 0; i < data.length; i++) {
   
    temp[data[i][id]] = data[i]
  }
  for (var k = 0; k < data.length; k++) {
   
    if (temp[data[k].pid] && data[k][id] !== data[k].pid) {
   
      if (!temp[data[k].pid]['children']) {
   
        temp[data[k].pid]['children'] = []
      }
      if (!temp[data[k].pid]['_level']) {
   
        temp[data[k].pid]['_level'] = 1
      }
      data[k]['_level'] = temp[data[k].pid]._level + 1
      temp[data[k].pid]['children'].push(data[k])
    } else {
   
      res.push(data[k])
    }
  }
  return res
}

/**
 * 按指定字段分类,树形数据转换
 * @param {*} data
 * @param {*} id
 * @param {*} pid
 */
export function treeDataTranslateByType(oldData, id = 'funID', pid = 'pid', key = 'funID', Type = 'projectId', hasChildren = true) {
   
  var res = []
  var temp = {
   }
  var data = []
  oldData.map(function(item) {
   
    data.push(item)
  })
  for (var i = 0; i < data.length; i++) {
   
    var type = data[i][Type] ? data[i][Type] : ''
    temp[type + '' + data[i][key] + '' + data[i][id]] = data[i]
  }
  for (var k = 0; k < data.length; k++) {
   
    var tempKey = ''
    oldData.map(function(item) {
   
      if (item[id] === data[k][pid] && item[Type] === data[k][Type] && item[key] < data[k][key]) {
   
        var type = item[Type] ? item[Type] : ''
        tempKey = type + '' + item[key] + '' + item[id]
      }
    })
    if (temp[tempKey] && data[k][id] !== data[k][pid]) {
   
      if (!temp[tempKey]['children']) {
   
        temp[tempKey]['children'] = []
      }
      if (!temp[tempKey]['_level']) {
   
        temp[tempKey]['_level'] = 1
      }
      if (hasChildren) {
   
        data[k]['_level'] = temp[tempKey]._level + 1
        temp[tempKey]['children'].push(data[k])
      } else {
   
        data[k]['children']
      }
    } else {
   
      res.push(data[k])
    }
  }
  return res
}
相关文章
|
4月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
4月前
|
消息中间件 JavaScript 前端开发
最细最有条理解析:事件循环(消息循环)是什么?为什么JS需要异步
度一教育的袁进老师谈到他的理解:单线程是异步产生的原因,事件循环是异步的实现方式。 本质是因为渲染进程因为计算机图形学的限制,只能是单线程。所以需要“异步”这个技术思想来解决页面阻塞的问题,而“事件循环”是实现“异步”这个技术思想的最主要的技术手段。 但事件循环并不是全部的技术手段,比如Promise,虽然受事件循环管理,但是如果没有事件循环,单一Promise依然能实现异步不是吗? 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您
|
4月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
8月前
|
JavaScript
js动画循环播放特效源码(上班族的一天)
js动画循环播放特效是一段实现了包含形象的卡通小人吃、睡、电脑工作的网页动画,js循环动画,简单的画面设计。非常丝滑有意思,欢迎对此代码感兴趣的朋友前来下载参考。
71 2
|
9月前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
97 2
|
9月前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
117 3
|
9月前
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
108 4
|
9月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
127 1
|
9月前
|
JavaScript 前端开发 API
JS中数组的方法flat()怎么用
JS中数组的方法flat()怎么用
106 0
|
9月前
|
JavaScript 前端开发 索引
JavaScript中数组、对象等循环遍历的常用方法介绍(一)
JavaScript中数组、对象等循环遍历的常用方法介绍(一)
139 0

热门文章

最新文章