JavaScript 层级数组常用工具方法（一）—— 数组结构转换

已于 2023-04-18 12:44:13 修改
阅读量948 收藏 6
点赞数 1
分类专栏： JS 技术 文章标签： javascript 前端 web es6
于 2023-04-15 22:47:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ShunxinLive/article/details/130136531
版权

概述

本文介绍了 JavaScript 中层级数组的常用工具方法之一，即数组结构转换。在处理层级数组时，经常需要将数组从一种结构转换为另一种结构，以满足不同的需求。本文将探讨如何使用 JavaScript 中的一些常用方法来实现数组结构转换，包括数组的扁平化、数组的嵌套结构转换。通过学习这些常用的数组结构转换技巧，可以更加高效地处理层级数组数据，提升 JavaScript 编程的效率与灵活性。

文章目录

普通数组转层级数组

普通数组转层级数组是一种将扁平化的数组数据转换为层级结构的操作。层级数组通常用于表示树状数据结构，其中每个对象都包含了节点的信息以及其父节点的信息。

// 测试数据
const flatArray = [
  { id: 1, name: "Node 1", parentId: null },
  { id: 2, name: "Node 2", parentId: 1 },
  { id: 3, name: "Node 3", parentId: 1 },
  { id: 4, name: "Node 4", parentId: 2 },
  { id: 5, name: "Node 5", parentId: 2 },
  { id: 6, name: "Node 6", parentId: 3 },
  { id: 7, name: "Node 7", parentId: 3 },
];

1.Map 数据结构

利用 Map 数据结构来存储每个节点，并根据父级 ID 进行索引，然后遍历普通数组，根据每个节点的父级 ID 在 Map 中找到对应的父节点，并将当前节点添加到父节点的 children 数组中，从而实现普通数组到层级数组的转换。

/**
 * Map 数据结构
 * @param arr 普通数据
 */
function convertToHierarchyWithMap(arr) {
  const result = [];
  const map = new Map();

  for (const item of arr) {
    map.set(item.id, { ...item, children: [] });
  }

  for (const item of arr) {
    if (item.parentId !== null && map.has(item.parentId)) {
      map.get(item.parentId).children.push(map.get(item.id));
    } else {
      result.push(map.get(item.id));
    }
  }
  return result;
}

// 使用示例
const hierarchyData = convertToHierarchyWithMap(flatArray);
console.log(hierarchyData);

2.Set 数据结构

利用 Set 数据结构来存储每个节点的 ID，然后遍历普通数组，根据每个节点的父级 ID 在 Set 中查找对应的父节点，将当前节点添加到父节点的 children 数组中，从而实现普通数组到层级数组的转换。

/**
 * Set 数据结构
 * @param arr 普通数据
 */
function convertToHierarchyWithSet(arr) {
  const result = [];
  const idSet = new Set();

  for (const item of arr) {
    idSet.add(item.id);
  }

  for (const item of arr) {
    if (item.parentId !== null && idSet.has(item.parentId)) {
      const parent = arr.find(node => node.id === item.parentId);
      if (!parent.children) {
        parent.children = [];
      }
      parent.children.push(item);
    } else {
      result.push(item);
    }
  }

  return result;
}

// 使用示例
const hierarchyData = convertToHierarchyWithSet(flatArray);
console.log(hierarchyData);

3.递归方式

使用递归算法遍历普通数组，根据每个节点的父级 ID 将其添加到对应的父节点下的 children 数组中，从而实现普通数组到层级数组的转换。递归方式较为简洁，但在处理大型普通数组时可能存在性能上的限制。

/**
 * 递归方式
 * @param arr 普通数据
 * @param parentId 父级节点ID
 */
function convertToHierarchyRecursively(arr, parentId = null) {
  const result = [];
  for (const item of arr) {
    if (item.parentId === parentId) {
      const newItem = { ...item, children: convertToHierarchyRecursively(arr, item.id) };
      result.push(newItem);
    }
  }
  return result;
}

// 使用示例
const hierarchyData = convertToHierarchyRecursively(flatArray);
console.log(hierarchyData);

4.迭代方式

使用循环和对象字典等数据结构，遍历普通数组，将每个节点根据其父级 ID 添加到对应的父节点下的 children 数组中，从而实现普通数组到层级数组的转换。迭代方式相对于递归方式，可能在性能上具有一定的优势，尤其是在处理大型普通数组时。

/**
 * 迭代方式
 * @param arr 普通数据
 */
