JS将二维数组转成一维数组的方法有哪些?
前言
这是一道常见的前端面试题,也是考验JavaScript基础知识是否牢固的常见题型。在前端开发中后端可能会返回给我们一些奇怪的数据,比如说数组里面的元素也是数组,但是我们需要的是一个简单的一维数组,这个时候就需要将二维数组(或者多维数组)转化为我们需要的一维数组。也可以叫做数组扁平化。
1. flat方法
flat是ES10新增的一个数组处理的方法,非常的好用,它专门用来扁平化数组,来看看官方的解释:
flat()
方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
官方说的非常的清楚,就是将数组里面的所有元素都遍历出来,无论层级有多深,最后返回一个新的数组,示例代码如下:
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方法是一个数组操作的方法,官方说的非常明白,解释如下:
concat()
方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。
扩展运算符(...)可以将数组转为用逗号分隔的参数序列。
结合上面两个方法,我们就可以将二维数组转化为一维数组,示例代码如下:
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),