大厂面试题分享 面试题库

前端面试题库 （面试必备）   推荐：★★★★★

地址：前端面试题库

1. 实现一个new操作符

new操作符做了这些事：

• 它创建了一个全新的对象。
• 它会被执行[[Prototype]]（也就是__proto__）链接。
• 它使this指向新创建的对象。。
• 通过new创建的每个对象将最终被[[Prototype]]链接到这个函数的prototype对象上。
• 如果函数没有返回对象类型Object(包含Functoin, Array, Date, RegExg, Error)，那么new表达式中的函数调用将返回该对象引用。

function New(func) {var res = {};if (func.prototype !== null) {res.__proto__ = func.prototype;}var ret = func.apply(res, Array.prototype.slice.call(arguments, 1));if ((typeof ret === "object" || typeof ret === "function") && ret !== null) {return ret;}return res;
}
var obj = New(A, 1, 2);
// equals to
var obj = new A(1, 2);
复制代码

2. 实现一个JSON.stringify

JSON.stringify(value[, replacer [, space]])：

• Boolean | Number| String 类型会自动转换成对应的原始值。
• undefined、任意函数以及symbol，会被忽略（出现在非数组对象的属性值中时），或者被转换成 null（出现在数组中时）。
• 不可枚举的属性会被忽略
• 如果一个对象的属性值通过某种间接的方式指回该对象本身，即循环引用，属性也会被忽略。

function jsonStringify(obj) {let type = typeof obj;if (type !== "object") {if (/string|undefined|function/.test(type)) {obj = '"' + obj + '"';}return String(obj);} else {let json = []let arr = Array.isArray(obj)for (let k in obj) {let v = obj[k];let type = typeof v;if (/string|undefined|function/.test(type)) {v = '"' + v + '"';} else if (type === "object") {v = jsonStringify(v);}json.push((arr ? "" : '"' + k + '":') + String(v));}return (arr ? "[" : "{") + String(json) + (arr ? "]" : "}")}
}
jsonStringify({x : 5}) // "{"x":5}"
jsonStringify([1, "false", false]) // "[1,"false",false]"
jsonStringify({b: undefined}) // "{"b":"undefined"}"
复制代码

3. 实现一个JSON.parse

JSON.parse(text[, reviver])

用来解析JSON字符串，构造由字符串描述的JavaScript值或对象。提供可选的reviver函数用以在返回之前对所得到的对象执行变换(操作)。

3.1 第一种：直接调用 eval

function jsonParse(opt) {return eval('(' + opt + ')');
}
jsonParse(jsonStringify({x : 5}))
// Object { x: 5}
jsonParse(jsonStringify([1, "false", false]))
// [1, "false", falsr]
jsonParse(jsonStringify({b: undefined}))
// Object { b: "undefined"}
复制代码

避免在不必要的情况下使用 eval，eval() 是一个危险的函数， 他执行的代码拥有着执行者的权利。如果你用 eval()运行的字符串代码被恶意方（不怀好意的人）操控修改，您最终可能会在您的网页/扩展程序的权限下，在用户计算机上运行恶意代码。

它会执行JS代码，有XSS漏洞。

如果你只想记这个方法，就得对参数json做校验。

