首页 > 编程语言 >JavaScript树型数据与一维数组相互转换方式

JavaScript树型数据与一维数组相互转换方式

时间:2023-10-25 16:44:36浏览次数:38  
标签:map JavaScript id item result 一维 树型 data children

 

/**
 * @description 一维数组转树形数据
 * */
export const arrToTree = (data = [], conf = {}) => (((data, { id = 'id', parentId = 'parentId', children = 'children' }) => {
  let result = []
  if (!Array.isArray(data)) {
    return result
  }
  data = commonMerge({}, { list: data }).list
  data.forEach(item => {
    delete item[children]
  })
  let map = {}
  data.forEach(item => {
    map[item[id]] = item // id为键,原数据每一项为值的map对象
  })
  data.forEach(item => {
    let parent = map[item[parentId]] // item的parentId若与map对象的键相同,则item为父级节点
    if (parent) {
      (parent[children] || (parent[children] = [])).push(item)
    } else {
      result.push(item)
    }
  })
  return result
})(data, conf));

 

    参考:https://www.jb51.net/javascript/2876872tm.htm

标签:map,JavaScript,id,item,result,一维,树型,data,children
From: https://www.cnblogs.com/hello-world-01/p/17787573.html

相关文章

  • JavaScript 中的深度克隆
    JavaScript中的深度克隆涉及创建一个新对象,该对象是现有对象的副本,并将复制延续到所有嵌套属性,以确保两个对象完全独立。这项技术对于保持程序中的不变性等任务至关重要,对于处理React等框架中的状态尤其重要。它有助于防止意外的对象突变可能引起的错误,从而产生更易于维护且无......
  • JavaScript知识点
    有哪些数据类型根据JavaScript中的变量类型传递方式,分为基本数据类型和引用数据类型两大类七种。基本数据类型包括Undefined、Null、Boolean、Number、String、Symbol(ES6新增)六种。引用数据类型只有Object—种,主要包括对象、数组和函数。基本数据类型和引用数据类型的区别两者......
  • 【Java 进阶篇】JavaScript 自动跳转首页案例
    在这篇博客中,我们将创建一个JavaScript案例,演示如何自动跳转到网站的首页。这种自动跳转通常用于欢迎页面或广告页面等场景。我们将从头开始创建这个案例,逐步介绍相关的JavaScript知识,让初学者也能理解并实现这个功能。1.什么是自动跳转?自动跳转是指当用户访问一个网页时,页面会自......
  • 【Java 进阶篇】创建 JavaScript 轮播图:让网页焕发生机
    欢迎大家来到本篇博客,今天我们将一起探讨如何使用JavaScript创建一个精美的轮播图。轮播图是现代网站设计的关键元素之一,它能够使网页更加吸引人,提高用户体验。无需担心,本文将面向基础小白,从头开始解释每一步。我们将详细介绍如何构建一个轮播图,涵盖以下内容:什么是轮播图?创建HTML......
  • 【Java 进阶篇】JavaScript BOM(浏览器对象模型)详解
    BOM,即浏览器对象模型(BrowserObjectModel),是JavaScript与浏览器之间的接口,它允许JavaScript与浏览器进行交互,实现访问和控制浏览器窗口、文档和其他浏览器功能的功能。本文将详细介绍BOM的各个方面,包括窗口对象、定时器、历史记录、位置信息等,并提供示例代码来帮助您更好地理解和运......
  • 【Java 进阶篇】JavaScript电灯开关案例:从原理到实现
    JavaScript是一门强大的编程语言,它可以用来创建各种交互式网页应用。在这篇博客中,我们将通过一个简单的电灯开关案例来深入了解JavaScript的基础概念,包括HTML、CSS和JavaScript的结合使用。我们将从头开始构建这个案例,逐步引入相关概念,以帮助初学者更好地理解JavaScript的工作原理......
  • 【Java 进阶篇】JavaScript 事件详解
    在本篇博客中,我们将深入探讨JavaScript事件,这是网页交互的核心。我们将从什么是事件开始,然后逐步介绍事件的类型、如何注册事件、事件处理程序、事件对象以及事件冒泡等相关内容。最终,我们将提供大量的示例代码来帮助您更好地理解JavaScript事件。什么是事件?在Web开发中,事件是用户......
  • [VM] The JavaScript Virtual Machine
    TableofContentIntroudctiontoVMsCPU-UnderstandingthePysicalMachineVMs-Arrays,Objects,functions,prototypechainsDepotExplorer:collectingdatafromtheVMDeopt:CallingCoventions&InliningMegamohpism&InlineCache:Objectpro......
  • JavaScript在发送AJAX请求时,URL的域名地址是使用绝对地址还是相对地址?
    在使用JavaScript发送AJAX请求时,URL的域名地址通常是使用相对地址。相对地址指的是相对于当前页面的URL来确定请求的目标地址。当请求发送到服务器时,浏览器会自动将相对地址转换为完整的绝对URL。这样做的好处是能够更灵活地处理不同环境下的URL路径,同时减少了在JavaScript代码中......
  • JavaScript 将对象转换为数组
    JavaScript将对象转换为数组在JavaScript中,你可以使用不同的方法将对象转换为数组,具体取决于对象的结构和你希望在数组中得到什么样的数据。以下是一些常见的方法:Object.keys()方法:这种方法将对象的键转换为数组。constobj={a:1,b:2,c:3};constarr=Object......