function convertToHierarchyIteratively(arr) {
  const result = [];
  const dict = {};

  for (const item of arr) {
    dict[item.id] = { ...item, children: [] };
  }

  for (const item of arr) {
    if (item.parentId !== null && dict[item.parentId]) {
      dict[item.parentId].children.push(dict[item.id]);
    } else {
      result.push(dict[item.id]);
    }
  }

  return result;
}

// 使用示例
const hierarchyData = convertToHierarchyIteratively(flatArray);
console.log(hierarchyData);

5.reduce 函数方式

利用 reduce 函数将普通数组转换为层级数组。reduce 函数可以用来迭代数组并在每一步中更新累积值，从而实现对普通数组到层级数组的转换。

/**
 * reduce 函数方式
 * @param arr 普通数据
 */
function convertToHierarchyWithReduce(arr) {
  return arr.reduce((result, item) => {
    const newItem = { ...item, children: [] };
    const parent = result.find(parentItem => parentItem.id === item.parentId);
    if (parent) {
      parent.children.push(newItem);
    } else {
      result.push(newItem);
    }
    return result;
  }, []);
}

// 使用示例
const hierarchyData = convertToHierarchyWithReduce(flatArray);
console.log(hierarchyData);

6.Generator 方式

这种方式利用 Generator 函数的特性，能够在遍历扁平化数组时递归地生成层级数组中的节点对象，并且具有较好的可读性和扩展性。

/**
 * Generator 方式
 * @param arr 普通数据
 */
function* convertToHierarchy(flatArray, parentId = null) {
  for (const node of flatArray) {
    if (node.parentId === parentId) {
      yield {
        ...node,
        children: [...convertToHierarchy(flatArray, node.id)]
      };
    }
  }
}
// 使用示例
const hierarchyArray = [...convertToHierarchy(flatArray)];
console.log(hierarchyArray);

推荐总结

推荐的方式取决于你的具体需求和代码环境。以下是一些常见的情况和对应的推荐方式：

  1. 若数据量较小且对性能要求不高，可以使用简单的循环遍历方式或者 reduce 函数来实现层级数组的转换，代码简洁易懂。
  2. 若数据量较大或者对性能有较高要求，可以使用迭代或者 Set 数据结构来实现，这些方法在处理大数据量时可能会有更好的性能表现。
  3. 若需要更加灵活和复杂的数据处理，可以使用递归方式来实现，递归可以处理较为复杂的层级关系，但可能在性能上略有损耗。
  4. 使用 Generator 方式可以在处理大数据量时节省内存，但需要注意兼容性和语法的限制，适合特定场景下使用。

综上所述，推荐的方式取决于具体需求和代码环境，应根据实际情况选择最合适的方法。在实际使用中，可以综合考虑性能、代码复杂性、兼容性等因素，选择最适合自己项目的方式进行普通数组到层级数组的转换。

层级数组转普通数组

层级数组是一种包含多层嵌套关系的数组数据结构，其中每个元素都可以包含子元素（子数组），形成树状结构。而将层级数组转换为普通数组则是将这种树状结构展平成一维数组的过程。

// 测试数据
const data = [
  {
    id: 1,
    name: "Node 1",
    children: [
      { id: 2, name: "Node 1-1", children: [
          { id: 4, name: "Node 1-1-1", children: [] },
          { id: 5, name: "Node 1-1-2", children: [] }
      ] },
      { id: 3, name: "Node 1-2", children: [] }
    ]
  }
];

1.递归扁平化

递归是一种通过函数自身调用的方式来处理数组或其他数据结构的方法，从而实现对多层嵌套结构的遍历和展开。在递归中，函数通过不断调用自身，从而逐层深入层级数组的嵌套结构，直到达到最底层的元素，并将其逐级展开到一维数组中。递归的方式通常较为简洁，但在处理大型层级数组时可能会面临性能和栈溢出的风险。因此，在使用递归方式进行扁平化时需要小心处理递归的终止条件和递归深度，以确保程序的正确性和性能。

/**
 * 递归扁平化
 * @param arr 层级数据
 */
function flattenHierarchy(arr) {
  let result = [];
  arr.forEach(node => {
    result.push(node);
    if (Array.isArray(node.children)) {
      result.push(...flattenArray(node.children));
    }
  });
  return result;
}

// 使用示例
const flattenedData = flattenHierarchy(data);
console.log(flattenedData);

2. 迭代扁平化

迭代是一种通过循环和遍历的方式逐级处理数组或其他数据结构的方法，而不是使用递归的方式。在这种方法中，我们通常使用循环或者栈来遍历层级数组的每个元素，并将其展开到一维数组中。这种方式通常比递归更加直接和效率较高，因为避免了递归调用的开销和潜在的栈溢出风险。