var rx_one = /^[\],:{}\s]*$/;
var rx_two = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g;
var rx_three = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g;
var rx_four = /(?:^|:|,)(?:\s*\[)+/g;
if (rx_one.test(json.replace(rx_two, "@").replace(rx_three, "]").replace(rx_four, ""))
) {var obj = eval("(" +json + ")");
}
复制代码

3.2 第二种：Function

来源 神奇的eval()与new Function()

核心：Function与eval有相同的字符串参数特性。

var func = new Function(arg1, arg2, ..., functionBody);

在转换JSON的实际应用中，只需要这么做。

var jsonStr = '{ "age": 20, "name": "jack" }'
var json = (new Function('return ' + jsonStr))();
复制代码

eval 与 Function 都有着动态编译js代码的作用，但是在实际的编程中并不推荐使用。

这里是面向面试编程，写这两种就够了。至于第三，第四种，涉及到繁琐的递归和状态机相关原理，具体可以看：

《JSON.parse 三种实现方式》

4. 实现一个call或 apply

实现改编来源：JavaScript深入之call和apply的模拟实现 #11

call语法：

fun.call(thisArg, arg1, arg2, ...)，调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。

apply语法：

func.apply(thisArg, [argsArray])，调用一个函数，以及作为一个数组（或类似数组对象）提供的参数。

4.1 Function.call按套路实现

call核心：

• 将函数设为对象的属性
• 执行&删除这个函数
• 指定this到函数并传入给定参数执行函数
• 如果不传入参数，默认指向为 window

为啥说是套路实现呢？因为真实面试中，面试官很喜欢让你逐步地往深考虑，这时候你可以反套路他，先写个简单版的：

4.1.1 简单版

var foo = {value: 1,bar: function() {console.log(this.value)}
}
foo.bar() // 1
复制代码

4.1.2 完善版

当面试官有进一步的发问，或者此时你可以假装思考一下。然后写出以下版本：

Function.prototype.call2 = function(content = window) {content.fn = this;let args = [...arguments].slice(1);let result = content.fn(...args);delete content.fn;return result;
}
let foo = {value: 1
}
function bar(name, age) {console.log(name)console.log(age)console.log(this.value);
}
bar.call2(foo, 'black', '18') // black 18 1
复制代码

4.2 Function.apply的模拟实现

apply()的实现和call()类似，只是参数形式不同。直接贴代码吧：

Function.prototype.apply2 = function(context = window) {context.fn = thislet result;// 判断是否有第二个参数if(arguments[1]) {result = context.fn(...arguments[1])} else {result = context.fn()}delete context.fnreturn result
}
复制代码

5. 实现一个Function.bind()

bind()方法:

会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，之后的一序列参数将会在传递的实参前传入作为它的参数。(来自于 MDN )

此外，bind实现需要考虑实例化后对原型链的影响。

Function.prototype.bind2 = function(content) {if(typeof this != "function") {throw Error("not a function")}// 若没问参数类型则从这开始写let fn = this;let args = [...arguments].slice(1);let resFn = function() {return fn.apply(this instanceof resFn ? this : content,args.concat(...arguments) )}function tmp() {}tmp.prototype = this.prototype;resFn.prototype = new tmp();return resFn;
}
复制代码

6. 实现一个继承

寄生组合式继承

一般只建议写这种，因为其它方式的继承会在一次实例中调用两次父类的构造函数或有其它缺点。

核心实现是：用一个 F 空的构造函数去取代执行了 Parent 这个构造函数。

function Parent(name) {this.name = name;
}
Parent.prototype.sayName = function() {console.log('parent name:', this.name);
}
function Child(name, parentName) {Parent.call(this, parentName);  this.name = name;
}
function create(proto) {function F(){}F.prototype = proto;return new F();
}
Child.prototype = create(Parent.prototype);
Child.prototype.sayName = function() {console.log('child name:', this.name);
}
Child.prototype.constructor = Child;var parent = new Parent('father');
parent.sayName();    // parent name: fathervar child = new Child('son', 'father');
复制代码

7. 实现一个JS函数柯里化

什么是柯里化？

在计算机科学中，柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数且返回结果的新函数的技术。

函数柯里化的主要作用和特点就是参数复用、提前返回和延迟执行。

7.1 通用版

function curry(fn, args) {var length = fn.length;var args = args || [];return function(){newArgs = args.concat(Array.prototype.slice.call(arguments));if (newArgs.length < length) {return curry.call(this,fn,newArgs);}else{return fn.apply(this,newArgs);}}
}function multiFn(a, b, c) {return a * b * c;
}var multi = curry(multiFn);multi(2)(3)(4);
multi(2,3,4);
multi(2)(3,4);
multi(2,3)(4);
复制代码

7.2 ES6骚写法

const curry = (fn, arr = []) => (...args) => (arg => arg.length === fn.length? fn(...arg): curry(fn, arg)
)([...arr, ...args])let curryTest=curry((a,b,c,d)=>a+b+c+d)
curryTest(1,2,3)(4) //返回10
curryTest(1,2)(4)(3) //返回10
curryTest(1,2)(3,4) //返回10
复制代码

8. 手写一个Promise(中高级必考)

我们来过一遍Promise/A+规范：

• 三种状态pending| fulfilled(resolved) | rejected
• 当处于pending状态的时候，可以转移到fulfilled(resolved)或者rejected状态
• 当处于fulfilled(resolved)状态或者rejected状态的时候，就不可变。

1. 必须有一个then异步执行方法，then接受两个参数且必须返回一个promise：

// onFulfilled 用来接收promise成功的值
// onRejected 用来接收promise失败的原因
promise1=promise.then(onFulfilled, onRejected);
复制代码

8.1 Promise的流程图分析

来回顾下Promise用法：

var promise = new Promise((resolve,reject) => {if (操作成功) {resolve(value)} else {reject(error)}
})
promise.then(function (value) {// success
},function (value) {// failure
})
复制代码

8.2 面试够用版

来源：实现一个完美符合Promise/A+规范的Promise

function myPromise(constructor){let self=this;self.status="pending" //定义状态改变前的初始状态self.value=undefined;//定义状态为resolved的时候的状态self.reason=undefined;//定义状态为rejected的时候的状态function resolve(value){//两个==="pending"，保证了状态的改变是不可逆的if(self.status==="pending"){self.value=value;self.status="resolved";}}function reject(reason){//两个==="pending"，保证了状态的改变是不可逆的if(self.status==="pending"){self.reason=reason;self.status="rejected";}}//捕获构造异常try{constructor(resolve,reject);}catch(e){reject(e);}
}
复制代码

同时，需要在myPromise的原型上定义链式调用的then方法：

myPromise.prototype.then=function(onFullfilled,onRejected){let self=this;switch(self.status){case "resolved":onFullfilled(self.value);break;case "rejected":onRejected(self.reason);break;default:       }
}
复制代码

测试一下：

var p=new myPromise(function(resolve,reject){resolve(1)});
p.then(function(x){console.log(x)})
//输出1
复制代码

8.3 大厂专供版

直接贴出来吧，这个版本还算好理解

const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";function Promise(excutor) {let that = this; // 缓存当前promise实例对象that.status = PENDING; // 初始状态that.value = undefined; // fulfilled状态时 返回的信息that.reason = undefined; // rejected状态时 拒绝的原因that.onFulfilledCallbacks = []; // 存储fulfilled状态对应的onFulfilled函数that.onRejectedCallbacks = []; // 存储rejected状态对应的onRejected函数function resolve(value) { // value成功态时接收的终值if(value instanceof Promise) {return value.then(resolve, reject);}// 实践中要确保 onFulfilled 和 onRejected 方法异步执行，且应该在 then 方法被调用的那一轮事件循环之后的新执行栈中执行。setTimeout(() => {// 调用resolve 回调对应onFulfilled函数if (that.status === PENDING) {// 只能由pending状态 => fulfilled状态 (避免调用多次resolve reject)that.status = FULFILLED;that.value = value;that.onFulfilledCallbacks.forEach(cb => cb(that.value));}});}function reject(reason) { // reason失败态时接收的拒因setTimeout(() => {// 调用reject 回调对应onRejected函数if (that.status === PENDING) {// 只能由pending状态 => rejected状态 (避免调用多次resolve reject)that.status = REJECTED;that.reason = reason;that.onRejectedCallbacks.forEach(cb => cb(that.reason));}});}// 捕获在excutor执行器中抛出的异常// new Promise((resolve, reject) => {//     throw new Error('error in excutor')// })try {excutor(resolve, reject);} catch (e) {reject(e);}
}Promise.prototype.then = function(onFulfilled, onRejected) {const that = this;let newPromise;// 处理参数默认值 保证参数后续能够继续执行onFulfilled =typeof onFulfilled === "function" ? onFulfilled : value => value;onRejected =typeof onRejected === "function" ? onRejected : reason => {throw reason;};if (that.status === FULFILLED) { // 成功态return newPromise = new Promise((resolve, reject) => {setTimeout(() => {try{let x = onFulfilled(that.value);resolvePromise(newPromise, x, resolve, reject); // 新的promise resolve 上一个onFulfilled的返回值} catch(e) {reject(e); // 捕获前面onFulfilled中抛出的异常 then(onFulfilled, onRejected);}});})}if (that.status === REJECTED) { // 失败态return newPromise = new Promise((resolve, reject) => {setTimeout(() => {try {let x = onRejected(that.reason);resolvePromise(newPromise, x, resolve, reject);} catch(e) {reject(e);}});});}if (that.status === PENDING) { // 等待态// 当异步调用resolve/rejected时 将onFulfilled/onRejected收集暂存到集合中return newPromise = new Promise((resolve, reject) => {that.onFulfilledCallbacks.push((value) => {try {let x = onFulfilled(value);resolvePromise(newPromise, x, resolve, reject);} catch(e) {reject(e);}});that.onRejectedCallbacks.push((reason) => {try {let x = onRejected(reason);resolvePromise(newPromise, x, resolve, reject);} catch(e) {reject(e);}});});}
};
复制代码

