万字长文，20-50K前端工程师部分面试题集锦 - 附答案

​ 现在20-50K的招聘，我们先看看是什么要求？

蚂蚁金服招聘要求：

虾皮招聘：

腾讯：

明源云：

毫无疑问，这些公司都是招聘的大前端技术栈的职位，之前文章提到过2020年大前端最理想的技术栈，其实真的弄得很明白那些，出去面试基本上不会有什么问题。

小提示：如果发现小公司面试套你的技术和架构，迅速结束，开出天价薪资走人

下面正式公布部分面试题，以及答案

• 出于对各个公司的尊重，不公布是哪家公司的面试题，以及面试技巧。只公布部分面试题和答案，以及分析问题的角度，学习方向，面试中考察的不仅仅技术深度，还有广度，每个人不可能技术面面俱到，前端学习的东西太多，忘掉一部分也是正常。记住核心就是关键，这些都是一些基础面试题，比较通用。

• 一般面试都会要做题，据我经验看，一般都是6页，三张纸。考察的大部分是前端技术栈，原生Javascript的内容，当然，有的外企的面试体验更棒，技术一面规定是半个小时，国内公司可能有5轮，甚至6、7轮。

• 面试题我会归纳成原生JavaScript、Node.js、React、Vue、通信协议、运维部署、CI自动化部署、Docker、性能优化、前端架构设计、后端常见的架构等来分开写

原生JavaScript篇

以下代码跟我写的有点不一样，但是大致差不多，最终都是在纸上手写实现

手写一个深拷贝：

此处省略了一些其他类型的处理，可以在题目旁注释、

手写一个reduce:

Array.isArray的原理：

手写一个的防抖函数：

手写一个Promise:

const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";
​
function MyPromise(fn) {
    const self = this;
    self.value = null;
    self.error = null;
    self.status = PENDING;
    self.onFulfilledCallbacks = [];
    self.onRejectedCallbacks = [];
​
    function resolve(value) {
        if (value instanceof MyPromise) {
            return value.then(resolve, reject);
        }
        if (self.status === PENDING) {
            setTimeout(() => {
                self.status = FULFILLED;
                self.value = value;
                self.onFulfilledCallbacks.forEach((callback) => callback(self.value));
            }, 0)
        }
    }
​
    function reject(error) {
        if (self.status === PENDING) {
            setTimeout(function() {
                self.status = REJECTED;
                self.error = error;
                self.onRejectedCallbacks.forEach((callback) => callback(self.error));
            }, 0)
        }
    }
    try {
        fn(resolve, reject);
    } catch (e) {
        reject(e);
    }
}
​
function resolvePromise(bridgepromise, x, resolve, reject) {
    if (bridgepromise === x) {
        return reject(new TypeError('Circular reference'));
    }
​
    let called = false;
    if (x instanceof MyPromise) {
        if (x.status === PENDING) {
            x.then(y => {
                resolvePromise(bridgepromise, y, resolve, reject);
            }, error => {
                reject(error);
            });
        } else {
            x.then(resolve, reject);
        }
    } else if (x != null && ((typeof x === 'object') || (typeof x === 'function'))) {
        try {
            let then = x.then;
            if (typeof then === 'function') {
                then.call(x, y => {
                    if (called) return;
                    called = true;
                    resolvePromise(bridgepromise, y, resolve, reject);
                }, error => {
                    if (called) return;
                    called = true;
                    reject(error);
                })
            } else {
                resolve(x);
            }
        } catch (e) {
            if (called) return;
            called = true;
            reject(e);
        }
    } else {
        resolve(x);
    }
}
​
MyPromise.prototype.then = function(onFulfilled, onRejected) {
    const self = this;
    let bridgePromise;
    onFulfilled = typeof onFulfilled === "function" ? onFulfilled : value => value;
    onRejected = typeof onRejected === "function" ? onRejected : error => { throw error };
    if (self.status === FULFILLED) {
        return bridgePromise = new MyPromise((resolve, reject) => {
            setTimeout(() => {
                try {