六种方式实现数组扁平化,总有一个适合你

简介: 扁平化在日常的工作中我们也会经常用到,也是面试时经常考的一道题,今天总结一下常见和不常见的数组扁平化的几种方式数组的扁平化其实就是将一个嵌套多层的数组 array(嵌套可以是任何层数)转换为只有一层的数组。其实就是把多维的数组“拍平”,输出最后的一维数组。

比如现在有一个叫flatten的函数可以实现这个功能,调用它就能实现这样的效果

var arr = [1, [2, [3, 4,5]]];
console.log(flatten(arr)); // [1, 2, 3, 4,5]


01、使用递归实现


普通的递归思路很容易理解,就是通过循环递归的方式,一项一项地去遍历,遍历过程中发现元素还是数组的时候进行递归操作,继续往下遍历,利用递归程序的方法,来实现数组的每一项的连接。

把数组的结果通过数组的 concat 方法拼接到最后要返回的 result 数组上,那么最后输出的结果就是扁平化后的数组。

// 方法1
var arr = [1, [2, [3, 4, 5]]];
function flatten(arr) {
    let result = [];
    for(let i = 0; i < arr.length; i++) {
        if(Array.isArray(arr[i])) {
            result = result.concat(flatten(arr[i]));
        } else {
            result.push(arr[i]);
        }
    }
    return result;
}
flatten(arr);  //  [1, 2, 3, 4,5]


02、使用 reduce函数迭代实现


通过递归的方式我们可以发现扁平化的本质就是对数组的每一项进行处理,那么我们也可以利用reduce 来实现数组的拼接,reduce 的第一个参数用来返回最后累加的结果,思路和递归是一样的,只不过使用它之后代码变得更简洁了

var arr = [1, [2, [3, 4, 5]]];
function flatten(arr) {
    return arr.reduce(function(prev, next){
        return prev.concat(Array.isArray(next) ? flatten(next) : next)
    }, [])
}
console.log(flatten(arr));//  [1, 2, 3, 4,5]


03、使用 扩展运算符实现


采用了扩展运算符和 some 的方法也能达到数组扁平化的目的

可以先用数组的 `some` 方法把数组中仍然是数组的元素过滤出来,然后执行 `concat` 操作,利用 ES6 的展开运算符,将其拼接到原数组中,最后返回原数组
var arr = [1, [2, [3, 4, 5]]];
function flatten(arr) {
    while (arr.some(item => Array.isArray(item))) {
        arr = [].concat(...arr);
    }
    return arr;
}
console.log(flatten(arr)); //  [1, 2, 3, 4,5]

上面几种方式都带有递归循环的思路来实现数组扁平化,除此之外还有其他方式能实现数组扁平化


04、使用 splittoString 实现

由于数组会默认带一个 toString 的方法,所以可以把数组直接转换成逗号分隔的字符串,然后再用 split 方法把字符串重新转换为数组

var arr = [1, [2, [3, 4, 5]]];
function flatten(arr) {
    return arr.toString().split(',');
}
console.log(flatten(arr)); //  [1, 2, 3, 4,5]
复制代码


05、使用 ES6 中的 flat实现


ES6中有一个flat方法,可以直接实现数组的扁平化

arr.flat([depth])

depth 是 flat 的参数,可传也可以不传;depth 是可以传递数组的展开深度(默认不填、数值是 1),即展开一层数组。数也可以传进 Infinity,代表不论多少层都要展开。

var arr = [1, [2, [3, 4, 5]]];
function flatten(arr) {
  return arr.flat(Infinity);
}
console.log(flatten(arr)); //  [1, 2, 3, 4,5]

对数组的嵌套层数不确定的时候,最好直接使用 Infinity


06、使用正则和 JSON 实现


使用JSON.stringify 的方法先把数组转换为字符串,然后通过正则表达式过滤掉字符串中的数组的方括号,最后再利用 JSON.parse 把它转换成数组。

var arr = [1, [2, [3, 4, 5]]];
function flatten(arr) {
  let str = JSON.stringify(arr);
  str = str.replace(/(\[|\])/g, '');
  str = '[' + str + ']';
  return JSON.parse(str); 
}
console.log(flatten(arr)); //  [1, 2, 3, 4,5]



目录
相关文章
|
1月前
|
算法 前端开发
经典面试题:扁平化嵌套数组
经典面试题:扁平化嵌套数组
26 0
|
8月前
|
存储 JavaScript 前端开发
手撕前端面试题【javascript~ 列表动态渲染、无重复数组、数组排序、新数组、创建数组、深浅拷贝、内存泄露等】
html页面的骨架,相当于人的骨头,只有骨头是不是看着有点瘆人,只有HTML也是如此。 css,相当于把骨架修饰起来,相当于人的皮肉。
49 0
|
10月前
|
JavaScript 索引
面试官:怎样实现JS数组扁平化?(一)
面试官:怎样实现JS数组扁平化?(一)
|
10月前
|
前端开发
前端学习笔记202305学习笔记第二十八天-数组结构之列表拖拽改变顺序4
前端学习笔记202305学习笔记第二十八天-数组结构之列表拖拽改变顺序4
34 0
|
1月前
|
存储 JavaScript 前端开发
无序中的秩序之美:集合数据为编程世界增添新的维度
无序中的秩序之美:集合数据为编程世界增添新的维度
|
10月前
|
JavaScript 前端开发 索引
JavaScript 手写代码 第六期(重写数组方法二)不改变原数组的方法
JavaScript 手写代码 第六期(重写数组方法二)不改变原数组的方法
46 0
|
10月前
|
JavaScript 前端开发 索引
JavaScript 手写代码 第五期(重写数组方法一)-可以改变原数组的方法
JavaScript 手写代码 第五期(重写数组方法一)-可以改变原数组的方法
53 0
|
10月前
|
JavaScript
面试官:怎样实现JS数组扁平化?(二)
面试官:怎样实现JS数组扁平化?(二)
|
10月前
|
前端开发
前端学习笔记202305学习笔记第二十八天-数组结构之列表拖拽改变顺序2
前端学习笔记202305学习笔记第二十八天-数组结构之列表拖拽改变顺序2
38 0
|
10月前
|
前端开发
前端学习笔记202305学习笔记第二十八天-数组结构之列表拖拽改变顺序1
前端学习笔记202305学习笔记第二十八天-数组结构之列表拖拽改变顺序1
35 0