【JS、数组】flat的基本用法

flat() 是 JavaScript 数组的一个方法,用于将嵌套的数组"扁平化"到指定的深度。默认情况下,flat() 会将数组扁平化一层(即深度为 1)。也可以通过传递一个参数来指定要扁平化的深度。

基本用法

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

// 默认深度为 1
const flatArr1 = arr.flat();
console.log(flatArr1); // 输出: [1, 2, [3, [4, 5]], 6]

// 指定深度为 2
const flatArr2 = arr.flat(2);
console.log(flatArr2); // 输出: [1, 2, 3, [4, 5], 6]

// 指定深度为 Infinity,完全扁平化
const flatArrInfinity = arr.flat(Infinity);
console.log(flatArrInfinity); // 输出: [1, 2, 3, 4, 5, 6]

参数

  • depth (可选):指定要扁平化的深度。默认值为 1。如果设置为 Infinity,则会将数组完全扁平化,直到所有嵌套的数组都被展开。

示例

示例 1: 默认深度为 1
javascript 复制代码
const arr1 = [1, [2, 3], [4, [5, 6]]];
const flatArr1 = arr1.flat();
console.log(flatArr1); // 输出: [1, 2, 3, 4, [5, 6]]
示例 2: 指定深度为 2
javascript 复制代码
const arr2 = [1, [2, [3, 4]], [5, 6]];
const flatArr2 = arr2.flat(2);
console.log(flatArr2); // 输出: [1, 2, 3, 4, 5, 6]
示例 3: 完全扁平化
javascript 复制代码
const arr3 = [1, [2, [3, [4, [5, 6]]]]];
const flatArr3 = arr3.flat(Infinity);
console.log(flatArr3); // 输出: [1, 2, 3, 4, 5, 6]

注意事项

  • flat() 方法不会改变原数组,而是返回一个新的扁平化后的数组。
  • 如果数组中包含非数组元素,flat() 会保留这些元素。

兼容性

flat() 方法在现代浏览器和 Node.js 中都得到了广泛支持,但在一些较旧的环境中可能不可用。如果你需要在不支持 flat() 的环境中使用它,可以使用 polyfill 或其他替代方法。

替代方法

如果你需要在不支持 flat() 的环境中实现类似的功能,可以使用递归函数:

javascript 复制代码
function flattenArray(arr, depth = 1) {
  return arr.reduce((acc, val) => {
    if (Array.isArray(val) && depth > 0) {
      acc.push(...flattenArray(val, depth - 1));
    } else {
      acc.push(val);
    }
    return acc;
  }, []);
}

const arr = [1, [2, [3, [4, 5]]], 6];
const flatArr = flattenArray(arr, Infinity);
console.log(flatArr); // 输出: [1, 2, 3, 4, 5, 6]
相关推荐
charlie11451419113 分钟前
Android开发——初步了解AndroidManifest.xml
android·xml·开发语言·学习·安卓·安全架构
Edward.W26 分钟前
用 Go + HTML 实现 OpenHarmony 投屏(hdckit-go + WebSocket + Canvas 实战)
开发语言·后端·golang
努力努力再努力wz38 分钟前
【c++进阶系列】:万字详解AVL树(附源码实现)
java·运维·开发语言·c++·redis
CHANG_THE_WORLD1 小时前
C++并发编程指南 std::promise 介绍与使用
java·开发语言·c++·promise
egoist20231 小时前
[linux仓库]性能加速的隐形引擎:深度解析Linux文件IO中的缓冲区奥秘
linux·运维·开发语言·缓存·缓冲区
Dear.爬虫1 小时前
Golang的协程调度器原理
开发语言·后端·golang
Mintopia1 小时前
实时 AIGC:Web 端低延迟生成的技术难点与突破
前端·javascript·aigc
Mintopia1 小时前
Next.js 性能优化双绝:Image 与 next/font 的底层修炼手册
前端·javascript·next.js
小菜全2 小时前
使用UniApp实现下拉框和表格组件页面
开发语言·前端·javascript·elementui·前端框架·html
编码浪子2 小时前
趣味学RUST基础篇(构建命令行程序1)
开发语言·后端·rust