JavaScript中数组flat方法的使用与实现方法

更新时间：2022年08月22日 14:17:19 作者：前端三脚猫

在Array的显示原型下有一个flat方法,可以将多维数组,降维,传的参数是多少就降多少维,下面这篇文章主要给大家介绍了关于JavaScript中数组flat方法的使用与实现的相关资料,需要的朋友可以参考下

前言

flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

语法

var newArray = arr.flat([depth])

参数

depth 可选

指定要提取嵌套数组的深度，默认值为 1。

返回值

一个包含将数组与子数组中所有元素的新数组。（就是扁平化后的每一项重新组成的数组，所以不会改变原数组。）

使用示例

扁平化数组，不传递参数的时候默认为一层

let arr = [1,2,[3,[4,[5]]]]
const reasut = arr.flat()
console.log(reasut)
// [1, 2, 3, [4,[5]]]

设置扁平化的深度

let arr = [1,2,[3,[4,[5]]]]
const reasut2 = arr.flat(3)
console.log(reasut2)
// [1, 2, 3, 4, 5]

当传入Infinity时，相当于扁平化最深层次的数组

let arr = [1,2,[3,[4,[5]]]]
const reasut3 = arr.flat(Infinity)
console.log(reasut3)
// [1, 2, 3, 4, 5]

当数组里面有空项的时候，会过滤掉空值

const arr2 = [1, , 2, [3]]
const reasut4 = arr2.flat()
console.log(reasut4)
// [1, 2, 3]

方法实现

1、当只扁平化一层的时候

const arr5 = [1,2,[3,[4,5]], [6,[7]], 8]
function getFlatArr (list) {
  return list.reduce((pre, item) => {
    return pre.concat(item)
  }, [])
}
console.log(getFlatArr(arr5))
// [1,2,3,[4,5],6,[7],8]

上述代码使用reduce方法和concat方法组合，实现只展平一层数组的方法。还可以使用foreach和push方法如：

const arr5 = [1,2,[3,[4,5]], [6,[7]], 8]

function getFlatArr (list) {
  let result = []
  list.forEach(element => {
    if (Array.isArray(element)) {
      result.push(...element)
    } else {
      result.push(element)
    }
  })
  return result
}
console.log(getFlatArr(arr5))
// [1,2,3,[4,5],6,[7],8]

上述代码采用foreach方法对数组的每一项循环，并使用isArray方法判断是不是数组将当前项push进result中，最后返回result。

2、当数组展平的层数为最大层时

const arr5 = [1,2,[3,[4,5]], [6,[7]], 8]
function getFlatArr (list) {
  return list.reduce((pre, item) => pre.concat(Array.isArray(item)? getFlatArr(item): item), [])
}
console.log(getFlatArr(arr5))
// [1, 2, 3, 4, 5, 6, 7, 8]

上述代码使用数组的reduce方法和递归的形式实现，当reduce方法循环到数组的每一项时都去判断当前项是不是新的数组，是的话就使用递归去吧里面的每一项逐层剥离出来，最后进行合并，不是数组的话，就直接将当前项合并到数组中。还可以使用foreach方法+递归的方式进行实现，如：

const arr5 = [1,2,[3,[4,5]], [6,[7]], 8]
function getFlatArr (list) {
  const result = []
  ;(function flat(list) {
    // forEach 自动去除数组空位
    list.forEach(item => {
      // 判断是不是数组
      if (Array.isArray(item)) {
        // 进行数组递归
        flat(item)
      } else {
        result.push(item)
      }
    })
  })(list)
  return result
}
console.log(getFlatArr(arr5))
// [1, 2, 3, 4, 5, 6, 7, 8]

上述代码创建一个新的数组，使用foreach方法循环原始数组的每一项，然后判断当前项是否是一个数组是的话就递归，不是的话就将当前项push进新创建的数组，最后返回创建的数组。还可以使用堆栈的概念来实现，如：

const arr5 = [1,2,[3,[4,5]], [6,[7]], 8]
function getFlatArr (list) {
  const arrList = JSON.parse(JSON.stringify(list))
  const result = []
  while (arrList.length) {
    // 弹出堆栈中的数据
    let arr = arrList.shift()
    if (Array.isArray(arr)) arrList.unshift(...arr)
    else result.push(arr)
  }
  return result
}

console.log(getFlatArr(arr5))
// [1, 2, 3, 4, 5, 6, 7, 8]

上述代码使用堆栈概念存储数据，使用while语句进行循环弹出堆栈中的数据，弹出的数据如果不是数组类型的话就push进创建的新数组中，否则的话就将当前项解构后在一次存储进堆栈中，重复上述操作直到堆栈中的数据被清空，最后返回创建的数组。

