js实现数组的扁平化

目录
  • 数组扁平化的方式
    • 1.使用flat()
    • 2.使用正则
    • 3.使用reduce()+concat()
    • 4.使用函数递归
  • 5.使用扩展运算符+concat()
  • 总结

数组扁平化的方式

什么是数组扁平化？

数组扁平化：指将一个多维数组转化为一个一维数组。

例：将下面数组扁平化处理。

const arr = [1, [2, 3, [4, 5]]] // ---> [ 1, 2, 3, 4, 5 ]

1.使用flat()

flat() 方法是ES10提出的，它会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。（flat意为“水平的；平坦的”）

const result1 = arr.flat(Infinity) // 指定深度为无限
console.log(result1) // [ 1, 2, 3, 4, 5 ]
const result2 = arr.flat(1) // 指定深度为1
console.log(result2) // [ 1, 2, 3, [ 4, 5 ] ]
const result3 = arr.flat(2) // 指定深度为2
console.log(result3) // [ 1, 2, 3, 4, 5 ]

2.使用正则

以下做法得到的数组元素都会变成字符串，不建议使用；

const result1 = JSON.stringify(arr).replace(/\[|\]/g, '').split(',')
console.log(result1) // [ '1', '2', '3', '4', '5' ] 数组元素都变成了字符串

对以上方法进行优化处理；

const result2 = JSON.parse('[' + JSON.stringify(arr).replace(/\[|\]/g, '') + ']')
console.log(result2) // [ 1, 2, 3, 4, 5 ]

3.使用reduce()+concat()

使用reduce拿到数组的当前值和前一项值，判断当前值是否为数组，初始值设置为[]，然后使用concat进行数组合并。

  • reduce()方法：对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。
  • concat()方法：用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
function flatten(arr) {
  return arr.reduce((pre, current) => {
    return pre.concat(Array.isArray(current) ? flatten(current) : current)
  }, [])
}
const result = flatten(arr)
console.log(result) // [ 1, 2, 3, 4, 5 ]

4.使用函数递归

循环遍历数组，发现含有数组元素就进行递归处理，最终将数组转为一维数组。

const result = []
function exec(arr) {
  arr.forEach(item => {
    if (Array.isArray(item)) {
      exec(item)
    } else {
      result.push(item)
    }
  })
}
exec(arr)
console.log(result) // [ 1, 2, 3, 4, 5 ]

5.使用扩展运算符+concat()

ES6新推出的扩展运算符能对数组进行降维处理（一次降一维），循环判断是否含有数组，进行concat合并。

some()方法：测试数组中是不是至少有1个元素通过了被提供的函数测试（它返回的是一个Boolean类型的值）。

