【JavaScript教程】数组扁平化

零 JavaScript教程评论72字数 1979阅读6分35秒阅读模式

前言

在编程的世界里,数组扁平化犹如一场巧妙的空间变换魔法,它能将深层嵌套的数组结构转化为单一层级的平面数组。就像手中的俄罗斯套娃,扁平化的过程就是将每一个小娃娃都优雅地取出,然后排列成一行。在这个变换过程中,递归、循环,以及ES6中的flat()方法,都是处理数据时的得力助手,它们使得数据处理变得更加简洁和高效,让我们不再担心在数组的多维迷宫中迷失方向。

1.初识递归

屏幕截图 2024-05-23 132014.png文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15213.html

我们这幅图清楚的给出了递归的计算过程,就是一层一层往里走,然后我们要给出初始值,就是递归的终止条件。最后往前进行回溯。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15213.html

屏幕截图 2024-05-23 132441.png文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15213.html

斐波那契数列是递归的经典例子。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15213.html

2.flat方法

屏幕截图 2024-05-23 133046.png文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15213.html

js官方打造了一个非常好用的方法,可以直接进行数组的扁平化处理,里面传递的参数是扁平化的处理层数,我们可以直接传入一个Infinity(无穷的),就是不管为多少层,我都给你处理掉。最终返回处理结果[1,2,3,4,5]文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15213.html

3.手搓一个flat方法

屏幕截图 2024-05-23 133739.png文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15213.html

在手搓这个方法之前我们先认识一下concat数组的拼接方法,作用是把后面的数组元素取出来,拿到前面数组里面去,返回拼接后的新数组,原数组都不改变。打印[1,2,3,4]和[1,2]文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15213.html

屏幕截图 2024-05-23 134034.png文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15213.html

同样我们也来聊一下数组的解构,我们可以把两个数组进行解构,然后拼接,这个和前面所讲方法的作用是一样的。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15213.html

手搓1:

ini

复制代码
const arr = [1, 2, 3, [1, 2, [4, 5]]]

function flat1(arr) {
  let res = []
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      res = res.concat(flat1(arr[i]))
    } else {
      res.push(arr[i])
    }
  }
  return res
}
console.log(flat1(arr));

手搓2:

ini

复制代码
const arr = [1, 2, 3, [1, 2, [4, 5]]]

function flat1(arr) {
  let res = []
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      res = [...res, ...flat1(arr[i])]
    } else {
      res.push(arr[i])
    }
  }
  return res
}
console.log(flat1(arr));

接下来我们一起看看,如何手搓。

  1. 首先定义一个数组。
  2. 对传入数组进行遍历。
  3. 如果这个元素属于数组,则我们先进行递归。
  4. 然后和已有数组拼接。
  5. 如果不是数组则直接推入。
  6. 最后我们直接返回。

4.toString()方法

屏幕截图 2024-05-23 141152.png

我们可以直接采用toString方法数组扁平化之后的字符串,我们将字符串转换为数组,然后处理每个元素为数字即可,但是大家也会发现这个方法是有弊端的,就是数组中出现字符串时会出现NaN。

5.reduce()方法

屏幕截图 2024-05-23 141709.png

在此之前我们先来认识一下这个方法,里面接收两个参数,而回调函数里接4个参数,通常只用前两个参数,代表之前统计值和当前值,而初始值就是我们的第二个参数。上一轮的总和返回给下一轮作为初始值,最终返回数组元素内的累加。

javascript

复制代码
const arr = [1, 2, 3, [1, 2, [4, 5]]]

function flat1(arr) {
  return arr.reduce((pre, item) => {
    return pre.concat(Array.isArray(item) ? flat1(item) : item)
  }, [])
}
console.log(flat1(arr));

我们接下来就可以看看这个方法(因为截屏原因,冒号后面接的是item)

  1. 我们对数组里面的元素采用累加。
  2. 给一个初始值[ ]。
  3. 我们判断当前元素是不是数组,如果是则递归调用,不是则返回此数。
  4. 最后取其里面的元素和上一个元素进行拼接。
  5. 返回作为下一个元素要拼接的pre。
  6. 因为是一个递归而且我们要最终值,我们必须把整体的值进行返回。

6. some()方法

屏幕截图 2024-05-23 142619.png

首先我们要知道some方法返回布尔值,判断每个值,是否至少存在一个满足表达式的结果。如果arr里面至少存在一个大于5的数,就是true

javascript

复制代码
const arr = [1, 2, 3, [1, 2, [4, 5]]]

function flat1(arr) {
  while (arr.some((item) => Array.isArray(item))) {
    arr = [].concat(...arr)
  }
  return arr
}
console.log(flat1(arr));

这个方法和之前手搓的方法本质上差不多,但是会更加方便一些。

小结

数组扁平化是编程中将复杂问题简化的一种技巧,它的目的是将嵌套多层的数组转换为单层数组。通过使用循环、递归或ES6中的flat方法,可以轻松地展开嵌套的数组,使得信息结构清晰,数据处理变得更加高效和便捷。这不仅提高了代码的可读性,也优化了执行效率。

零
  • 转载请务必保留本文链接:https://www.0s52.com/bcjc/javascriptjc/15213.html
    本社区资源仅供用于学习和交流,请勿用于商业用途
    未经允许不得进行转载/复制/分享

发表评论