emmm，我还是乖乖地写回进阶版吧。

9. 手写防抖(Debouncing)和节流(Throttling)

scroll 事件本身会触发页面的重新渲染，同时 scroll 事件的 handler 又会被高频度的触发, 因此事件的 handler 内部不应该有复杂操作，例如 DOM 操作就不应该放在事件处理中。 针对此类高频度触发事件问题（例如页面 scroll ，屏幕 resize，监听用户输入等），有两种常用的解决方法，防抖和节流。

9.1 防抖(Debouncing)实现

典型例子：限制 鼠标连击 触发。

一个比较好的解释是：

当一次事件发生后，事件处理器要等一定阈值的时间，如果这段时间过去后 再也没有 事件发生，就处理最后一次发生的事件。假设还差 0.01 秒就到达指定时间，这时又来了一个事件，那么之前的等待作废，需要重新再等待指定时间。

// 防抖动函数
function debounce(fn,wait=50,immediate) {let timer;return function() {if(immediate) {fn.apply(this,arguments)}if(timer) clearTimeout(timer)timer = setTimeout(()=> {fn.apply(this,arguments)},wait)}
}
复制代码

结合实例：滚动防抖

// 简单的防抖动函数
// 实际想绑定在 scroll 事件上的 handler
function realFunc(){console.log("Success");
}// 采用了防抖动
window.addEventListener('scroll',debounce(realFunc,500));
// 没采用防抖动
window.addEventListener('scroll',realFunc);
复制代码

