0

0

js如何实现数组扁平化

月夜之吻

月夜之吻

发布时间:2025-08-13 10:17:01

|

917人浏览过

|

来源于php中文网

原创

数组扁平化是将多维数组转化为一维数组的过程,1. 可通过递归遍历并拼接元素实现;2. 使用reduce方法结合递归累积结果;3. 利用...扩展运算符与some方法循环展开数组;4. 调用es2019新增的flat()方法并传入深度参数(如infinity完全扁平化);5. 处理空值时默认保留null和undefined,需额外使用filter方法移除;6. flat()方法性能最优,尤其适合已知深度的场景;7. 所有方法均支持字符串、对象等非数字类型,但对象仍为引用类型;8. 可通过flat(depth)控制扁平化层级,实现部分降维,适用于结构化数据处理,最终应根据兼容性与性能需求选择合适方案。

js如何实现数组扁平化

数组扁平化,简单来说,就是把一个多维数组降维,变成一个一维数组。实现方式有很多,关键在于如何处理嵌套的数组。

js如何实现数组扁平化

解决方案

实现数组扁平化,可以使用递归、

reduce
方法、
...
扩展运算符,或者更现代的
flat()
方法。

js如何实现数组扁平化
  • 递归方法: 这种方式最直观,遍历数组,如果遇到数组就递归调用自身,否则就将元素添加到结果数组中。
function flatten(arr) {
  let result = [];
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      result = result.concat(flatten(arr[i])); // 递归调用
    } else {
      result.push(arr[i]);
    }
  }
  return result;
}

const nestedArray = [1, [2, [3, 4], 5], 6];
const flatArray = flatten(nestedArray);
console.log(flatArray); // 输出: [1, 2, 3, 4, 5, 6]
  • reduce
    方法:
    reduce
    可以迭代数组,并累积结果。结合递归,可以优雅地实现扁平化。
function flattenWithReduce(arr) {
  return arr.reduce((acc, val) => {
    return Array.isArray(val) ? acc.concat(flattenWithReduce(val)) : acc.concat(val);
  }, []);
}

const nestedArray = [1, [2, [3, 4], 5], 6];
const flatArray = flattenWithReduce(nestedArray);
console.log(flatArray); // 输出: [1, 2, 3, 4, 5, 6]
  • ...
    扩展运算符:
    结合
    some
    方法,可以简洁地实现扁平化。
function flattenWithSpread(arr) {
  while (arr.some(Array.isArray)) {
    arr = [].concat(...arr);
  }
  return arr;
}

const nestedArray = [1, [2, [3, 4], 5], 6];
const flatArray = flattenWithSpread(nestedArray);
console.log(flatArray); // 输出: [1, 2, 3, 4, 5, 6]
  • flat()
    方法:
    这是ES2019引入的官方方法,最简单直接。可以传入一个参数,指定扁平化的深度。如果传入
    Infinity
    ,则完全扁平化。
const nestedArray = [1, [2, [3, 4], 5], 6];
const flatArray = nestedArray.flat(Infinity);
console.log(flatArray); // 输出: [1, 2, 3, 4, 5, 6]

如何处理数组中包含空值的情况?

空值,比如

null
undefined
,在扁平化过程中需要特别处理。默认情况下,上述方法都会保留这些空值。如果需要移除它们,可以在扁平化后进行过滤。

const nestedArrayWithNull = [1, [2, null, [3, 4], undefined, 5], 6];
const flatArrayWithNull = nestedArrayWithNull.flat(Infinity);
console.log(flatArrayWithNull); // 输出: [1, 2, null, 3, 4, undefined, 5, 6]

// 移除空值
const flatArrayWithoutNull = flatArrayWithNull.filter(val => val !== null && val !== undefined);
console.log(flatArrayWithoutNull); // 输出: [1, 2, 3, 4, 5, 6]

性能比较:哪种方法效率最高?

flat()
方法通常是最快的,因为它是由浏览器引擎优化的。递归方法在处理深度嵌套的数组时可能会有性能问题,因为会产生大量的函数调用。
reduce
方法的性能也取决于数组的结构和大小。
...
扩展运算符的性能也相当不错,但不如
flat()

蝉妈妈AI
蝉妈妈AI

电商人专属的AI营销助手

下载
js如何实现数组扁平化

在实际应用中,如果数组嵌套深度已知,使用指定深度的

flat()
方法是最佳选择。如果深度未知,且需要考虑兼容性,可以考虑使用循环结合
...
扩展运算符。

如何处理数组中包含非数字类型的情况?

数组扁平化不仅仅适用于数字数组,也可以处理包含字符串、对象等其他类型的数组。上述方法都能正确处理这些情况,不会因为类型不匹配而报错。

const mixedArray = [1, "hello", [2, { name: "world" }, 3], 4];
const flatMixedArray = mixedArray.flat(Infinity);
console.log(flatMixedArray); // 输出: [1, "hello", 2, { name: "world" }, 3, 4]

需要注意的是,如果数组中包含对象,扁平化后对象仍然是引用类型,修改扁平化后的对象会影响原始数组中的对象。

扁平化特定深度的数组

有时候我们并不需要完全扁平化数组,而是只需要扁平化到特定的深度。

flat()
方法可以接受一个可选的深度参数,用于指定扁平化的层数。

const nestedArray = [1, [2, [3, [4, 5]]]];
const flatArrayDepth1 = nestedArray.flat(1);
console.log(flatArrayDepth1); // 输出: [1, 2, [3, [4, 5]]]

const flatArrayDepth2 = nestedArray.flat(2);
console.log(flatArrayDepth2); // 输出: [1, 2, 3, [4, 5]]

这个特性在处理层级结构的数据时非常有用,可以根据实际需求控制扁平化的程度。

相关专题

更多
c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

229

2023.09.22

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

434

2024.03.01

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

1435

2023.10.24

Go语言中的运算符有哪些
Go语言中的运算符有哪些

Go语言中的运算符有:1、加法运算符;2、减法运算符;3、乘法运算符;4、除法运算符;5、取余运算符;6、比较运算符;7、位运算符;8、按位与运算符;9、按位或运算符;10、按位异或运算符等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

225

2024.02.23

php三元运算符用法
php三元运算符用法

本专题整合了php三元运算符相关教程,阅读专题下面的文章了解更多详细内容。

85

2025.10.17

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

249

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

205

2023.09.04

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

1435

2023.10.24

php源码安装教程大全
php源码安装教程大全

本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

74

2025.12.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Django DRF 源码解析
Django DRF 源码解析

共21课时 | 1.4万人学习

apipost极速入门
apipost极速入门

共6课时 | 0.4万人学习

走进 ES6 新标准语法
走进 ES6 新标准语法

共15课时 | 1.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号