function flatten(arr) {
  while (arr.some(item => Array.isArray(item))) {
    arr = [].concat(...arr)
  }
  return arr
}
const result = flatten(arr)
console.log(result) // [ 1, 2, 3, 4, 5 ]

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • 5种 JavaScript 方式实现数组扁平化

    目录 一.数组扁平化概念 二.实现 1. reduce 2. toString & split 3. join & split 4. 递归 5. 扩展运算符 一.数组扁平化概念 数组扁平化是指将一个多维数组变为一维数组 [1, [2, 3, [4, 5]]] ------> [1, 2, 3, 4, 5] 二.实现 1. reduce 遍历数组每一项,若值为数组则递归遍历,否则concat. function flatten(arr) { return arr.reduce((res

  • Js数组扁平化实现方法代码总汇

    题目: 请写出一个数组拍平函数.效果如下: var arr=['a', ['b', 'c'], 2, ['d', 'e', 'f'], 'g', 3, 4]; flat(arr) //a,b,c,2,d,e,f,g,3,4 方法一:使用toString方法先将arr转换为一个字符串, 再以split分割为数组,再将数组里面的元素转换为数字类型 var arr =['a', ['b', 'c'], 2, ['d', 'e', 'f'], 'g', 3, 4]; function flat(arr)

  • JavaScript面试之如何实现数组拍平（扁平化）方法

    目录 1 什么叫数组拍平? 2 JS标准库中的数组拍平方法 3 实现一个flat方法 3.1 如何遍历一个数组 3.2 如何判断元素是否为数组 3.3 递归 3.4 初步实现flat方法 4 优化 4.1 指定展开深度 4.2 数组空位处理 4.2.1 for...of增加空位判断 4.2.2 forEach.map方法遍历 4.2.3 reduce方法 5 其他 5.1 栈 5.2 改进 总结 1 什么叫数组拍平? 概念很简单,意思是将一个"多维"数组降维,比如: // 原数组是一个

  • JS扁平化输出数组的2种方法解析

    这篇文章主要介绍了JS扁平化输出数组的2种方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.使用数组的flat方法 [1,2,[3,[4,5]]].flat(Infinity) //[1, 2, 3, 4, 5] 2.实现方式二: var arr = [[1, 2, 23], [13, 4, 5, 5], [6, 7, 9, [11, 12, [12, 13, [14]]]], 10]; var result = []; functi

  • JS数组扁平化(flat)方法总结详解

    需求:多维数组=>一维数组 let ary = [1, [2, [3, [4, 5]]], 6]; let str = JSON.stringify(ary); 第0种处理:直接的调用 arr_flat = arr.flat(Infinity); 第一种处理 ary = str.replace(/(\[\]))/g, '').split(','); 第二种处理 str = str.replace(/(\[\]))/g, ''); str = '[' + str + ']'; ary = JSON

  • JS数组扁平化、去重、排序操作实例详解

    JS数组扁平化、去重、排序操作实例详解

    本文实例讲述了JS数组扁平化.去重.排序操作.分享给大家供大家参考,具体如下: 在网上看到一个校招题目,已知一个数组var arr = [[1, 3, 2, 1],[5, 3, 4, 8, 5, 6, 5],[6, 2, 8, 9, [4, 11, 15, 8, 9, 12, [12, 13, [10], 14]]], 16],用js编写一个程序将这个数组扁平化,并得到一个升序且无重复值的数组.得到最终结果为:[1,2,3,4,5,6,8,9,10,11,12,13,14,15,16].下面对数

  • js实现数组的扁平化

    目录 数组扁平化的方式 1.使用flat() 2.使用正则 3.使用reduce()+concat() 4.使用函数递归 5.使用扩展运算符+concat() 总结 数组扁平化的方式 什么是数组扁平化? 数组扁平化:指将一个多维数组转化为一个一维数组. 例:将下面数组扁平化处理. const arr = [1, [2, 3, [4, 5]]] // ---> [ 1, 2, 3, 4, 5 ] 1.使用flat() flat() 方法是ES10提出的,它会按照一个可指定的深度递归遍历数组,并将所

  • js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解

    js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解

    数组的扁平化:将多维数组变成一维数组 对于一个像这样的嵌套数组:a=[1,[2,[3,4]],5,6]我们想要把它变成一个一维数组,有下面几种方法: 方法一:递归一 function parseArr(arr,res){ var i=0; for(i=0;i<arr.length;i++){ if(arr[i] instanceof Array){ parseArr(arr[i],res); }else{ res.push(arr[i]); } } } var a=[1,[2,[3,4]],5,

  • JavaScript之数组扁平化详解

    扁平化 数组的扁平化,就是将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组. 举个例子,假设有个名为 flatten 的函数可以做到数组扁平化,效果就会如下: var arr = [1, [2, [3, 4]]]; console.log(flatten(arr)) // [1, 2, 3, 4] 知道了效果是什么样的了,我们可以去尝试着写这个 flatten 函数了 递归 我们最一开始能想到的莫过于循环数组元素,如果还是一个数组,就递归调用该方法: // 方法 1

  • JavaScript数据扁平化详解

    目录 什么是扁平化 递归 tostring reduce undercore _.flatten _.union _.difference 总结 什么是扁平化 数组的扁平化,就是将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组. 举个例子,假设有个名为 flatten 的函数可以做到数组扁平化,效果就会如下: var arr = [1, [2, [3, 4]]]; console.log(flatten(arr)) // [1, 2, 3, 4] 循环数组+递归 循环

  • JS前端面试数组扁平化手写flat函数示例

    目录 前言 题目 实现扁平化的方法 封装 flatten 1. ES6 flat 2. toString 3. 使用正则替换 4. 循环递归 4.1 循环 + concat + push 4.2 增加参数控制扁平化深度 4.3 巧用 reduce 4.4 使用 Generator 函数 5. 使用堆栈 stack 避免递归 6.while 循环+ some方法 前言 由于上半年参加了校招的技术面试, 前前后后面了20多个人了, 每次面试都会让应聘者手写一下数组扁平化flat(),但是发现居然没有

  • JavaScript数组去重和扁平化函数介绍

    目录 1.数组扁平化(又称数组降维) 方法一:使用 reduce 方法 方法二:栈 2.数组去重 方式一:Set(ES6) 方式二:reduce 方法三:filter 1.数组扁平化(又称数组降维) flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回 const test = ["a", ["b", "c"], ["d", ["e", ["

  • JavaScript数组常用方法解析及数组扁平化

    目录 前言 一.常用数组操作方法 push末尾追加元素 pop删除数组末尾元素 sort排序 shift数组开头添加元素 && unshift数组开头删除元素 数组合并concat indexOf查找元素 && includes查找元素是否存在 reverse反转数组 数组切割成字符串join slice操作数组,替换,删除,新增 every校验数组所有元素 some 测试数组中是不是至少有1个元素通过了被提供的函数测试.返回值是布尔值 深层次递归数组flat map遍历数

随机推荐