手写JS 数组方法之 你不知道的 Array.Flat 方法

Flat

• 官方解释：

• 参数介绍

  

• 我们尝试一下

const arr1 = [0, 1, 2, [3, 4]];
console.log(arr1.flat()); // Expected output: Array [0, 1, 2, 3, 4]

const arr2 = [0, 1, 2, [[[3, 4]]]];
console.log(arr2.flat(2)); // Expected output: Array [0, 1, 2, Array [3, 4]]

• 以上为 Array.flat 方法的使用介绍

手写 Array.flat 方法

• 准备知识 递归

1. 添加数组方法

Array.prototype.myFlat = myFlat;

2. 使用递归知识 （这里有一个优化知识感兴趣的可以对其进行优化 再往下看优化结果）

function myFlat (forLength = 0) {
    const array = [...this]; // this = [1, 2, [3, [4, 5]]] 这里感兴趣的可以进行深拷贝处理 
    let forLen = 0;
    let result = [];
    function forIn (arrayLength = []) {
        for (let index = 0; index < arrayLength.length; index++) {
            // if 阶段可以进行优化 感兴趣欢迎分享优化内容
            if(forLength){
                if(Array.isArray(arrayLength[index]) && forLen < forLength){
                    forLen += 1;
                    forIn(arrayLength[index]);
                }else{
                    result.push(arrayLength[index]);
                }
            }else{
                if(Array.isArray(arrayLength[index])){
                    forLen += 1;
                    forIn(arrayLength[index]);
                }else{
                    result.push(arrayLength[index]);
                }
            }
        }
    }
    forIn(array);
    return result;
}

3. 使用

let valueFlat = [1, 2, [3, [4, 5]]].myFlat(); // [1,2,3,4,5]
console.log(valueFlat);

• 看到这个阶段是不是会觉得代码的世界很有意思 比如 new Object ...

优化 手写 Array.flat 函数 if 判断阶段

• 上代码
• 可以看到 对 if 执行阶段 进行了优化 是不是很神奇
• 对 eval 方法不了解的小伙伴可以看看官方的解释
• developer.mozilla.org/en-US/docs/…

function myFlat (forLength = 0) {
    const array = [...this];
    let forLen = 0;
    let result = [];
    const setResult = (data) => {
        forLen += 1;
        forIn(data);
    }
    function forIn (arrayLength = []) {
        for (let index = 0; index < arrayLength.length; index++) {
            eval(`${Array.isArray(arrayLength[index])} ${ forLength ? '&&' + (forLen < forLength) : '' } ? setResult(arrayLength[index]) : result.push(arrayLength[index]);`);
        }
    }
    forIn(array);
    return result;
}

• 以上是个人实现 Flat 的思路以及代码 如有更好的思路欢迎小伙伴们一起讨论;