JS将二维数组转成一维数组的方法有哪些?

简介: 前言这是一道常见的前端面试题,也是考验JavaScript基础知识是否牢固的常见题型。在前端开发中后端可能会返回给我们一些奇怪的数据,比如说数组里面的元素也是数组,但是我们需要的是一个简单的一维数组,这个时候就需要将二维数组(或者多维数组)转化为我们需要的一维数组。也可以叫做数组扁平化。

1. flat方法

flat是ES10新增的一个数组处理的方法,非常的好用,它专门用来扁平化数组,来看看官方的解释:20.png


官方说的非常的清楚,就是将数组里面的所有元素都遍历出来,无论层级有多深,最后返回一个新的数组,示例代码如下:

let arr = [1, 2, 3, [1, 2, 3]];
console.log(arr.flat()); // [1, 2, 3, 1, 2, 3]


flat默认将二维数组转为一维数组,如果数组层数较多,我们可以传入参数指定固定层数,参数默认为1,示例代码如下:

let arr = [1, 2, 3, [1,[1,2,3], 2, 3]];
console.log(arr.flat(2)); // [1, 2, 3, 1, 1, 2, 3, 2, 3]


如果数组层数未知,可以传入参数Infinity,示例代码如下:

let arr = [1, 2, 3, [1,[1,[1,2,3],2,3], 2, 3]];
console.log(arr.flat(Infinity)); // [1, 2, 3, 1, 1, 1, 2, 3, 2, 3, 2, 3]


2. concat + 扩展符

concat方法是一个数组操作的方法,官方说的非常明白,解释如下:21.png


扩展运算符(...)可以将数组转为用逗号分隔的参数序列。

结合上面两个方法,我们就可以将二维数组转化为一维数组,示例代码如下

let arr = [1, 2, 3, [1, 2, 3], 2, 3];
console.log([].concat(...arr)); // [1, 2, 3, 1, 2, 3, 2, 3]

但是这种方式无法将多维数组转为一维数组。


3. reduce + concat


reduce() 方法接收一个函数作为累加器,reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(上一次回调的返回值),当前元素值,当前索引,原数组 。


语法:arr.reduce(callback,[initialValue])

callback:函数中包含四个参数
  - previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue))
  - currentValue (数组中当前被处理的元素)
  - index (当前元素在数组中的索引)
  - array (调用的数组)
initialValue (作为第一次调用 callback 的第一个参数。)


先来看一段reduce使用方法的示例代码:


const arr = [1, 2, 3, 4, 5]
const sum = arr.reduce((pre, item) => {
   return pre + item
}, 0)
console.log(sum) // 15

然后我们在利用reduce+concat来实现二维数组的扁平化,代码如下:

let flattened = [1, [0, 1], [2, 3], [4, 5]].reduce(
   (acc, cur) => acc.concat(cur),
   []
);
console.log(flattened) // [1, 0, 1, 2, 3, 4, 5]

这里我们将初始值设置为了[]空数组,然后将需要扁平化的数组的每一项都用concat重新连接,最终得到一个一维数组。


4. toString + split

先使用 toString 把数组转成字符串,再使用 split 把字符串转回数组:

let arr = [1, [1, 2], [3, 4]]
let arrnew = arr.toString().split(",").map((item) => +item)
console.log(arrnew) // [1, 1, 2, 3, 4]

22.png

使用map是为了让数组元素变为Number类型。


总结


数组扁平化是面试中非常常见的一种题型,本篇文章给出了四种解决方案,当然还有很多其它的方案,但是大体来说就是合理的使用递归和循环,当然我们还要考虑一些性能问题。


小编Github:Hacker233 - Overview

相关文章
|
4天前
|
JavaScript 前端开发
技术经验分享:javaScript遍历对象、数组总结
技术经验分享:javaScript遍历对象、数组总结
技术经验分享:javaScript遍历对象、数组总结
|
5天前
|
存储 JSON 前端开发
JavaScript 进阶征途:解锁Function奥秘,深掘Object方法精髓
JavaScript 进阶征途:解锁Function奥秘,深掘Object方法精髓
|
5天前
|
JavaScript 索引
JS判断数组是否包含某个元素
JS判断数组是否包含某个元素
10 1
|
2天前
|
JavaScript 前端开发 Java
JavaScript中的hasOwnProperty方法详解
JavaScript中的hasOwnProperty方法详解
|
3天前
|
JavaScript
|
3天前
|
Web App开发 JavaScript iOS开发
技术笔记:js数组定义和方法(包含ES5新增数组方法)
技术笔记:js数组定义和方法(包含ES5新增数组方法)
|
3天前
|
JavaScript BI
技术笔记:JS获取子节点、父节点和兄弟节点的方法实例总结
技术笔记:JS获取子节点、父节点和兄弟节点的方法实例总结
|
3天前
|
移动开发 JavaScript 前端开发
技术经验分享:JavaScript实现Date()——日期格式化的三种常用方法
技术经验分享:JavaScript实现Date()——日期格式化的三种常用方法
|
5天前
|
存储 前端开发 JavaScript
JavaScript 数组魔法阵:解锁数据的无限潜能
JavaScript 数组魔法阵:解锁数据的无限潜能