美文网首页
JS中四种实现数组拍平(扁平化)的常用方法

JS中四种实现数组拍平(扁平化)的常用方法

作者: 硅谷干货 | 来源:发表于2024-03-08 17:50 被阅读0次

什么叫数组拍平?

概念很简单,意思是将一个“多维”数组降维,比如:

// 原数组是一个“三维”数组
const array = [1, 2, [3, 4, [5, 6], 7], 8, 9]

// 可以降成二维
newArray1 = [1, 2, 3, 4, [5, 6], 7, 8, 9]

// 也可以降成一维
newArray2 = [1, 2, 3, 4, 5, 6, 7, 8, 9]

数组拍平也称数组扁平化、数组降维,以下四种方式是我总结的常用方法,同学们直接拷贝可用。

while遍历

const arr1 = [1, 2, 3, [4, 5, [7, 8]]];
const flatten = function (arr) {
  while (arr.some((v) => Array.isArray(v))) {
    arr = [].concat(...arr);
  }
  return arr;
};
console.log(flatten(arr1));

map遍历

const arr2 = [1, 2, 3, [4, 5, [7, 8]]];
const flatten2 = function (arr) {
  return [].concat(
    ...arr.map((v) => (Array.isArray(v) ? flatten2(v) : v))
  );
};
console.log(flatten2(arr2));

reduce遍历

const arr3 = [-1, [0, 1], [2, 3], [4, [5, 6, 7]]];
function flatten3(arr) {
  return arr.reduce(
    (pre, cur) => pre.concat(Array.isArray(cur) ? flatArr3(cur) : cur),
    []
  );
}
console.log(flatten3(arr2));

reduce遍历

const arr4 = [-1, [0, 1], [2, 3], [4, [5, 6, 7]]];
const flatArr = arr4.flat(Infinity);
console.log(flatArr);

同学们验证之后感觉怎么样,都是一句代码搞定,便捷而高效,如果您有更牛掰的方式,也欢迎留言补充。

相关文章

  • JS 数组扁平化的5种方式

    什么是数组扁平化 数组扁平化是指将一个多维数组变为一维数组 数据准备 实现方法一 实现方法二 实现方法三 实现方法...

  • 手写代码系列

    深拷贝 html转码 手写promise.all 有哪些实现数组扁平化的方法 原生js 运用flat方法 redu...

  • 2022-03-16

    js常用方法(数组、字符串) js的四种排序方法 你知道v-model的原理吗?说说看 为什么在v-for中的ke...

  • 从 前端算法 到 js深度学习

    分享一些常用的数组方法: 压平数组(Array.prototype.contact的妙用) 数组拍平与迭代器的运用...

  • 封装常用数组操作函数

    1. 数组扁平化 方法一 : 递归迭代数组 方法二 : 通过js原生 falt方法展开数组 方法三 通过正则...

  • 用JavaScript实现的5个常见函数

    数组扁平化 数组扁平化有很多方法,但最终最好的方法就是递归,实现一个指定深度的扁平化方法,这样基本的套路都会了解。...

  • js实现数组扁平化

    js实现数组扁平化 数组的扁平化,就是将一个嵌套多层的数组array(嵌套可以是任何层数)转换为只有一层的额数组。...

  • 数组扁平化 Flat() 方法的原理

    数组扁平化:就是讲多维数组转换为一维数组常用的方法有:flat()、reduce、toString & spl、j...

  • js基础了解

    js数组常用遍历方法使用: js数组常用操作方法使用: 基本逻辑运算: 基本字符串操作方法:

  • 数组常用方法

    数组常用方法 一、js数组常用方法: 1、join() Array.join() 方法将数组中所有元素都转换成字...

网友评论

      本文标题:JS中四种实现数组拍平(扁平化)的常用方法

      本文链接:https://www.haomeiwen.com/subject/hpqyzdtx.html