js最常见基础的面试题：中高级前端面试

忙族 2023-03-09 05:39:19 871

js最常见基础的面试题：中高级前端面试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()运行的字符串代码被恶意方（不怀好意的人）操控修改，您最终可能会在您的网页/扩展程序的权限下，在用户计算机上运行恶意代码。3.1 第一种：直接调用 evalfunction j

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（出现在数组中时）。
不可枚举的属性会被忽略
如果一个对象的属性值通过某种间接的方式指回该对象本身，即循环引用，属性也会被忽略。

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做校验。

3.2 第二种：Function

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

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

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

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

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

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

7.1 通用版

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状态的时候，就不可变。

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

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

8.1 Promise的流程图分析

js最常见基础的面试题：中高级前端面试(1)

来回顾下Promise用法：var promise = new Promise((resolve reject) => { if (操作成功) { resolve(value) } else { reject(error) } }) promise.then(function (value) { // success } function (value) { // failure })

8.2 面试够用版

同时，需要在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 大厂专供版

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

js最常见基础的面试题：中高级前端面试(2)

emmm，我还是乖乖地写回进阶版吧。9. 手写防抖(Debouncing)和节流(Throttling)

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

9.1 防抖(Debouncing)实现

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

一个比较好的解释是：

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

js最常见基础的面试题：中高级前端面试(3)

// 防抖动函数 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 内这个函数一定不会被调用两次

js最常见基础的面试题：中高级前端面试(4)

简单的节流函数:

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 timer let lastCall = 0 return function (...args) { if (isDebounce) { if (timer) clearTimeout(timer) timer = setTimeout(() => { fn(...args) } delay) } else { const now = new Date().getTime() if (now - lastCall < delay) return lastCall = now fn(...args) } } }

10. 手写一

js最常见基础的面试题：中高级前端面试(5)

个JS深拷贝

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

10.1 乞丐版

var newObj = JSON.parse( JSON.stringify( someObj ) );

10.2 面试够用版

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

js最常见基础的面试题：中高级前端面试(6)

11.实现一个instanceOf

function instanceOf(left right) { let proto = left.__proto__; let prototype = right.prototype while(true) { if(proto === null) return false if(proto === prototype) return true proto = proto.__proto__; } }

js最常见基础的面试题：中高级前端面试(7)

网站首页

返回栏目

js最常见基础的面试题：中高级前端面试

猜您喜欢：

相关文章