前端二面手写面试题总结
- 2022-10-27 浙江
本文字数：22923 字
阅读完需：约 75 分钟
给定两个数组，写一个方法来计算它们的交集
例如：给定 nums1 = [1, 2, 2, 1]，nums2 = [2, 2]，返回 [2, 2]。
function union (arr1, arr2) { return arr1.filter(item => { return arr2.indexOf(item) > - 1; })} const a = [1, 2, 2, 1]; const b = [2, 3, 2]; console.log(union(a, b)); // [2, 2]
复制代码
手写 Promise.then
then 方法返回一个新的 promise 实例，为了在 promise 状态发生变化时（resolve / reject 被调用时）再执行 then 里的函数，我们使用一个 callbacks 数组先把传给 then 的函数暂存起来，等状态改变时再调用。
**那么，怎么保证后一个 **then** 里的方法在前一个 ****then**（可能是异步）结束之后再执行呢？ 我们可以将传给 then 的函数和新 promise 的 resolve 一起 push 到前一个 promise 的 callbacks 数组中，达到承前启后的效果：
承前：当前一个
promise完成后，调用其resolve变更状态，在这个resolve里会依次调用callbacks里的回调，这样就执行了then里的方法了启后：上一步中，当
then里的方法执行完成后，返回一个结果，如果这个结果是个简单的值，就直接调用新promise的resolve，让其状态变更，这又会依次调用新promise的callbacks数组里的方法，循环往复。。如果返回的结果是个promise，则需要等它完成之后再触发新promise的resolve，所以可以在其结果的then里调用新promise的resolve
then(onFulfilled, onReject){ // 保存前一个promise的this const self = this; return new MyPromise((resolve, reject) => { // 封装前一个promise成功时执行的函数 let fulfilled = () => { try{ const result = onFulfilled(self.value); // 承前 return result instanceof MyPromise? result.then(resolve, reject) : resolve(result); //启后 }catch(err){ reject(err) } } // 封装前一个promise失败时执行的函数 let rejected = () => { try{ const result = onReject(self.reason); return result instanceof MyPromise? result.then(resolve, reject) : reject(result); }catch(err){ reject(err) } } switch(self.status){ case PENDING: self.onFulfilledCallbacks.push(fulfilled); self.onRejectedCallbacks.push(rejected); break; case FULFILLED: fulfilled(); break; case REJECT: rejected(); break; } }) }
复制代码
注意：
连续多个
then里的回调方法是同步注册的，但注册到了不同的callbacks数组中，因为每次then都返回新的promise实例（参考上面的例子和图）注册完成后开始执行构造函数中的异步事件，异步完成之后依次调用
callbacks数组中提前注册的回调
实现每隔一秒打印 1,2,3,4
// 使用闭包实现for (var i = 0; i < 5; i++) { (function(i) { setTimeout(function() { console.log(i); }, i * 1000); })(i);}// 使用 let 块级作用域for (let i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, i * 1000);}
复制代码
实现非负大整数相加
JavaScript 对数值有范围的限制，限制如下：
Number.MAX_VALUE // 1.7976931348623157e+308Number.MAX_SAFE_INTEGER // 9007199254740991Number.MIN_VALUE // 5e-324Number.MIN_SAFE_INTEGER // -9007199254740991
复制代码
如果想要对一个超大的整数(> Number.MAX_SAFE_INTEGER)进行加法运算，但是又想输出一般形式，那么使用 + 是无法达到的，一旦数字超过 Number.MAX_SAFE_INTEGER 数字会被立即转换为科学计数法，并且数字精度相比以前将会有误差。
实现一个算法进行大数的相加：
function sumBigNumber(a, b) { let res = ''; let temp = 0;
a = a.split(''); b = b.split('');
while (a.length || b.length || temp) { temp += ~~a.pop() + ~~b.pop(); res = (temp % 10) + res; temp = temp > 9 } return res.replace(/^0+/, '');}
复制代码
其主要的思路如下：
首先用字符串的方式来保存大数，这样数字在数学表示上就不会发生变化
初始化 res，temp 来保存中间的计算结果，并将两个字符串转化为数组，以便进行每一位的加法运算
将两个数组的对应的位进行相加，两个数相加的结果可能大于 10，所以可能要仅为，对 10 进行取余操作，将结果保存在当前位
判断当前位是否大于 9，也就是是否会进位，若是则将 temp 赋值为 true，因为在加法运算中，true 会自动隐式转化为 1，以便于下一次相加
重复上述操作，直至计算结束
将数字每千分位用逗号隔开
数字有小数版本：
let format = n => { let num = n.toString() // 转成字符串 let decimals = '' // 判断是否有小数 num.indexOf('.') > -1 ? decimals = num.split('.')[1] : decimals let len = num.length if (len <= 3) { return num } else { let temp = '' let remainder = len % 3 decimals ? temp = '.' + decimals : temp if (remainder > 0) { // 不是3的整数倍 return num.slice(0, remainder) + ',' + num.slice(remainder, len).match(/\d{3}/g).join(',') + temp } else { // 是3的整数倍 return num.slice(0, len).match(/\d{3}/g).join(',') + temp } }}format(12323.33) // '12,323.33'
复制代码
数字无小数版本：
let format = n => { let num = n.toString() let len = num.length if (len <= 3) { return num } else { let remainder = len % 3 if (remainder > 0) { // 不是3的整数倍 return num.slice(0, remainder) + ',' + num.slice(remainder, len).match(/\d{3}/g).join(',') } else { // 是3的整数倍 return num.slice(0, len).match(/\d{3}/g).join(',') } }}format(1232323) // '1,232,323'
复制代码
Function.prototype.bind
Function.prototype.bind = function(context, ...args) { if (typeof this !== 'function') { throw new Error("Type Error"); } // 保存this的值 var self = this;
return function F() { // 考虑new的情况 if(this instanceof F) { return new self(...args, ...arguments) } return self.apply(context, [...args, ...arguments]) }}
复制代码
模板引擎实现
let template = '我是{{name}}，年龄{{age}}，性别{{sex}}';let data = { name: '姓名', age: 18}render(template, data); // 我是姓名，年龄18，性别undefined
复制代码
function render(template, data) { const reg = /\{\{(\w+)\}\}/; // 模板字符串正则 if (reg.test(template)) { // 判断模板里是否有模板字符串 const name = reg.exec(template)[1]; // 查找当前模板里第一个模板字符串的字段 template = template.replace(reg, data[name]); // 将第一个模板字符串渲染 return render(template, data); // 递归的渲染并返回渲染后的结构 } return template; // 如果模板没有模板字符串直接返回}
复制代码
参考：前端手写面试题详细解答
实现 Promise
var PromisePolyfill = (function () { // 和reject不同的是resolve需要尝试展开thenable对象 function tryToResolve (value) { if (this === value) { // 主要是防止下面这种情况 // let y = new Promise(res => setTimeout(res(y))) throw TypeError('Chaining cycle detected for promise!') }
// 根据规范2.32以及2.33 对对象或者函数尝试展开 // 保证S6之前的 polyfill 也能和ES6的原生promise混用 if (value !== null && (typeof value === 'object' || typeof value === 'function')) { try { // 这里记录这次then的值同时要被try包裹 // 主要原因是 then 可能是一个getter, 也也就是说 // 1. value.then可能报错 // 2. value.then可能产生副作用(例如多次执行可能结果不同) var then = value.then
// 另一方面, 由于无法保证 then 确实会像预期的那样只调用一个onFullfilled / onRejected // 所以增加了一个flag来防止resolveOrReject被多次调用 var thenAlreadyCalledOrThrow = false if (typeof then === 'function') { // 是thenable 那么尝试展开 // 并且在该thenable状态改变之前this对象的状态不变 then.bind(value)( // onFullfilled function (value2) { if (thenAlreadyCalledOrThrow) return thenAlreadyCalledOrThrow = true tryToResolve.bind(this, value2)() }.bind(this),
// onRejected function (reason2) { if (thenAlreadyCalledOrThrow) return thenAlreadyCalledOrThrow = true resolveOrReject.bind(this, 'rejected', reason2)() }.bind(this) ) } else { // 拥有then 但是then不是一个函数 所以也不是thenable resolveOrReject.bind(this, 'resolved', value)() } } catch (e) { if (thenAlreadyCalledOrThrow) return thenAlreadyCalledOrThrow = true resolveOrReject.bind(this, 'rejected', e)() } } else { // 基本类型 直接返回 resolveOrReject.bind(this, 'resolved', value)() } }
function resolveOrReject (status, data) { if (this.status !== 'pending') return this.status = status this.data = data if (status === 'resolved') { for (var i = 0; i < this.resolveList.length; ++i) { this.resolveList[i]() } } else { for (i = 0; i < this.rejectList.length; ++i) { this.rejectList[i]() } } }
function Promise (executor) { if (!(this instanceof Promise)) { throw Error('Promise can not be called without new !') }
if (typeof executor !== 'function') { // 非标准 但与Chrome谷歌保持一致 throw TypeError('Promise resolver ' + executor + ' is not a function') }
this.status = 'pending' this.resolveList = [] this.rejectList = []
try { executor(tryToResolve.bind(this), resolveOrReject.bind(this, 'rejected')) } catch (e) { resolveOrReject.bind(this, 'rejected', e)() } }
Promise.prototype.then = function (onFullfilled, onRejected) { // 返回值穿透以及错误穿透, 注意错误穿透用的是throw而不是return，否则的话 // 这个then返回的promise状态将变成resolved即接下来的then中的onFullfilled // 会被调用, 然而我们想要调用的是onRejected if (typeof onFullfilled !== 'function') { onFullfilled = function (data) { return data } } if (typeof onRejected !== 'function') { onRejected = function (reason) { throw reason } }
var executor = function (resolve, reject) { setTimeout(function () { try { // 拿到对应的handle函数处理this.data // 并以此为依据解析这个新的Promise var value = this.status === 'resolved' ? onFullfilled(this.data) : onRejected(this.data) resolve(value) } catch (e) { reject(e) } }.bind(this)) }
// then 接受两个函数返回一个新的Promise // then 自身的执行永远异步与onFullfilled/onRejected的执行 if (this.status !== 'pending') { return new Promise(executor.bind(this)) } else { // pending return new Promise(function (resolve, reject) { this.resolveList.push(executor.bind(this, resolve, reject)) this.rejectList.push(executor.bind(this, resolve, reject)) }.bind(this)) } }
// for prmise A+ test Promise.deferred = Promise.defer = function () { var dfd = {} dfd.promise = new Promise(function (resolve, reject) { dfd.resolve = resolve dfd.reject = reject }) return dfd }
// for prmise A+ test if (typeof module !== 'undefined') { module.exports = Promise }
return Promise})()
PromisePolyfill.all = function (promises) { return new Promise((resolve, reject) => { const result = [] let cnt = 0 for (let i = 0; i < promises.length; ++i) { promises[i].then(value => { cnt++ result[i] = value if (cnt === promises.length) resolve(result) }, reject) } })}
PromisePolyfill.race = function (promises) { return new Promise((resolve, reject) => { for (let i = 0; i < promises.length; ++i) { promises[i].then(resolve, reject) } })}
复制代码
手写 instanceof 方法
instanceof 运算符用于判断构造函数的 prototype 属性是否出现在对象的原型链中的任何位置。
实现步骤：
首先获取类型的原型
然后获得对象的原型
然后一直循环判断对象的原型是否等于类型的原型，直到对象原型为
null，因为原型链最终为null
具体实现：
function myInstanceof(left, right) { let proto = Object.getPrototypeOf(left), // 获取对象的原型 prototype = right.prototype; // 获取构造函数的 prototype 对象
// 判断构造函数的 prototype 对象是否在对象的原型链上 while (true) { if (!proto) return false; if (proto === prototype) return true;
proto = Object.getPrototypeOf(proto); }}
复制代码
Object.is
Object.is解决的主要是这两个问题：
+0 === -0 // trueNaN === NaN // false
复制代码
const is= (x, y) => { if (x === y) { // +0和-0应该不相等 return x !== 0 || y !== 0 || 1/x === 1/y; } else { return x !== x && y !== y; }}
复制代码
实现千位分隔符
// 保留三位小数parseToMoney(1234.56); // return '1,234.56'parseToMoney(123456789); // return '123,456,789'parseToMoney(1087654.321); // return '1,087,654.321'
复制代码
function parseToMoney(num) { num = parseFloat(num.toFixed(3)); let [integer, decimal] = String.prototype.split.call(num, '.'); integer = integer.replace(/\d(?=(\d{3})+$)/g, '$&,'); return integer + '.' + (decimal ? decimal : '');}
复制代码
原生实现
function ajax() { let xhr = new XMLHttpRequest() //实例化，以调用方法 xhr.open('get', 'https://www.google.com') //参数2，url。参数三：异步 xhr.onreadystatechange = () => { //每当 readyState 属性改变时，就会调用该函数。 if (xhr.readyState === 4) { //XMLHttpRequest 代理当前所处状态。 if (xhr.status >= 200 && xhr.status < 300) { //200-300请求成功 let string = request.responseText //JSON.parse() 方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象 let object = JSON.parse(string) } } } request.send() //用于实际发出 HTTP 请求。不带参数为GET请求}
复制代码
实现 Promise 相关方法
实现 Promise 的 resolve
实现 resolve 静态方法有三个要点:
传参为一个
Promise, 则直接返回它。传参为一个
thenable对象，返回的Promise会跟随这个对象，采用它的最终状态作为自己的状态。其他情况，直接返回以该值为成功状态的
promise对象。
Promise.resolve = (param) => { if(param instanceof Promise) return param; return new Promise((resolve, reject) => { if(param && param.then && typeof param.then === 'function') { // param 状态变为成功会调用resolve，将新 Promise 的状态变为成功，反之亦然 param.then(resolve, reject); }else { resolve(param); } })}
复制代码
实现 Promise.reject
Promise.reject 中传入的参数会作为一个 reason 原封不动地往下传, 实现如下:
Promise.reject = function (reason) { return new Promise((resolve, reject) => { reject(reason); });}
复制代码
实现 Promise.prototype.finally
前面的
promise不管成功还是失败，都会走到finally中，并且finally之后，还可以继续then（说明它还是一个 then 方法是关键），并且会将初始的promise值原封不动的传递给后面的then.
Promise.prototype.finally 最大的作用
finally里的函数，无论如何都会执行，并会把前面的值原封不动传递给下一个then方法中如果
finally函数中有promise等异步任务，会等它们全部执行完毕，再结合之前的成功与否状态，返回值
Promise.prototype.finally 六大情况用法
// 情况1Promise.resolve(123).finally((data) => { // 这里传入的函数，无论如何都会执行 console.log(data); // undefined})
// 情况2 (这里，finally方法相当于做了中间处理，起一个过渡的作用)Promise.resolve(123).finally((data) => { console.log(data); // undefined}).then(data => { console.log(data); // 123})
// 情况3 (这里只要reject，都会走到下一个then的err中)Promise.reject(123).finally((data) => { console.log(data); // undefined}).then(data => { console.log(data);}, err => { console.log(err, 'err'); // 123 err})
// 情况4 (一开始就成功之后，会等待finally里的promise执行完毕后，再把前面的data传递到下一个then中)Promise.resolve(123).finally((data) => { console.log(data); // undefined return new Promise((resolve, reject) => { setTimeout(() => { resolve('ok'); }, 3000) })}).then(data => { console.log(data, 'success'); // 123 success}, err => { console.log(err, 'err');})
// 情况5 (虽然一开始成功，但是只要finally函数中的promise失败了，就会把其失败的值传递到下一个then的err中)Promise.resolve(123).finally((data) => { console.log(data); // undefined return new Promise((resolve, reject) => { setTimeout(() => { reject('rejected'); }, 3000) })}).then(data => { console.log(data, 'success');}, err => { console.log(err, 'err'); // rejected err})
// 情况6 (虽然一开始失败，但是也要等finally中的promise执行完，才能把一开始的err传递到err的回调中)Promise.reject(123).finally((data) => { console.log(data); // undefined return new Promise((resolve, reject) => { setTimeout(() => { resolve('resolve'); }, 3000) })}).then(data => { console.log(data, 'success');}, err => { console.log(err, 'err'); // 123 err})
复制代码
源码实现
Promise.prototype.finally = function (callback) { return this.then((data) => { // 让函数执行 内部会调用方法，如果方法是promise，需要等待它完成 // 如果当前promise执行时失败了，会把err传递到，err的回调函数中 return Promise.resolve(callback()).then(() => data); // data 上一个promise的成功态 }, err => { return Promise.resolve(callback()).then(() => { throw err; // 把之前的失败的err，抛出去 }); })}
复制代码
实现 Promise.all
对于 all 方法而言，需要完成下面的核心功能:
传入参数为一个空的可迭代对象，则直接进行
resolve。如果参数中有一个
promise失败，那么Promise.all返回的promise对象失败。在任何情况下，
Promise.all返回的promise的完成状态的结果都是一个数组
Promise.all = function(promises) { return new Promise((resolve, reject) => { let result = []; let index = 0; let len = promises.length; if(len === 0) { resolve(result); return; }
for(let i = 0; i < len; i++) { // 为什么不直接 promise[i].then, 因为promise[i]可能不是一个promise Promise.resolve(promise[i]).then(data => { result[i] = data; index++; if(index === len) resolve(result); }).catch(err => { reject(err); }) } })}
复制代码
实现 promise.allsettle
MDN:
Promise.allSettled()方法返回一个在所有给定的promise都已经fulfilled或rejected后的promise，并带有一个对象数组，每个对象表示对应的promise`结果
当您有多个彼此不依赖的异步任务成功完成时，或者您总是想知道每个promise的结果时，通常使用它。
【译】
Promise.allSettled跟Promise.all类似, 其参数接受一个Promise的数组, 返回一个新的Promise, 唯一的不同在于, 其不会进行短路, 也就是说当 Promise 全部处理完成后我们可以拿到每个Promise的状态, 而不管其是否处理成功。
用法 | 测试用例
let fs = require('fs').promises;
let getName = fs.readFile('./name.txt', 'utf8'); // 读取文件成功let getAge = fs.readFile('./age.txt', 'utf8');
Promise.allSettled([1, getName, getAge, 2]).then(data => { console.log(data);});// 输出结果/* [ { status: 'fulfilled', value: 1 }, { status: 'fulfilled', value: 'zf' }, { status: 'fulfilled', value: '11' }, { status: 'fulfilled', value: 2 } ]*/
let getName = fs.readFile('./name123.txt', 'utf8'); // 读取文件失败let getAge = fs.readFile('./age.txt', 'utf8');// 输出结果/* [ { status: 'fulfilled', value: 1 }, { status: 'rejected', value: [Error: ENOENT: no such file or directory, open './name123.txt'] { errno: -2, code: 'ENOENT', syscall: 'open', path: './name123.txt' } }, { status: 'fulfilled', value: '11' }, { status: 'fulfilled', value: 2 } ]*/
复制代码
实现
function isPromise (val) { return typeof val.then === 'function'; // (123).then => undefined}
Promise.allSettled = function(promises) { return new Promise((resolve, reject) => { let arr = []; let times = 0; const setData = (index, data) => { arr[index] = data; if (++times === promises.length) { resolve(arr); } console.log('times', times) }
for (let i = 0; i < promises.length; i++) { let current = promises[i]; if (isPromise(current)) { current.then((data) => { setData(i, { status: 'fulfilled', value: data }); }, err => { setData(i, { status: 'rejected', value: err }) }) } else { setData(i, { status: 'fulfilled', value: current }) } } })}
复制代码
实现 Promise.race
race 的实现相比之下就简单一些，只要有一个 promise 执行完，直接 resolve 并停止执行
Promise.race = function(promises) { return new Promise((resolve, reject) => { let len = promises.length; if(len === 0) return; for(let i = 0; i < len; i++) { Promise.resolve(promise[i]).then(data => { resolve(data); return; }).catch(err => { reject(err); return; }) } })}
复制代码
实现一个简版 Promise
// 使用var promise = new Promise((resolve,reject) => { if (操作成功) { resolve(value) } else { reject(error) }})promise.then(function (value) { // success},function (value) { // failure})
复制代码
function myPromise(constructor) { let self = this; self.status = "pending" // 定义状态改变前的初始状态 self.value = undefined; // 定义状态为resolved的时候的状态 self.reason = undefined; // 定义状态为rejected的时候的状态 function resolve(value) { if(self.status === "pending") { self.value = value; self.status = "resolved"; } } function reject(reason) { if(self.status === "pending") { self.reason = reason; self.status = "rejected"; } } // 捕获构造异常 try { constructor(resolve,reject); } catch(e) { reject(e); }}
复制代码
// 添加 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})
复制代码
使用 class 实现
class MyPromise { constructor(fn) { this.resolvedCallbacks = []; this.rejectedCallbacks = [];
this.state = 'PENDING'; this.value = '';
fn(this.resolve.bind(this), this.reject.bind(this));
}
resolve(value) { if (this.state === 'PENDING') { this.state = 'RESOLVED'; this.value = value;
this.resolvedCallbacks.map(cb => cb(value)); } }
reject(value) { if (this.state === 'PENDING') { this.state = 'REJECTED'; this.value = value;
this.rejectedCallbacks.map(cb => cb(value)); } }
then(onFulfilled, onRejected) { if (this.state === 'PENDING') { this.resolvedCallbacks.push(onFulfilled); this.rejectedCallbacks.push(onRejected);
}
if (this.state === 'RESOLVED') { onFulfilled(this.value); }
if (this.state === 'REJECTED') { onRejected(this.value); } }}
复制代码
Promise 实现-详细
可以把
Promise看成一个状态机。初始是pending状态，可以通过函数resolve和reject，将状态转变为resolved或者rejected状态，状态一旦改变就不能再次变化。then函数会返回一个Promise实例，并且该返回值是一个新的实例而不是之前的实例。因为Promise规范规定除了pending状态，其他状态是不可以改变的，如果返回的是一个相同实例的话，多个then调用就失去意义了。对于
then来说，本质上可以把它看成是flatMap
// 三种状态const PENDING = "pending";const RESOLVED = "resolved";const REJECTED = "rejected";// promise 接收一个函数参数，该函数会立即执行function MyPromise(fn) { let _this = this; _this.currentState = PENDING; _this.value = undefined; // 用于保存 then 中的回调，只有当 promise // 状态为 pending 时才会缓存，并且每个实例至多缓存一个 _this.resolvedCallbacks = []; _this.rejectedCallbacks = [];
_this.resolve = function (value) { if (value instanceof MyPromise) { // 如果 value 是个 Promise，递归执行 return value.then(_this.resolve, _this.reject) } setTimeout(() => { // 异步执行，保证执行顺序 if (_this.currentState === PENDING) { _this.currentState = RESOLVED; _this.value = value; _this.resolvedCallbacks.forEach(cb => cb()); } }) };
_this.reject = function (reason) { setTimeout(() => { // 异步执行，保证执行顺序 if (_this.currentState === PENDING) { _this.currentState = REJECTED; _this.value = reason; _this.rejectedCallbacks.forEach(cb => cb()); } }) } // 用于解决以下问题 // new Promise(() => throw Error('error)) try { fn(_this.resolve, _this.reject); } catch (e) { _this.reject(e); }}
MyPromise.prototype.then = function (onResolved, onRejected) { var self = this; // 规范 2.2.7，then 必须返回一个新的 promise var promise2; // 规范 2.2.onResolved 和 onRejected 都为可选参数 // 如果类型不是函数需要忽略，同时也实现了透传 // Promise.resolve(4).then().then((value) => console.log(value)) onResolved = typeof onResolved === 'function' ? onResolved : v => v; onRejected = typeof onRejected === 'function' ? onRejected : r => throw r;
if (self.currentState === RESOLVED) { return (promise2 = new MyPromise(function (resolve, reject) { // 规范 2.2.4，保证 onFulfilled，onRjected 异步执行 // 所以用了 setTimeout 包裹下 setTimeout(function () { try { var x = onResolved(self.value); resolutionProcedure(promise2, x, resolve, reject); } catch (reason) { reject(reason); } }); })); }
if (self.currentState === REJECTED) { return (promise2 = new MyPromise(function (resolve, reject) { setTimeout(function () { // 异步执行onRejected try { var x = onRejected(self.value); resolutionProcedure(promise2, x, resolve, reject); } catch (reason) { reject(reason); } }); })); }
if (self.currentState === PENDING) { return (promise2 = new MyPromise(function (resolve, reject) { self.resolvedCallbacks.push(function () { // 考虑到可能会有报错，所以使用 try/catch 包裹 try { var x = onResolved(self.value); resolutionProcedure(promise2, x, resolve, reject); } catch (r) { reject(r); } });
self.rejectedCallbacks.push(function () { try { var x = onRejected(self.value); resolutionProcedure(promise2, x, resolve, reject); } catch (r) { reject(r); } }); })); }};// 规范 2.3function resolutionProcedure(promise2, x, resolve, reject) { // 规范 2.3.1，x 不能和 promise2 相同，避免循环引用 if (promise2 === x) { return reject(new TypeError("Error")); } // 规范 2.3.2 // 如果 x 为 Promise，状态为 pending 需要继续等待否则执行 if (x instanceof MyPromise) { if (x.currentState === PENDING) { x.then(function (value) { // 再次调用该函数是为了确认 x resolve 的 // 参数是什么类型，如果是基本类型就再次 resolve // 把值传给下个 then resolutionProcedure(promise2, value, resolve, reject); }, reject); } else { x.then(resolve, reject); } return; } // 规范 2.3.3.3.3 // reject 或者 resolve 其中一个执行过得话，忽略其他的 let called = false; // 规范 2.3.3，判断 x 是否为对象或者函数 if (x !== null && (typeof x === "object" || typeof x === "function")) { // 规范 2.3.3.2，如果不能取出 then，就 reject try { // 规范 2.3.3.1 let then = x.then; // 如果 then 是函数，调用 x.then if (typeof then === "function") { // 规范 2.3.3.3 then.call( x, y => { if (called) return; called = true; // 规范 2.3.3.3.1 resolutionProcedure(promise2, y, resolve, reject); }, e => { if (called) return; called = true; reject(e); } ); } else { // 规范 2.3.3.4 resolve(x); } } catch (e) { if (called) return; called = true; reject(e); } } else { // 规范 2.3.4，x 为基本类型 resolve(x); }}
复制代码
实现 Promisify
const fs = require('fs')const path = require('path')
// node中使用// const fs = require('fs').promises 12.18版// const promisify = require('util').promisify
// 包装node api promise化 典型的高级函数const promisify = fn=>{ return (...args)=>{ return new Promise((resolve,reject)=>{ fn(...args, (err,data)=>{ if(err) { reject(err) } resolve(data) }) }) }}
// const read = promisify(fs.readFile)
// read(path.join(__dirname, './promise.js'), 'utf8').then(d=>{// console.log(d)// })
// promise化node所有apiconst promisifyAll = target=>{ Reflect.ownKeys(target).forEach(key=>{ if(typeof target[key] === 'function') { target[key+'Async'] = promisify(target[key]) } }) return target}
// promise化fs下的函数const promisifyNew = promisifyAll(fs)
promisifyNew.readFileAsync(path.join(__dirname, './promise.js'), 'utf8').then(d=>{ console.log(d)})
module.exports = { promisify, promisifyAll}
复制代码
完整实现 Promises/A+规范
/** * Promises/A+规范 实现一个promise * https://promisesaplus.com/*/
const EMUM = { PENDING: 'PENDING', FULFILLED: 'FULFILLED', REJECTED: 'REJECTED'}
// x 返回值// promise2 then的时候new的promise// promise2的resolve, rejectconst resolvePromise = (x, promise2, resolve, reject)=>{ // 解析promise的值解析promise2是成功还是失败 传递到下层then if(x === promise2) { reject(new TypeError('类型错误')) } // 这里的x如果是一个promise的话 可能是其他的promise，可能调用了成功 又调用了失败 // 防止resolve的时候 又throw err抛出异常到reject了 let called // 如果x是promise 那么就采用他的状态 // 有then方法是promise if(typeof x === 'object' && typeof x!== null || typeof x === 'function') { // x是对象或函数 try { let then = x.then // 缓存，不用多次取值 if(typeof then === 'function') { // 是promise，调用then方法里面有this，需要传入this为x才能取到then方法里面的值this.value then.call(x, y=>{// 成功 // y值可能也是一个promise 如resolve(new Promise()) 此时的y==new Promise() // 递归解析y，直到拿到普通的值resolve(x出去) if(called) return; called = true;
resolvePromise(y, promise2, resolve, reject) },r=>{// 一旦失败直接失败 if(called) return; called = true; reject(r) }) } else { // 普通对象不是promise resolve(x) } } catch (e) { // 对象取值可能报错，用defineProperty定义get 抛出异常 if(called) return; called = true; reject(e) } } else { // x是普通值 resolve(x) // 直接成功 }
}class myPromise { constructor(executor) { this.status = EMUM.PENDING // 当前状态 this.value = undefined // resolve接收值 this.reason = undefined // reject失败返回值
/** * 同一个promise可以then多次(发布订阅模式) * 调用then时 当前状态是等待态，需要将当前成功或失败的回调存放起来（订阅） * 调用resolve时 将订阅函数进行执行（发布） */ // 成功队列 this.onResolvedCallbacks = [] // 失败队列 this.onRejectedCallbacks = [] const resolve = value =>{ // 如果value是一个promise，需要递归解析 // 如 myPromise.resolve(new myPromise()) 需要解析value if(value instanceof myPromise) { // 不停的解析 直到值不是promise return value.then(resolve,reject) }
if(this.status === EMUM.PENDING) { this.status = EMUM.FULFILLED this.value = value
this.onResolvedCallbacks.forEach(fn=>fn()) } } const reject = reason =>{ if(this.status === EMUM.PENDING) { this.status = EMUM.REJECTED this.reason = reason
this.onRejectedCallbacks.forEach(fn=>fn()) } } try { executor(resolve,reject) } catch(e) { reject(e) } } then(onFulFilled, onRejected) { // 透传 处理默认不传的情况 // new Promise((resolve,reject)=>{ // resolve(1) // }).then().then().then(d=>{}) // new Promise((resolve,reject)=>{ // resolve(1) // }).then(v=>v).then(v=>v).then(d=>{}) // new Promise((resolve,reject)=>{ // reject(1) // }).then().then().then(null, e=>{console.log(e)}) // new Promise((resolve,reject)=>{ // reject(1) // }).then(null,e=>{throw e}).then(null,e=>{throw e}).then(null,e=>{console.log(e)}) onFulFilled = typeof onFulFilled === 'function' ? onFulFilled : v => v onRejected = typeof onRejected === 'function' ? onRejected : err => {throw err}
// 调用then 创建一个新的promise let promise2 = new myPromise((resolve,reject)=>{ // 根据value判断是resolve 还是reject value也可能是promise if(this.status === EMUM.FULFILLED) { setTimeout(() => { try { // 成功回调结果 let x = onFulFilled(this.value) // 解析promise resolvePromise(x, promise2,resolve,reject) } catch (error) { reject(error) } }, 0); } if(this.status === EMUM.REJECTED) { setTimeout(() => { try { let x = onRejected(this.reason) // 解析promise resolvePromise(x, promise2,resolve,reject) } catch (error) { reject(error) } }, 0); } // 用户还未调用resolve或reject方法 if(this.status === EMUM.PENDING) { this.onResolvedCallbacks.push(()=>{ try { let x = onFulFilled(this.value) // 解析promise resolvePromise(x, promise2,resolve,reject) } catch (error) { reject(error) } }) this.onRejectedCallbacks.push(()=>{ try { let x = onRejected(this.reason) // 解析promise resolvePromise(x, promise2,resolve,reject) } catch (error) { reject(error) } }) } })
return promise2 } catch(errCallback) { // 等同于没有成功，把失败放进去而已 return this.then(null, errCallback) } // myPromise.resolve 具备等待功能的 如果参数的promise会等待promise解析完毕在向下执行 static resolve(val) { return new myPromise((resolve,reject)=>{ resolve(val) }) } // myPromise.reject 直接将值返回 static reject(reason) { return new myPromise((resolve,reject)=>{ reject(reason) }) } // finally传入的函数 无论成功或失败都执行 // Promise.reject(100).finally(()=>{console.log(1)}).then(d=>console.log('success',d)).catch(er=>console.log('faild',er)) // Promise.reject(100).finally(()=>new Promise()).then(d=>console.log(d)).catch(er=>) finally(callback) { return this.then((val)=>{ return myPromise.resolve(callback()).then(()=>val) },(err)=>{ return myPromise.resolve(callback()).then(()=>{throw err}) }) } // Promise.all static all(values) { return new myPromise((resolve,reject)=>{ let resultArr = [] let orderIndex = 0 const processResultByKey = (value,index)=>{ resultArr[index] = value // 处理完全部 if(++orderIndex === values.length) { resolve(resultArr) // 处理完成的结果返回去 } } for (let i = 0; i < values.length; i++) { const value = values[i]; // 是promise if(value && typeof value.then === 'function') { value.then((val)=>{ processResultByKey(val,i) },reject) } else { // 不是promise情况 processResultByKey(value,i) } } }) } static race(promises) { // 采用最新成功或失败的作为结果 return new myPromise((resolve,reject)=>{ for (let i = 0; i < promises.length; i++) { let val = promises[i] if(val && typeof val.then === 'function') { // 任何一个promise先调用resolve或reject就返回结果了 也就是返回执行最快的那个promise的结果 val.then(resolve,reject) }else{ // 普通值 resolve(val) } } }) }}
/** * =====测试用例-==== */// let promise1 = new myPromise((resolve,reject)=>{// setTimeout(() => {// resolve('成功')// }, 900);// })
// promise1.then(val=>{// console.log('success', val)// },reason=>{// console.log('fail', reason)// })
/** * then的使用方式 普通值意味不是promise * * 1、then中的回调有两个方法 成功或失败 他们的结果返回（普通值）会传递给外层的下一个then中 * 2、可以在成功或失败中抛出异常，走到下一次then的失败中 * 3、返回的是一个promsie，那么会用这个promise的状态作为结果，会用promise的结果向下传递 * 4、错误处理，会默认先找离自己最新的错误处理，找不到就向下查找，找打了就执行 */
// read('./name.txt').then(data=>{// return '123'// }).then(data=>{
// }).then(null,err=>{
// })// // .catch(err=>{ // catch就是没有成功的promise
// // })
/** * promise.then实现原理：通过每次返回一个新的promise来实现（promise一旦成功就不能失败，失败就不能成功） * */
// function read(data) {// return new myPromise((resolve,reject)=>{// setTimeout(() => {// resolve(new myPromise((resolve,reject)=>resolve(data)))// }, 1000);// })// }
// let promise2 = read({name: 'poetry'}).then(data=>{// return data// }).then().then().then(data=>{// console.log(data,'-data-')// },(err)=>{// console.log(err,'-err-')// })
// finally测试// myPromise// .resolve(100)// .finally(()=>{// return new myPromise((resolve,reject)=>setTimeout(() => {// resolve(100)// }, 100))// })// .then(d=>console.log('finally success',d))// .catch(er=>console.log(er, 'finally err'))
/** * promise.all 测试 * * myPromise.all 解决并发问题 多个异步并发获取最终的结果*/
// myPromise.all([1,2,3,4,new myPromise((resolve,reject)=>{// setTimeout(() => {// resolve('ok1')// }, 1000);// }),new myPromise((resolve,reject)=>{// setTimeout(() => {// resolve('ok2')// }, 1000);// })]).then(d=>{// console.log(d,'myPromise.all.resolve')// }).catch(err=>{// console.log(err,'myPromise.all.reject')// })
// 实现promise中断请求let promise = new Promise((resolve,reject)=>{ setTimeout(() => { // 模拟接口调用 ajax调用超时 resolve('成功') }, 10000);})
function promiseWrap(promise) { // 包装一个promise 可以控制原来的promise是成功 还是失败 let abort let newPromsie = new myPromise((resolve,reject)=>{ abort = reject }) // 只要控制newPromsie失败，就可以控制被包装的promise走向失败 // Promise.race 任何一个先成功或者失败 就可以获得结果 let p = myPromise.race([promise, newPromsie]) p.abort = abort
return p}
let newPromise = promiseWrap(promise)
setTimeout(() => { // 超过3秒超时 newPromise.abort('请求超时')}, 3000);
newPromise.then(d=>{ console.log('d',d)}).catch(err=>{ console.log('err',err)})
// 使用promises-aplus-tests 测试写的promise是否规范// 全局安装 cnpm i -g promises-aplus-tests// 命令行执行 promises-aplus-tests promise.js// 测试入口 产生延迟对象myPromise.defer = myPromise.deferred = function () { let dfd = {} dfd.promise = new myPromise((resolve,reject)=>{ dfd.resolve = resolve dfd.reject = reject }) return dfd}
// 延迟对象用户// // promise解决嵌套问题// function readData(url) {// let dfd = myPromise.defer()// fs.readFile(url, 'utf8', function (err,data) {// if(err) {// dfd.reject()// }// dfd.resolve(data)// })// return dfd.promise// }// readData().then(d=>{// return d// })
module.exports = myPromise
复制代码
Array.prototype.forEach()
Array.prototype.forEach = function(callback, thisArg) { if (this == null) { throw new TypeError('this is null or not defined'); } if (typeof callback !== "function") { throw new TypeError(callback + ' is not a function'); } const O = Object(this); const len = O.length >>> 0; let k = 0; while (k < len) { if (k in O) { callback.call(thisArg, O[k], k, O); } k++; }}
复制代码
instanceof
instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上。
const myInstanceof = (left, right) => { // 基本数据类型都返回false if (typeof left !== 'object' || left === null) return false; let proto = Object.getPrototypeOf(left); while (true) { if (proto === null) return false; if (proto === right.prototype) return true; proto = Object.getPrototypeOf(proto); }}
复制代码
实现一个 JS 函数柯里化
预先处理的思想，利用闭包的机制
柯里化的定义：接收一部分参数，返回一个函数接收剩余参数，接收足够参数后，执行原函数
函数柯里化的主要作用和特点就是
参数复用、提前返回和延迟执行
柯里化把多次传入的参数合并，柯里化是一个高阶函数
每次都返回一个新函数
每次入参都是一个
当柯里化函数接收到足够参数后，就会执行原函数，如何去确定何时达到足够的参数呢？
有两种思路：
通过函数的
length属性，获取函数的形参个数，形参的个数就是所需的参数个数在调用柯里化工具函数时，手动指定所需的参数个数
将这两点结合一下，实现一个简单 curry 函数
通用版
// 写法1function 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); } }}
复制代码
// 写法2// 分批传入参数// redux 源码的compose也是用了类似柯里化的操作const curry = (fn, arr = []) => {// arr就是我们要收集每次调用时传入的参数 let len = fn.length; // 函数的长度，就是参数的个数
return function(...args) { let newArgs = [...arr, ...args] // 收集每次传入的参数
// 如果传入的参数个数等于我们指定的函数参数个数，就执行指定的真正函数 if(newArgs.length === len) { return fn(...newArgs) } else { // 递归收集参数 return curry(fn, 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)
复制代码
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) //返回10curryTest(1,2)(4)(3) //返回10curryTest(1,2)(3,4) //返回10
复制代码
// 柯里化求值// 指定的函数function sum(a,b,c,d,e) { return a + b + c + d + e}
// 传入指定的函数，执行一次let newSum = curry(sum)
// 柯里化 每次入参都是一个参数newSum(1)(2)(3)(4)(5)
// 偏函数newSum(1)(2)(3,4,5)
复制代码
// 柯里化简单应用// 判断类型，参数多少个，就执行多少次收集function isType(type, val) { return Object.prototype.toString.call(val) === `[object ${type}]`}
let newType = curry(isType)
// 相当于把函数参数一个个传了，把第一次先缓存起来let isString = newType('String')let isNumber = newType('Number')
isString('hello world')isNumber(999)
复制代码
实现一个 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"}"
复制代码
实现 ES6 的 extends
function B(name){ this.name = name;};function A(name,age){ //1.将A的原型指向B Object.setPrototypeOf(A,B); //2.用A的实例作为this调用B,得到继承B之后的实例，这一步相当于调用super Object.getPrototypeOf(A).call(this, name) //3.将A原有的属性添加到新实例上 this.age = age; //4.返回新实例对象 return this;};var a = new A('poetry',22);console.log(a);
复制代码
实现双向数据绑定
let obj = {}let input = document.getElementById('input')let span = document.getElementById('span')// 数据劫持Object.defineProperty(obj, 'text', { configurable: true, enumerable: true, get() { console.log('获取数据了') }, set(newVal) { console.log('数据更新了') input.value = newVal span.innerHTML = newVal }})// 输入监听input.addEventListener('keyup', function(e) { obj.text = e.target.value})
复制代码
实现深拷贝
浅拷贝： 浅拷贝指的是将一个对象的属性值复制到另一个对象，如果有的属性的值为引用类型的话，那么会将这个引用的地址复制给对象，因此两个对象会有同一个引用类型的引用。浅拷贝可以使用 Object.assign 和展开运算符来实现。
深拷贝： 深拷贝相对浅拷贝而言，如果遇到属性值为引用类型的时候，它新建一个引用类型并将对应的值复制给它，因此对象获得的一个新的引用类型而不是一个原有类型的引用。深拷贝对于一些对象可以使用 JSON 的两个函数来实现，但是由于 JSON 的对象格式比 js 的对象格式更加严格，所以如果属性值里边出现函数或者 Symbol 类型的值时，会转换失败
（1）JSON.stringify()
JSON.parse(JSON.stringify(obj))是目前比较常用的深拷贝方法之一，它的原理就是利用JSON.stringify将js对象序列化（JSON 字符串），再使用JSON.parse来反序列化(还原)js对象。这个方法可以简单粗暴的实现深拷贝，但是还存在问题，拷贝的对象中如果有函数，undefined，symbol，当使用过
JSON.stringify()进行处理之后，都会消失。
let obj1 = { a: 0, b: { c: 0 } };let obj2 = JSON.parse(JSON.stringify(obj1));obj1.a = 1;obj1.b.c = 1;console.log(obj1); // {a: 1, b: {c: 1}}console.log(obj2); // {a: 0, b: {c: 0}}
复制代码
（2）函数库 lodash 的_.cloneDeep 方法
该函数库也有提供_.cloneDeep 用来做 Deep Copy
var _ = require('lodash');var obj1 = { a: 1, b: { f: { g: 1 } }, c: [1, 2, 3]};var obj2 = _.cloneDeep(obj1);console.log(obj1.b.f === obj2.b.f);// false
复制代码
（3）手写实现深拷贝函数
// 深拷贝的实现function deepCopy(object) { if (!object || typeof object !== "object") return;
let newObject = Array.isArray(object) ? [] : {};
for (let key in object) { if (object.hasOwnProperty(key)) { newObject[key] = typeof object[key] === "object" ? deepCopy(object[key]) : object[key]; } }
return newObject;}
复制代码
划线
评论
复制
发布于: 刚刚阅读数: 3
还未添加个人签名 2022-07-31 加入
还未添加个人简介
评论