李志成的个人网站

李志成的个人网站

  • 博客
  • ·
  • 留言
  • ·
  • 友链
  • ·
  • 关于
  • ·
  • Rss

JS 扁平化 (flatten) 数组

发表于2019-03-18 09:45:01分类于javascript0条评论阅读次数58

概述

数组的扁平化,是将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组

在实际开发过程中,难免需要把数组进行扁平化输出,方便获取对应的数据。

那么下面就开始讲解几种方案的实现。

es6中的flat方法

flat() 方法会递归到指定深度将所有子数组连接,并返回一个新数组。

参数:

depth //可选 指定嵌套数组中的结构深度,默认值为1。
返回值:一个将子数组连接的新数组.

示例

[1, 2, [3, 4, 5]].flat(1) // [1, 2, 3, 4, 5]

[1, 2, [3, [4]]].flat(1) // [1, 2, 3, [4]]

// 传入Infinit关键字,可展开所有嵌套数组
[1, 2, [3, [4, [5]]]].flat(Infinity) // [1, 2, 3, 4, 5]

join方法

join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符。

参数:

separator //可选 默认为 ","
返回值:一个所有数组元素连接的字符串。如果 arr.length 为0,则返回空字符串。

示例:

当数组中全是数组,可以快速使用 join 方法,对数组进行平铺。

const arr = [1, 5, 6, [1, 2, 3]]
arr.join(",").split(",").map(item => Number(item));
// [1, 5, 6, 1, 2, 3]

concat方法

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

参数:

valueN //可选 
返回值:新的 Array 实例。

示例:

function flatten(arr) {
  return !Array.isArray(arr) ? arr : [].concat.apply([], 	   arr.map(flatten));
}

flatten([1,[2],[3],4,[[5,6],7]])  // [1, 2, 3, 4, 5, 6, 7]

reduce方法

reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。

参数:

callback: 
// 执行数组中每个值的函数,包含四个参数:
1. accumulator // 累计器
2. currentValue // 当前值
3. currentIndex // 当前索引
4. array // 数组

initialValue // 可选
/*
* 注意:如果没有提供initialValue,reduce 会从索引1的地方开始执行
* callback 方法,跳过第一个索引。如果提供initialValue,从索引0开始。
*/
返回值:函数累计处理的结果。

示例:

function flatten(arr) {
  return arr.reduce((a, b) => {
    return a.concat(Array.isArray(b) ? flatten(b) : b);
  }, []);
};

flatten([1,[2],[3],4,[[5,6],7]])  // [1, 2, 3, 4, 5, 6, 7]

总结:

除了上面几种实现方案之外,实现扁平化(flatten)数组的方法还有很多种。大家可以自行研究。在实际开发中,可以选用自己最为熟悉的一种进行使用。利用es6的flat方法结合webpack babel会更佳。

下一篇:http协议

--发表评论--

🚀support markdown (* ̄▽ ̄*)ブ