JS --- 数组扁平化的几种处理办法

最新推荐文章于 2023-09-14 15:27:49 发布

喜欢打代码的小垃圾

最新推荐文章于 2023-09-14 15:27:49 发布

阅读量132

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45642033/article/details/109289948

版权

<!-- 数组扁平化:将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组 -->


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        const arr = [1, [2, [3, [4, 5]]], 6];

        // 方法1 --- 使用flat()
        //          flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
        //          语法：var newArray = arr.flat([depth]) ------- depth （可选） 指定要提取嵌套数组的结构深度，默认值为 1;如果是使用 Infinity，可展开任意深度的嵌套数组
        const res1 = arr.flat(Infinity);
        console.log(res1);

        //方法2 --- 使用正则 (但数据类型都会变为字符串)
        const res2 = JSON.stringify(arr).replace(/\[|\]/g, '').split(',');
        console.log(res2)

        //方法3 --- 正则改良版本
        const res3 = JSON.parse('[' + JSON.stringify(arr).replace(/\[|\]/g, '') + ']');
        console.log(res3)

        //方法4 --- 使用reduce
        //          reduce()方法接受一个函数作为累加器，数组中的每个值（从左向右）开始缩减，最终计算为一个值。对空数组是不会执行回调函数的。
        //          arr.reduce(function(prev,cur,index,arr){}, init); init初始值
        const flatten = arr => {
            return arr.reduce((pre, cur) => {
                return pre.concat(Array.isArray(cur) ? flatten(cur) : cur);
            }, []);
        }
        const res4 = flatten(arr);
        console.log(res4)

        //方法5 --- 递归
        const res5 = [];
        const fn = arr => {
            for (let i = 0; i < arr.length; i++) {
                if(Array.isArray(arr[i])){
                    fn(arr[i]);
                }else{
                    res5.push(arr[i])
                }
            }
            return res5;
        }
        console.log(fn(arr))
    </script>
</body>

</html>