3、数组扁平化使用参数控制扁平的深度

可以使用reduce方法和递归来实现如：

const arr5 = [1,2,[3,[4,5]], [6,[7]], 8]
function getFlatArr (list, deepNum = 1) {
  return deepNum > 0? list.reduce((pre, item) => {
    return pre.concat(Array.isArray(item)? getFlatArr(item, deepNum - 1): item)
  }, []): list.slice()
}

console.log(getFlatArr(arr5))
// [1,2,3,[4,5], 6,[7], 8]

console.log(getFlatArr(arr5, 3))
// [1, 2, 3, 4, 5, 6, 7, 8]

上述代码使用reduce方法，将循环的当前项展开成一个数组，然后通过传入的deepNum参数来控制展开的深度，当deepNum小于1的时候就返回原数组的一个浅拷贝，否则就根据deepNum的大小来展开对应深度的数组。还可以使用foreach方法+递归的形式来实现，如：

const arr5 = [1,2,[3,[4,5]], [6,[7]], 8]
function getFlatArr (list, deepNum = 1) {
  const result = []
  ;(function flat(list, deepNum) {
    list.forEach(element => {
      // 判断当前元素是否为数组并控制递归的深度
      if (Array.isArray(element) && deepNum > 0) flat(element, deepNum - 1)
      else result.push(element)
    })
  })(list, deepNum)
  return result
}

console.log(getFlatArr(arr5))
// [1,2,3,[4,5], 6,[7], 8]

console.log(getFlatArr(arr5, 3))
// [1, 2, 3, 4, 5, 6, 7, 8]

上述代码，首先创建一个新的数组result，然后使用自调用函数，传入原数组和深度大小，使用foreach进行循环，然后判断循环的当前项是否为数组，并且递归的深度的大小大于0，是的话就继续递归当前数组，深度减去1。否则的话就将当前元素push进新创建的数组result中，就是通过这样循环的方法，最后将原来数组中的每一项根据传入的深度大小都push进了一开始创建的新数组result中，最后返回数组result即可。

总结

到此这篇关于JavaScript中数组flat方法的使用与实现的文章就介绍到这了,更多相关js数组flat方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript中判断数据类型的实用方法总结
最近项目中有不少地方需要判断数据类型,但是判断数据类型也有好几种方法,并且每种方法判断的数据类型也有局限性,所以本文就来为大家总结一下js中判断数据类型的几种实用方法吧
2025-01-01
原生js实现查询天气小应用
这篇文章主要为大家详细介绍了原生js实现查询天气的小应用,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
webpack中的热刷新与热加载的区别
本篇文章主要介绍了webpack中的热刷新与热加载的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04
javascript实现时间日期的格式化的方法汇总
这篇文章主要介绍了javascript实现时间日期的格式化的方法汇总，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-08-08
JavaScript原型和原型链与构造函数和实例之间的关系详解
这篇文章主要介绍了JavaScript原型和原型链与构造函数和实例之间的关系，每个对象都连接到一个原型对象，并且它可以从中继承属性。所有通过对象字面量创建的对象都连接到object.prototype，它是JavaScript中的标配对象
2022-07-07
JS将滑动门改为选项卡（需鼠标点击）的实现方法
这篇文章主要介绍了JS将滑动门改为选项卡（需鼠标点击）的实现方法,涉及JavaScript页面元素遍历及样式替换的相关技巧,再通过onmouseover与onclick即可分别实现滑动门与选项卡两种效果,需要的朋友可以参考下
2015-09-09
JS利用ES6和ES5分别实现长整数和字节数组互转
这篇文章主要为大家详细介绍了长整数与字节数组互转的技术原理,文中提供了ES6（现代浏览器/Node.js）与ES5（兼容旧环境）两套实现方案,需要的可以参考下
2025-04-04
提高Web性能的前端优化技巧总结
这篇文章讲述可以帮助改善优化前端的技术，非常有用。主要内容有清理代码、压缩图片、压缩外部资源、使用CDN，以及一些其它方法。这些方法会为你的网站带显著的速度提升和整体性能提升。下面跟着小编一起来看下吧
2017-02-02
js自己实现一个大文件切片上传+断点续传的示例代码
本文主要介绍了js自己实现一个大文件切片上传+断点续传的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
javascript模拟的Ping效果代码（Web Ping）
JS虽然发送不了真正Ping的ICMP数据包,但Ping的本质仍然是请求/回复的时间差,HTTP自然可以实现此功能.
2011-03-03