9.2 节流(Throttling)实现

可以理解为事件在一个管道中传输，加上这个节流阀以后，事件的流速就会减慢。实际上这个函数的作用就是如此，它可以将一个函数的调用频率限制在一定阈值内，例如 1s，那么 1s 内这个函数一定不会被调用两次

简单的节流函数:

function throttle(fn, wait) {let prev = new Date();return function() { const args = arguments;const now = new Date();if (now - prev > wait) {fn.apply(this, args);prev = new Date();}}
复制代码

9.3 结合实践

通过第三个参数来切换模式。

const throttle = function(fn, delay, isDebounce) {let timerlet lastCall = 0return function (...args) {if (isDebounce) {if (timer) clearTimeout(timer)timer = setTimeout(() => {fn(...args)}, delay)} else {const now = new Date().getTime()if (now - lastCall < delay) returnlastCall = nowfn(...args)}}
}
复制代码

10. 手写一个JS深拷贝

有个最著名的乞丐版实现，在《你不知道的JavaScript（上）》里也有提及：

10.1 乞丐版

 var newObj = JSON.parse( JSON.stringify( someObj ) );
复制代码

10.2 面试够用版

function deepCopy(obj){//判断是否是简单数据类型，if(typeof obj == "object"){//复杂数据类型var result = obj.constructor == Array ? [] : {};for(let i in obj){result[i] = typeof obj[i] == "object" ? deepCopy(obj[i]) : obj[i];}}else {//简单数据类型 直接 == 赋值var result = obj;}return result;
}
复制代码

关于深拷贝的讨论天天有，这里就贴两种吧，毕竟我...

11.实现一个instanceOf

function instanceOf(left,right) {let proto = left.__proto__;let prototype = right.prototypewhile(true) {if(proto === null) return falseif(proto === prototype) return trueproto = proto.__proto__;}
}复制代码

大厂面试题分享 面试题库

前端面试题库 （面试必备）   推荐：★★★★★

地址：前端面试题库

【面试题】 「中高级前端面试」JavaScript手写代码无敌秘籍相关推荐

1. 「中高级前端进阶」从零开始手写一个 vue-cli 脚手架

   关注我的小伙伴应该知道,我之前写过一篇脚手架相关的文章,在掘金收获了近一千个赞,被前端大全和奇舞周刊公众号转载. 可以说自定义脚手架是每一个中高级前端都应该具备的能力. 1. 脚手架带来的便利 在现在 ...

2. 2020年前端面试之JS手写代码题合集

   2020年前端面试之JS手写代码题合集 预计会有上千道题,后续慢慢补! 1.  写一个把字符串大小写切换的方法 function caseConvert(str){return str.replace ...

3. 【2022前端面试】CSS手写面试题汇总（加紧收藏）

   [2022前端面试]CSS手写面试题汇总(加紧收藏) 更新时间:2022年3月3日 把答案一起写上,但是希望大家在看之前思考一下,如果有好的建议,跪求改正! 本文致力于建设前端面试题库,欢迎兄弟们投稿 ...

4. python在哪里写代码比较适合-程序员面试被要求手写代码，你与顶级程序员的差别在哪？...

   原标题:程序员面试被要求手写代码,你与顶级程序员的差别在哪? 前言: Python现在非常火,语法简单而且功能强大,很多同学都想学Python! 所以小的给各位看官们准备了收藏已久的视频教程分享给大家 ...

5. python在哪里写代码-程序员面试被要求手写代码，你与顶级程序员的差别在哪？...

   原标题:程序员面试被要求手写代码,你与顶级程序员的差别在哪? 前言: Python现在非常火,语法简单而且功能强大,很多同学都想学Python! 所以小的给各位看官们准备了收藏已久的视频教程分享给大家 ...

6. 2021-最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)---手写代码篇

   ★★★ 手写代码:实现forEach map filter reduce ★★★ 手写实现一个简易的 Vue Reactive ★★★ 手写代码,监测数组变化,并返回数组长度 ★★★ 手写原生继承,并 ...

7. 手写代码(笔试面试真题)

   ★★★ 手写代码:实现forEach map filter reduce ★★★ 手写实现一个简易的 Vue Reactive ★★★ 手写代码,监测数组变化,并返回数组长度 ★★★ 手写原生继承,并 ...

8. 【前端 · 面试 】JavaScript 之你不一定会的基础题（二）

   最近我在做前端面试题总结系列,感兴趣的朋友可以添加关注,欢迎指正.交流. 争取每个知识点能够多总结一些,至少要做到在面试时,针对每个知识点都可以侃起来,不至于哑火. 前言 在上一篇文章[前端 · 面试 ...

9. 中高级前端面试宝典之浏览器篇

   中高级前端面试宝典 作为一名前端开发工程师,要掌握的知识点是多而杂的,在面试刷题阶段,经常没头没脑的,我将面试题系统化,分了好几个系列,祝愿大家(包括我)在这个疫情刚过去的互联网寒冬找到事儿少钱多

最新文章

1. Python Map 并行
2. [elixir观察] GenStage 与 Flow
3. Android访问WCF服务(使用json实现参数传递)
4. Java Message System简介
5. 如何提升你的代码能力？
6. SQL.H 通过此文件寻找sqlAPI编程的一种捷径
7. 使用NoSQL Manager for MongoDB客户端连接mongodb
8. python开发环境anaconda3_使用Anaconda3配置多版本Python虚拟开发环境
9. Python求梅森尼数
10. 20200201每日一句
11. 收藏！万字长文盘点美国、德国、日本和韩国数字科技创新战略
12. 学习HTML 笔记A3 ：HTML标题、段落、文本格式化
13. 华为荣耀c4刷入linux系统,华为荣耀畅玩4C移动4G(CHM-TL00 Android 4.4)刷Recovery教程
14. FreeSwitch学习（1）-总体简介
15. 京东上位2018年财富中国500强民企第一席 首次实现全年盈利
16. 斐波那契数列之不死神兔
17. 条码打印软件如何设置双排标签纸尺寸 1
18. linux服务器安装openwrt,探索openwrt安装宝塔，搭建web网站论坛社区网校
19. 外汇交易员必读：使用EA做外汇要注意的细节，尤其第三点
20. 腾讯宣布五年5000亿投入计划，发力新基建

热门文章

1. mysql 改myisam_将mysql从MyISAM更改为INNODB
2. c语言crypt加密多线程,糟糕的通用dm-crypt（LUKS）写入性能
3. IOS OpenGL ES GPUImage 图像Sobel边缘检测，类似漫画反色 GPUImageSobelEdgeDetectionFilter
4. c++函数的默认参数在哪里定义？
5. 基于springboot+java+vue的健身房课程预约信息网站-计算机毕业设计
6. slot 默认值使用
7. elementui更改el-dialog关闭按钮的图标
8. 汽车转向液压油箱模具设计
9. 算法进阶课first
10. 9个元素换6次达到排序序列_原创系列 |冒泡排序提升为快速排序，都发生了什么？...