Array.flat的实现方式

90 阅读 0 评论 60 点赞

我是靠谱客的博主单薄御姐，这篇文章主要介绍Array.flat的实现方式，现在分享给大家，希望可以做个参考。

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

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var flat = function(arr) {
    let res = [],
        flatMap = (arr) => {
            arr.map((element, index, array) => {
                if(Object.prototype.toString.call(element).slice(8, -1) === 'Array'){
                    flatMap(element);
                }else{
                    res.push(element);
                }
            })
        };
    flatMap(arr);
    return res;
};
console.log(flat([1,[8, 5], [6, 4, 8, [8, 3, [5, 9]]]])); // [1, 8, 5, 6, 4, 8, 8, 3, 5, 9]

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var flat = function(arr, 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(arr);
    return res;
};
console.log(flat([1,[8, 5], [6, 4, 8, [8, 3, [5, 9]]]], Infinity)); // [1, 8, 5, 6, 4, 8, 8, 3, 5, 9]
console.log(flat([1,[8, 5], [6, 4, 8, [8, 3, [5, 9]]]])); // [1, 8, 5, 6, 4, 8, [8, 3, [5, 9]]]
console.log(flat([1,[8, 5], [6, 4, 8, [8, 3, [5, 9]]]], 2)); // [1, 8, 5, 6, 4, 8, 8, 3, [5, 9]]
console.log(flat([1,[8, 5], [6, 4, 8, [8, 3, [5, 9]]]], 3)); // [1, 8, 5, 6, 4, 8, 8, 3, 5, 9]

这个时候我们再加一些判断，就可以封装成一个简单的 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]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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]