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

闭包

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

前端进阶面试题详细解答

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 = [

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！