社招前端常见面试题（附答案）

闭包

首先说明什么是闭包，闭包简单来说就是函数嵌套函数，内部函数引用来外部函数的变量，从而导致垃圾回收
机制没有把当前变量回收掉，这样的操作带来了内存泄漏的影响，当内存泄漏到一定程度会影响你的项目运行
变得卡顿等等问题。因此在项目中我们要尽量避免内存泄漏。

前端进阶面试题详细解答

AJAX

实现：利用 XMLHttpRequest

// get
const getJSON = (url) => {
   
    return new Promise((resolve, reject) => {
   
        let xhr = new XMLHttpRequest();
        // open 方法用于指定 HTTP 请求的参数: method, url, async（是否异步，默认true）
        xhr.open("GET", url, false);
        xhr.setRequestHeader('Content-Type', 'application/json');
        // onreadystatechange 属性指向一个监听函数。
        // readystatechange 事件发生时（实例的readyState属性变化），就会执行这个属性。
        xhr.onreadystatechange = function(){
   
            // 4 表示服务器返回的数据已经完全接收，或者本次接收已经失败
            if(xhr.readyState !== 4) return;
            // 请求成功，基本上只有2xx和304的状态码，表示服务器返回是正常状态
            if(xhr.status === 200 || xhr.status === 304) {
   
                // responseText 属性返回从服务器接收到的字符串
                resolve(xhr.responseText);
            }
            // 请求失败
            else {
   
                reject(new Error(xhr.responseText));
            }
        }
        xhr.send();
    });
}

// post
const postJSON = (url, data) => {
   
    return new Promise((resolve, reject) => {
   
        let xhr = new XMLHttpRequest();
        xhr.open("POST", url);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.onreadystatechange = function(){
   
            if(xhr.readyState !== 4) return;
            if(xhr.status === 200 || xhr.status === 304) {
   
                resolve(xhr.responseText);
            }
            else {
   
                reject(new Error(xhr.responseText));
            }
        }
        xhr.send(data);
    });
}

webpack配置入口出口

module.exports={
    //入口文件的配置项
    entry:{},
    //出口文件的配置项
    output:{},
    //模块：例如解读CSS,图片如何转换，压缩
    module:{},
    //插件，用于生产模版和各项功能
    plugins:[],
    //配置webpack开发服务功能
    devServer:{}
}
简单描述了一下这几个属性是干什么的。
描述一下npm run dev / npm run build执行的是哪些文件
通过配置proxyTable来达到开发环境跨域的问题，然后又可以扩展和他聊聊跨域的产生，如何跨域
最后可以在聊聊webpack的优化，例如babel-loader的优化，gzip压缩等等

发布订阅模式(事件总线)

描述：实现一个发布订阅模式，拥有 on, emit, once, off 方法

class EventEmitter {
   
    constructor() {
   
        // 包含所有监听器函数的容器对象
        // 内部结构: {msg1: [listener1, listener2], msg2: [listener3]}
        this.cache = {
   };
    }
    // 实现订阅
    on(name, callback) {
   
        if(this.cache[name]) {
   
            this.cache[name].push(callback);
        }
        else {
   
            this.cache[name] = [callback];
        }
    }
    // 删除订阅
    off(name, callback) {
   
        if(this.cache[name]) {
   
            this.cache[name] = this.cache[name].filter(item => item !== callback);
        }
        if(this.cache[name].length === 0) delete this.cache[name];
    }
    // 只执行一次订阅事件
    once(name, callback) {
   
        callback();
        this.off(name, callback);
    }
    // 触发事件
    emit(name, ...data) {
   
        if(this.cache[name]) {
   
            // 创建副本，如果回调函数内继续注册相同事件，会造成死循环
            let tasks = this.cache[name].slice();
            for(let fn of tasks) {
   
                fn(...data);
            }
        }
    }
}

数组去重

使用 indexOf/includes 实现

function unique(arr) {
   
    var res = [