Array.flat的实现方式

た入场券 2022-03-16 03:42 144阅读 0赞

`Array.flat()` 方法会递归到指定深度将所有子数组连接，并返回一个新数组。具体可查看[Array.prototype.flat()][Array.prototype.flat] 。

那我们先在先来模仿将数组按照 `Infinity` 深度进行展开，先不考虑深度问题，实现方式如下：

这个时候我们再考虑深度问题，实现方式如下：

这个时候我们再加一些判断，就可以封装成一个简单的 Polyfill ：

if (!Array.prototype.flat) { 
        Object.defineProperty(Array.prototype, 'flat', { 
            value: function(depth) { 
                let res = [],
                    depthArg = depth || 1,
                    depthNum = 0,
                    flatMap = (arr) => { 
                        arr.map((element, index, array) => { 
                            if(Object.prototype.toString.call(element).slice(8, -1) === 'Array'){ 
                                if(depthNum < depthArg){ 
                                    depthNum++;
                                    flatMap(element);
                                }else{ 
                                    res.push(element);
                                }
                            }else{ 
                                res.push(element);
                                if(index === array.length -1) depthNum = 0;
                            }
                        });
                    };
                flatMap(this);
                return res;
            }
        });
    }
    console.log([1,[8, 5], [6, 4, 8, [8, 3, [5, 9]]]].flat(Infinity)); // [1, 8, 5, 6, 4, 8, 8, 3, 5, 9]
    console.log([1,[8, 5], [6, 4, 8, [8, 3, [5, 9]]]].flat()); // [1, 8, 5, 6, 4, 8, [8, 3, [5, 9]]]
    console.log([1,[8, 5], [6, 4, 8, [8, 3, [5, 9]]]].flat(2)); // [1, 8, 5, 6, 4, 8, 8, 3, [5, 9]]
    console.log([1,[8, 5], [6, 4, 8, [8, 3, [5, 9]]]].flat(3)); // [1, 8, 5, 6, 4, 8, 8, 3, 5, 9]

更新相关信息可查看 [practical-code-snippet][] 。

[Array.prototype.flat]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flat
[practical-code-snippet]: https://fxss5201.github.io/practical-code-snippet/