iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript中数组flat方法的使用与实现方法
  • 453
分享到

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

2024-04-02 19:04:59 453人浏览 泡泡鱼
摘要

目录前言语法参数返回值使用示例方法实现1、当只扁平化一层的时候2、当数组展平的层数为最大层时3、数组扁平化使用参数控制扁平的深度总结前言 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方法内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JavaScript中数组flat方法的使用与实现方法

本文链接: https://www.lsjlt.com/news/165668.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript中数组flat方法的使用与实现方法
    目录前言语法参数返回值使用示例方法实现1、当只扁平化一层的时候2、当数组展平的层数为最大层时3、数组扁平化使用参数控制扁平的深度总结前言 flat() 方法会按照一个可指定的深度递归...
    99+
    2022-11-13
  • JavaScript如何使用reduce实现数组的flat方法
    这篇文章主要介绍了JavaScript如何使用reduce实现数组的flat方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大...
    99+
    2022-10-19
  • JavaScript中如何使用flat()实现数组扁平化
    小编给大家分享一下JavaScript中如何使用flat()实现数组扁平化,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!数组扁平...
    99+
    2022-10-19
  • javascript中数组与对象的使用方法区别
    目录一、JS声明对象或数组二、数组”(array)和“对象”(object)两者都可以用来表示数据的集合。三、数组和对象的使用方法区别:(1)创建...
    99+
    2022-12-14
    js数组 js对象
  • JavaScript数组reduce()方法的语法与实例解析
    前言 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。 reduce 为数组中的每一个元素依次执行回调函数...
    99+
    2022-11-12
  • JavaScript中如何使用reduce实现数组map方法
    这篇文章主要介绍了JavaScript中如何使用reduce实现数组map方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家...
    99+
    2022-10-19
  • javascript实现json转数组的方法
    这篇文章给大家分享的是有关javascript实现json转数组的方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。javascript实现json转数组的方法是通过jsonStr实现,代码为【var jsonS...
    99+
    2023-06-14
  • JavaScript如何使用reduce实现数组filter方法
    这篇文章主要为大家展示了“JavaScript如何使用reduce实现数组filter方法”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript如何...
    99+
    2022-10-19
  • javascript数组中的map方法和filter方法
    目录一、map方法1编辑器2代码部分3运行结果二、filter方法 1编辑器2代码3运行结果一、map方法 1编辑器 编辑器搞出来 一起研究研究数组中的map方法: 2代...
    99+
    2022-11-13
  • javascript数组中的reduce方法和pop方法
    目录一、reduce方法1直接vs打开2代码部分3运行结果二、pop方1直接vs打开2代码部分3运行结果前言: 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说fo...
    99+
    2022-11-13
  • javascript数组中的concat方法和splice方法
    目录一、concat方法1直接vs打开2代码块3运行结果二、splice方法1代码部分2运行结果前言: 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说concat...
    99+
    2022-11-13
  • javascript数组中的slice方法和join​​方法
    目录一、slice​​方法1编辑器部分2代码部分3运行结果二、join​​方法1编辑器2代码部分3运行结果前言: 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说s...
    99+
    2022-11-13
  • JavaScript中array.reduce()数组方法的四种使用实例
    目录1、累加和累积乘法2、获取一个数组的最大值和最小值3、计算数组中元素出现的频率4、多个数组的展平总结Array.prototype.reduce() 是数组中最强大的方法之一,也...
    99+
    2022-11-13
  • javascript数组中的findIndex方法
    目录1findIndex()简单介绍2编辑器3代码部分4运行结果5总结1findIndex()简单介绍 findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元...
    99+
    2022-11-13
  • javascript数组中的lastIndexOf方法
    目录1前言​​2编辑器打开​​3代码部分4运行结果5总结1前言 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说lastIndexOf方法,lastIndexOf(...
    99+
    2022-11-13
  • JavaScript数组中迭代方法怎么实现
    今天小编给大家分享一下JavaScript数组中迭代方法怎么实现的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我...
    99+
    2022-10-19
  • JavaScript中ES5如何实现数组map方法
    这篇文章将为大家详细讲解有关JavaScript中ES5如何实现数组map方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。ES5 实现数组 map 方法值得一提的是,map 的第二个参数为第一个参数回调...
    99+
    2023-06-27
  • javascript学数组中的foreach方法和some方法
    目录一、foreach方法1直接vs打开2代码部分二、some方法1直接vs打开2代码部分3总结在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说foreach和so...
    99+
    2022-11-13
  • javascript如何使用数组中的sort方法
    这篇文章主要为大家展示了“javascript如何使用数组中的sort方法”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“javascript如何使用数组中的so...
    99+
    2022-10-19
  • JavaScript如何使用数组方法
    小编给大家分享一下JavaScript如何使用数组方法,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!简介说明方法简介join():用指定的分隔符将数组每一项拼接为字符串push():向数组的末尾添加新元素pop():删除数...
    99+
    2023-06-22
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作