这是我参与更文挑战的第 6 天，活动详情查看更文挑战

这个系列也没啥花头，就是来整平时面试的一些手写函数，考这些简单实现的好处是能看出基本编码水平，且占用时间不长，更全面地看出你的代码实力如何。一般不会出有很多边界条件的问题，那样面试时间不够用，考察不全面。

平时被考到的 api 如果不知道或不清楚，直接问面试官就行， api 怎么用这些 Google 下谁都能马上了解的知识也看不出水平。关键是在实现过程，和你的编码状态、习惯、思路清晰程度等。

注意是简单实现，不是完整实现，重要的是概念清晰和实现思路清晰，建议先解释清除概念 => 写用例 => 写伪代码 => 再实现具体功能，再优化，一步步来。

16. Array.flat

是什么

MDN: Array.prototype.flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

关键点有这几个

就是数组拍平
可指定深度
返回一个新数组

这个跟上个去重是类似的工具方法，了解即可。

语法

var newArray = arr.flat([depth])

参数

depth
- 可选的 指定要提取嵌套数组的结构深度，默认值为 1。
返回值
- 一个包含将数组与子数组中所有元素的新数组。

我们用下面的测试用例作为例子，看看 flat 方法能做什么

简单手写实现

实现

写个测试用例先

let arr1 = [1, 2, [3, 4]];
console.log(arr1.flat())
// [1, 2, 3, 4]

let arr2 = [1, 2, [3, 4, [5, 6]]];
console.log(arr2.flat())
// [1, 2, 3, 4, [5, 6]]

let arr3 = [1, 2, [3, 4, [5, 6]]];
console.log(arr3.flat(2))
// [1, 2, 3, 4, 5, 6]

//使用 Infinity，可展开任意深度的数组
let arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
console.log(arr4.flat(Infinity))
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

// flat() 方法会移除数组中的空项:
var arr5 = [1, 2, , 4, 5];
console.log(arr5.flat())
// [1, 2, 4, 5]
复制代码

实现主逻辑

实现思路其实很简单，就是遍历这个数组，发现还是数组的话，就递归继续拍平。

如果对 reduce 不熟的同学 MDN 传送门

function myFlat(arr, deep = 1) {
    if (deep > 0) {
        return arr.reduce((acc, cur) => {
            // 如果当前元素是数组的话，继续递归
            if (Array.isArray(cur)) {
                acc = acc.concat(myFlat(cur, deep - 1))
            } else {
                acc = acc.concat(cur);
            }
            return acc;
        }, [])
    } else {
        return arr.slice()
    }
};


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

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

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

//使用 Infinity，可展开任意深度的数组
let arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
console.log(myFlat(arr4, Infinity))
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
复制代码

如果不考虑传入深度，可以直接全部打平

如果对 some 不熟的同学 MDN 传送门

function myFlat(arr){
    // 发现还有数组存在 some 会返回 true
    while(arr.some(item => Array.isArray(item))) {
        // 那么就打平一层
        arr = [].concat(...arr);
    }
    return arr;
}

let arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
console.log(myFlat(arr4))
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
复制代码

17. Array.of

是什么

MDN: Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

语法

Array.of(element0[, element1[, ...[, elementN]]])

参数

elementN
- 任意个参数，将按顺序成为返回数组中的元素。

新的 Array 实例。

简单手写实现

实现

写个测试用例先

Array.of(1);         // [1]
Array.of(1, 2, 3);   // [1, 2, 3]
Array.of(undefined); // [undefined]
复制代码

实现方式, 就这么简单，看完前面的这个就太好理解了

let myArrayOf = function() {
    return Array.prototype.slice.call(arguments);
    // 或者 [].slice.call(arguments);
};

console.log(myArrayOf(1))            // [ 1 ]
console.log(myArrayOf(1, 2, 3))      // [ 1, 2, 3 ]
console.log(myArrayOf(undefined))    // [ undefined ]
复制代码

哈哈今天周天，又要装修，就写的简单点了主要是 ES6 的一些新 API 的复习，明天是算法, 另外上篇的 bind 非常建议看看, 你会对 this, 闭包 等有深入理解, this 等详细内容在核心概念篇, 就是下面推荐中。

另外向大家着重推荐下另一个系列的文章，非常深入浅出，对前端进阶的同学非常有作用，墙裂推荐！！！核心概念和算法拆解系列记得点赞哈

今天就到这儿，想跟我一起刷题的小伙伴可以加我微信哦点击此处交个朋友
Or 搜索我的微信号infinity_9368，可以聊天说地
加我暗号 “天王盖地虎” 下一句的英文，验证消息请发给我
presious tower shock the rever monster，我看到就通过，加了之后我会尽我所能帮你，但是注意提问方式，建议先看这篇文章：提问的智慧