/**
 * 迭代扁平化
 * @param arr 层级数据
 */
function flattenHierarchy(arr) {
  const result = [];
  const stack = [...arr];
  while (stack.length > 0) {
    const item = stack.pop();
    result.push(item);
    if (item.children && item.children.length > 0) {
      stack.push(...item.children);
    }
  }
  return result;
}

// 使用示例
const flattenedData = flattenHierarchy(data);
console.log(flattenedData);

3.reduce扁平化

reduce 是 JavaScript 数组的高阶函数之一，它可以用来对数组中的元素进行累积计算，并返回一个最终结果。通过传入一个累积器函数作为 reduce 函数的参数，可以在累积计算的过程中对数组的每个元素进行处理，从而实现对层级数组的展开。在 reduce 函数的累积器函数中，可以通过合并数组或者嵌套调用 reduce 函数来逐层展开层级数组的嵌套结构，从而将其扁平化为一维数组。使用 reduce 函数的方式通常较为灵活，可以方便地进行自定义处理，并且在处理大型层级数组时性能通常较好。然而，使用 reduce 函数进行扁平化时，同样需要小心处理累积器函数的逻辑，以确保程序的正确性和性能。

/**
 * reduce扁平化
 * @param arr 层级数据
 */
function flattenHierarchy(arr) {
  return arr.reduce((result, item) => {
    const children = item.children ? flattenHierarchy(item.children) : [];
    return result.concat([{ ...item, children }]);
  }, []);
}

// 使用示例
const flattenedData = flattenHierarchy(data);
console.log(flattenedData);

4.Generator扁平化

Generator 是 JavaScript 中的一种特殊类型的函数，它可以通过使用 yield 关键字来实现生成器对象，从而支持在函数执行过程中暂停和继续执行的特性。通过编写一个 Generator 函数，可以在遍历层级数组的过程中使用 yield 来生成新的值，并在需要时暂停执行，从而实现对层级数组的展开。通过递归或者迭代调用 Generator 函数，可以在每次执行时生成扁平化的数组元素，并在下一次执行时继续从暂停的位置继续执行，直到整个层级数组被展开为一维数组。Generator 函数提供了一种比较灵活的方式来处理层级数组的扁平化，并且相较于递归或者迭代方式，可以更加直观地控制生成器函数的执行流程和状态，从而实现对层级数组的自定义处理。需要注意的是，Generator 函数在使用时需要注意其迭代器的状态和执行流程，确保程序的正确性和性能。

/**
 * Generator扁平化
 * @param arr 层级数据
 */
function* flattenHierarchy(arr) {
  for (const item of arr) {
    yield item;
    if (item.children && item.children.length > 0) {
      yield* flattenHierarchy(item.children);
    }
  }
}

// 使用示例
const flattenedData = [...flattenHierarchy(data)];
console.log(flattenedData);

推荐总结

推荐的方法取决于你的具体需求和项目情况。不同的方法有各自的优缺点，可以根据以下因素来选择合适的方法：

  1. 性能要求：如果性能是关键考虑因素，可能需要比较不同方法的性能，并选择效率较高的方法。一些方法可能在处理大型层级数组时性能更好，例如使用迭代、循环等方式。
  2. 兼容性：如果你的项目需要考虑旧版 JavaScript 环境或特定浏览器的兼容性，需要选择那些在目标环境下支持较好的方法。一些新的语法或特性可能在较老的 JavaScript 环境中不被完全支持，需要使用 Polyfill 或转译工具进行兼容处理。
  3. 代码简洁性：一些方法可能更加简洁和易读，能够提高代码的可维护性和可读性。例如，使用递归方式可能更加简洁，但需要注意可能存在堆栈溢出的风险。
  4. 项目需求：不同的项目可能有不同的需求，例如对代码大小的要求、对性能的要求、对兼容性的要求等。根据项目的实际需求来选择合适的方法。

综上所述，推荐的方法应该综合考虑性能、兼容性、代码简洁性以及项目需求等因素，并根据具体情况进行选择。

-结束

更多文章

