js数组 “拍平”的方式

很多人不懂什么是数组拍平导致新人面试的时候面试官说数组拍平就一脸懵逼

最详细的教程来啦，全都给我准备好小本本！！！

满满干活妈妈再也不用担心我学不会了

先让我们来理解什么事拍平我们平常写代码的时候很多适合都会碰见数组嵌套的问题比如一维数组二维数组这些类似于这种：

数组拍平指的是将多维数组转换为一维数组；以下为你介绍几种常见的数组拍平方法以及手动实现的方式

第一种使用 flat方法

flat([depth=1]) 这是一个可选参数或者不写默认是拍平深度为 1 也就是处理一层数组如果传入 Infinity，则可以将任意深度的嵌套数组完全拍平。

flat 是 ES2019 引入的数组方法，它可以直接将多维数组拍平。可以传入一个参数指定拍平的深度，若传入 Infinity 则可以将任意深度的嵌套数组完全拍平。

我们去控制台看一下打印出来的结果

List 数组是我们没有使用过flat的原始数组，而arr是我们使用过flat的数组打印结果清晰明了

depth=1 这是depth指定拍平深度

depth 我们看一下这个打印结果

哈哈哈哈哈哈是不是简单到你们了臭宝子们

但是但是！！！它是存在缺点的哦

flat() 方法是 ES2019（ES10）引入的数组方法，大部分现代浏览器都支持该方法，但在一些旧版本浏览器以及特定的浏览器环境中可能不支持。以下是各浏览器支持情况的详细说明：

桌面浏览器

Internet Explorer ：所有版本的 Internet Explorer 都不支持 flat() 方法。因为 Internet Explorer 对新的 JavaScript 特性支持较差，并且微软已经停止对其更新和维护。
Safari ：Safari 11.0 及以下版本不支持 flat() 方法。从 Safari 12.0 开始支持该方法。
Opera ：Opera 55 及以下版本不支持 flat() 方法，Opera 56 及以上版本支持。

移动浏览器

Android Browser ：Android Browser 81 及以下版本不支持 flat() 方法。不过现在 Android 系统上大多使用 Chrome 浏览器，Chrome for Android 较早版本就已经支持该方法。
Safari on iOS ：iOS 11.0 - 11.4 系统中的 Safari 不支持 flat() 方法，从 iOS 12.0 开始支持。

检测与兼容处理

如果你需要在可能不支持 flat() 方法的环境中使用数组拍平功能，可以使用以下方式检测并进行兼容处理：

javascript

ini 复制代码

if (!Array.prototype.flat) {
    Array.prototype.flat = function(depth = 1) {
        let result = [];
        function flatten(arr, currentDepth) {
            arr.forEach(item => {
                if (Array.isArray(item) && currentDepth > 0) {
                    flatten(item, currentDepth - 1);
                } else {
                    result.push(item);
                }
            });
        }
        flatten(this, depth);
        return result;
    };
}

// 使用示例
const nestedArray = [1, [2, [3, 4]]];
const flattenedArray = nestedArray.flat(Infinity);
console.log(flattenedArray);

这段代码会先检查 Array.prototype 上是否存在 flat 方法，如果不存在则手动实现该方法，从而保证在不支持 flat() 方法的浏览器中也能正常使用数组拍平功能。

没关系咱们来看第二种方法'递归'

对于初学js的臭宝子们可能有一丢丢丢丢的难理解所以我就用最简单的方式呈现出来了往下看

看不懂的宝子们别着急我一行一行的给你们解释
JavaScript

js 复制代码

    // 使用 forEach 方法遍历传入的数组 list
    list.forEach((item) => {
        // 检查当前元素 item 是否为数组
        if (Array.isArray(item)) {
            // 如果 item 是数组，则递归调用 filters 函数处理该子数组
            // 并将处理结果通过 concat 方法合并到 result 数组中
            result = result.concat(filters(item));
            // 打印当前的 result 数组，方便调试查看中间结果
            console.log(result);
        } else {
            // 如果 item 不是数组，则直接将其添加到 result 数组末尾
            result.push(item);
        }
    });

    // 返回扁平化后的数组 result
    return result;
}

Okk 看一下打印效果

哇卡卡还有一种方法哦但是不建议使用
还有一种就是使用 `toString` 和 `split` 方法但是这种方法仅适用于数组元素为基本类型的情况

先将数组转换为字符串，再将字符串按逗号分割成数组，最后将数组元素转换回原来的类型。

还是推荐要么手动递归要么使用 flat 方法个人的话还是递归使用的比较多看情况场景不同采用不同的方法

Okk 看一下打印效果 okk 这期就到这里了宝子们还有什么不懂的评论区告诉我哦拜拜！！

js数组 “拍平”的方式

桌面浏览器

移动浏览器

检测与兼容处理

没关系 咱们来看第二种方法'递归'

没关系咱们来看第二种方法'递归'