顺芯技术猿
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
JavaScript将一层级对象数组转为children嵌套的三层级树状对象数组（多级树状分类）
coderYYY的博客
07-31 1396
有时候后端返回的数据不适合前端，我们就需要进行转换，比如我想用elementUI的级联选择器，而这个组件对数据格式有要求，本篇文章将介绍如何将一层级对象数组数据格式转为三层级嵌套children数组，JavaScript、Vue、小程序等都适用，使用情景为多级分类，嵌套数据。
【Js】一维数组转为具有两层级的树结构
csdn_buildupeffect的博客
03-25 1035
```javascript var arr = [ { id: 1, name: "中国", parentId: 2, }, { id: 2, name: "地球", parentId: 0, }, { id: 3, name: "法国", parentId: 2, }, { id: 4, .
使用js高效地将扁平的数据转换成树形结构
马小兜要努力呀
09-27 1187
当我们需要将一维数组转换成一个多层结构的时候，最简单但是最慢的就是使用多个for循环嵌套，但是这样做有一些缺点，那就是效率太低，而且有多少层就需要用多少个for，现在我们可以使用一种高效的手段将一维的扁平数组转换成一个多层级的菜单结构。 一维数组中每一个元素必须要包含以下属性： 拥有一个唯一的id 拥有一个parent_id,这个id指向父级的id 扁平数组实例： var menu_list = [{ id: '1', menu_name: '设置', menu_ur
一维数组变多维数组
sf1989424的博客
11-26 582
1.双层filter过滤 第一层 item 定义为father newArr接收 第一层过滤出最顶层数组 判断 branchArr的长度 存在father.children=branchArr 否则为空 return father.pid === 0 第二层 item 定义为child branchArr接收 里层 判断pid是否存在（没有子集的pid为0） 存在返回 father ID...
扁平结构数据转换成层级嵌套树形数据
liv空间站
07-04 548
树形插件所用数据格式转换方法
JavaScript数组常用方法
10-24
主要介绍了JavaScript数组常用方法的相关资料,非常的详细，需要的朋友可以参考下
JavaScript将数组转换成CSV格式的方法
10-24
数组对象是JavaScript内置的一种数据结构，用于存储一系列的数据。数组的每个元素可以通过索引来访问，索引从0开始。例如，`fruits`数组包含四个元素，可以通过`fruits[0]`、`fruits[1]`等来访问它们。 在...
谈谈JavaScript数组常用方法总结
10-20
理解并熟练掌握这些数组方法，对于编写高效、简洁的JavaScript代码至关重要。通过合理利用这些方法，我们可以轻松地对数组进行增删改查、排序、合并、筛选等操作，从而实现更复杂的业务逻辑。在实际开发中，一定要...
javascript数组常用方法汇总
10-21
JavaScript中的数组方法是编程中非常基础且重要的部分，它们提供了对数组内容进行各种操作的便捷方式。以下是对标题和描述中提到的一些JavaScript数组常用方法的详细说明： 1. **join()** 方法：`Array.join()` ...
javascript Array 数组常用方法
01-19
(1)基本的数组方法 1.join() Array.join()方法将数组中所有元素都转化为字符串并连接在一起，返回最后生成的字符串。可以自己指定分隔的符号，如果不指定，默认使用逗号 var arr = [1,2,3]; console.log(arr.join()...
文件转数组工具(File-Array)免费绿色版
07-31
文件转数组工具(File-Array)支持图片、字体。各种文件转化成数组，自动生成.h文件
js实现树形数据转成扁平数据的方法示例
10-15
主要介绍了js实现树形数据转成扁平数据的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
js实现无限层级树形数据结构(创新算法)
10-15
主要介绍了js实现无限层级树形数据结构，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
JavaScript类数组对象转换为数组对象的方法实例分析
12-04
本文实例分析了JavaScript类数组对象转换为数组对象的方法。分享给大家供大家参考，具体如下： 1、类数组对象： 拥有length属性，可以通过下标访问； 不具有数组所具有的方法。 2、为什么要将类数组对象转换为数组...
JavaScript常用数组、字符串、Object方法
最新发布
04-28
JavaScript中常用的数组方法如下： - push()：向数组末尾添加一个或多个元素，并返回新的长度。 - pop()：删除并返回数组的最后一个元素。 - unshift()：向数组开头添加一个或多个元素，并返回新的长度。 - ...
通过js把一个数组修改成多层嵌套多个数组的几种方法
a13145211的博客
03-19 9062
1、首先一级与二级相同的嵌套 let arr = [ { date: '2020-01-06', age: '18'}, { date: '2020-01-06', age: '25'}, { date: '2020-01-07', age: '34'}, { date: '2020-01-07', age: '18'}, { date: '202...
JS 实现平级数组变成树级结构
小蜜蜂的博客
12-30 1612
// 数据结构 const initData = [ { id: 1, parentId: 0, name: "1" }, { id: 2, parentId: 0, name: "2" }, { id: 3, parentId: 1, name: "3" }, { id: 4,
使用JavaScript 实现 Array.flat()方法
Wrj6811的博客
07-12 970
Array.flat()介绍 flat()方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。使用 Array.flat(depth)可以实现数组的扁平化 参数 depth可选（指定要提取嵌套数组的结构深度，默认值为 1） 返回值 一个包含将数组与子数组中所有元素的新数组。（所有和原数组没有关系，不会影响到原数组） 下面看代码实现： 首先：不看depth，不考虑深度问题。 将实现方法加到 Arr...
【算法解析】js 扁平数据 转 树形数据
bug收集
01-18 589
在项目开发过程中，都会遇到树形数据结构与扁平数据结构的转换。今天就分享一下，扁平数据结构转树形数据结构的方法01、回顾数据结构扁平数据结构 [{id:1, pid:0, name:'沃尔玛'}, {id:2, pid:1, name:'生鲜区'}, {id:3, pid:1, name:'日用品区'}, {id:4, pid:2, name:'鱼'}, {id:5, pid:2, name:'牛肉'}, {id:6, pid:3, name:'卫生纸'}, {id:7, pid:3, .
请举例介绍JavaScript的数组常用方法
05-27
当使用JavaScript编写程序时，数组是一种常见的数据结构，JavaScript 数组具有许多有用的方法，以下是其中一些常用的方法及其示例： 1. push() 方法：向数组末尾添加一个或多个元素，并返回新的长度。 ```javascript let arr = [1, 2, 3]; arr.push(4); console.log(arr); // [1, 2, 3, 4] ``` 2. pop() 方法：删除数组的最后一个元素，并返回该元素的值。 ```javascript let arr = [1, 2, 3]; let lastElement = arr.pop(); console.log(lastElement); // 3 console.log(arr); // [1, 2] ``` 3. shift() 方法：删除数组的第一个元素，并返回该元素的值。 ```javascript let arr = [1, 2, 3]; let firstElement = arr.shift(); console.log(firstElement); // 1 console.log(arr); // [2, 3] ``` 4. unshift() 方法：向数组的开头添加一个或多个元素，并返回新的长度。 ```javascript let arr = [1, 2, 3]; arr.unshift(0, -1); console.log(arr); // [-1, 0, 1, 2, 3] ``` 5. slice() 方法：返回一个新的数组，包含从起始位置到结束位置（不包括结束位置）之间的元素。 ```javascript let arr = [1, 2, 3, 4, 5]; let newArr = arr.slice(1, 4); console.log(newArr); // [2, 3, 4] ``` 6. splice() 方法：向数组中插入或删除元素。可以指定要删除的元素的位置和数量，并且可以指定要添加的元素。 ```javascript let arr = [1, 2, 3, 4, 5]; arr.splice(2, 1); // 从位置2开始删除1个元素 console.log(arr); // [1, 2, 4, 5] arr.splice(2, 0, 3); // 在位置2插入元素3 console.log(arr); // [1, 2, 3, 4, 5] arr.splice(2, 1, 'three'); // 用 'three' 替换位置2的元素 console.log(arr); // [1, 2, 'three', 4, 5] ``` 7. indexOf() 方法：返回数组中第一个匹配项的索引。 ```javascript let arr = [1, 2, 3, 4, 5]; let index = arr.indexOf(3); console.log(index); // 2 ``` 8. lastIndexOf() 方法：返回数组中最后一个匹配项的索引。 ```javascript let arr = [1, 2, 3, 4, 3, 5]; let lastIndex = arr.lastIndexOf(3); console.log(lastIndex); // 4 ``` 9. forEach() 方法：对数组中的每个元素执行指定的操作。 ```javascript let arr = [1, 2, 3]; arr.forEach(function(item) { console.log(item); }) // 输出：1 2 3 ``` 10. map() 方法：返回一个新的数组，其中包含对原始数组中的每个元素应用指定函数后的结果。 ```javascript let arr = [1, 2, 3]; let newArr = arr.map(function(item) { return item * 2; }) console.log(newArr); // [2, 4, 6] ``` 11. filter() 方法：返回一个新的数组，其中包含满足指定条件的原始数组元素。 ```javascript let arr = [1, 2, 3, 4, 5]; let newArr = arr.filter(function(item) { return item % 2 === 0; }) console.log(newArr); // [2, 4] ``` 12. reduce() 方法：返回一个值，该值是通过对数组中的每个元素应用指定的函数来计算的。 ```javascript let arr = [1, 2, 3]; let sum = arr.reduce(function(total, item) { return total + item; }, 0) console.log(sum); // 6 ``` 以上是一些常用的 JavaScript 数组方法及其示例，它们可以帮助你轻松地对数组进行操作，实现各种有用的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

顺芯技术猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值