64. 关于JS中一些重要的api实现

console.log(iterator.next());

console.log(iterator.next());

console.log(iterator.next());

console.log(iterator.next());

// {value: 4, done: false} // {value: 2, done: false}

// {value: 1, done: false} // {value: undefined, done: true}

咦？返回值有value和done属性，生成器也可以调用 next,返回的也是这样的数据结构，这么巧?!

没错，生成器本身就是一个迭代器。

既然属于迭代器，那它就可以用for...of遍历了吧？

当然没错，不信来写一个简单的斐波那契数列(50以内)：

function* fibonacci(){ let [prev, cur] = [0, 1];

console.log(cur);

while(true) { [prev, cur] = [cur, prev + cur];

yield cur;

} }

for(let item of fibonacci()) { if(item > 50) break;

console.log(item);

} // 1

// 1 // 2

// 3 // 5

// 8 // 13

// 21 // 34

64. 关于JS中一些重要的api实现

用ES5实现数组的map方法

核心要点:

1）回调函数的参数有哪些，返回值如何处理。

for (var i = 0; i < arr.length; i++ ){ mappedArr.push(fn.call(context, arr[i], i, this));

} return mappedArr;

}

用ES5实现数组的reduce方法

核心要点:

1）初始值不传怎么处理

2）回调函数的参数有哪些，返回值如何处理。

Array.prototype.myReduce = function(fn, initialValue) { var arr = Array.prototype.slice.call(this);

var res, startIndex;

res = initialValue ? initialValue : arr[0];

startIndex = initialValue ? 0 : 1;

for(var i = startIndex; i < arr.length; i++) { res = fn.call(null, res, arr[i], i, this);

} return res;

}

实现call/apply

思路: 利用this的上下文特性。

//实现apply只要把下一行中的...args换成args即可 Function.prototype.myCall = function(context = window, ...args) {

let func = this;

let fn = Symbol("fn");

context[fn] = func;

let res = context[fn](...args);//重点代码，利用this指向，相当于 context.caller(...args)

delete context[fn];

return res;

}

实现Object.create方法(常用)

F.prototype.constructor = F;

return new F();

}

实现bind方法

核心要点:

1）对于普通函数，绑定this指向

2）对于构造函数，要保证原函数的原型对象上的属性不能丢失

Function.prototype.bind = function(context, ...args) { let self = this;//谨记this表示调用bind的函数

let fBound = function() { //this instanceof fBound为true表示构造函数的情况。如new func.bind(obj)

return self.apply(this instanceof fBound ? this : context || window, args.concat(Array.prototype.slice.call(arguments)));

} fBound.prototype = Object.create(this.prototype);//保证原函数的原型对象上的属性不

丢失 return fBound;

}

实现new关键字

核心要点:

1）创建一个全新的对象，这个对象的proto要指向构造函数的原型对象

2）执行构造函数

3）返回值为object类型则作为new方法的返回值返回，否则返回上述全新对象

function myNew(fn, ...args) { let instance = Object.create(fn.prototype);

let res = fn.apply(instance, args);

return typeof res === 'object' ? res: instance;

}

实现instanceof的作用

核心要点：原型链的向上查找。

if(proto == null) return false;

if(proto == right.prototype) return true;

proto = Object.getPrototypeof(proto);

} }

实现单例模式

核心要点: 用闭包和Proxy属性拦截

function proxy(func) { let instance;

let handler = { construct(target, args) {

if(!instance) { instance = Reflect.construct(func, args);

} return instance;

} }

return new Proxy(func, handler);

}

实现防抖功能

核心要点:

如果在定时器的时间范围内再次触发，则重新计时。

const debounce = (fn, delay) => { let timer = null;

return (...args) => { clearTimeout(timer);

timer = setTimeout(() => { fn.apply(this, args);

}, delay);

};

};

实现节流功能

核心要点:

如果在定时器的时间范围内再次触发，则不予理睬，等当前定时器完成，才能启动下一个定时器。

if (!flag) return;

flag = false;

setTimeout(() => { fn.apply(this, args);

flag = true;

}, delay);

};

};

实现深拷贝

以下为简易版深拷贝，没有考虑循环引用的情况和Buffer、Promise、Set、Map的处理，如果一一实现，过于复杂，面试短时间写出来不太现实

const clone = parent => { // 判断类型

const isType =(target, type) => `[object ${type}]` === Object.prototype.toString.call(target)

// 处理正则 const getRegExp = re => {

let flags = "";

if (re.global) flags += "g";

if (re.ignoreCase) flags += "i";

if (re.multiline) flags += "m";

return flags;

};

const _clone = parent => { if (parent === null) return null;

if (typeof parent !== "object") return parent;

let child, proto;

if (isType(parent, "Array")) { // 对数组做特殊处理

child = [];

} else if (isType(parent, "RegExp")) { // 对正则对象做特殊处理

child = new RegExp(parent.source, getRegExp(parent));

if (parent.lastIndex) child.lastIndex = parent.lastIndex;

} else if (isType(parent, "Date")) { // 对Date对象做特殊处理

child = new Date(parent.getTime());

} else { // 处理对象原型

proto = Object.getPrototypeOf(parent);

// 利用Object.create切断原型链 child = Object.create(proto);

return _clone(parent);

};

实现Promise

重点难点，比较复杂

用法

new Promise((resolve, reject) => { //异步成功执行resolve，否则执行reject

}).then((res) => { //resolve触发第一个回调函数执行

}, (err) => { //reject触发第二个回调函数执行

}).then(res => { //需要保证then方法返回的依然是promise

//这样才能实现链式调用 }).catch(reason => {

});

//等待所有的promise都成功执行then， //反之只要有一个失败就会执行catch

Promise.all([promise1, ...]).then();

js

（1）初步实现Promise：

1）实现三种状态：‘pending’, 'fulfilled', 'rejected'

2）能够实现then方法两种回调函数的处理

//promise.js class Promise{

//传一个异步函数进来 constructor(excutorCallBack){

this.status = 'pending';

this.value = undefined;

this.fulfillAry = [];

this.rejectedAry = [];

//=>执行Excutor let resolveFn = result => {

if(this.status !== 'pending') return;

let timer = setTimeout(() => { this.status = 'fulfilled';

this.value = result;

this.fulfillAry.forEach(item => item(this.value));

}, 0);

})

};

try{ //执行这个异步函数

excutorCallBack(resolveFn, rejectFn);

} catch(err) { //=>有异常信息按照rejected状态处理

rejectFn(err);

} }

then(fulfilledCallBack, rejectedCallBack) { //resolve和reject函数其实一个作为微任务

//因此他们不是立即执行，而是等then调用完成后执行 this.fulfillAry.push(fulfilledCallBack);

this.rejectedAry.push(rejectedCallBack);

//一顿push过后他们被执行 }

}

module.exports = Promise;

测试如下：

let Promise = require('./promise');

let p1 = new Promise((resolve, reject) => { setTimeout(() => {

Math.random()<0.5?resolve(100):reject(-100);

}, 1000)

}).then(res => { console.log(res);

}, err => { console.log(err);

})

（2）完成链式效果

最大的难点在于链式调用的实现，具体来说就是then方法的实现。

//then传进两个函数 then(fulfilledCallBack, rejectedCallBack) {

//保证两者为函数 typeof fulfilledCallBack !== 'function' ? fulfilledCallBack = result =>

result:null;

typeof rejectedCallBack !== 'function' ? rejectedCallBack = reason => { throw new Error(reason instanceof Error? reason.message:reason);

} : null //返回新的Promise对象，后面称它为“新Promise”

//把then里面的方法拿过来执行 //执行的目的已经达到

let x = fulfilledCallBack(this.value);

//下面执行之后的下一步，也就是记录执行的状态，决定新Promise如何表现 //如果返回值x是一个Promise对象，就执行then操作

//如果不是Promise,直接调用新Promise的resolve函数, //新Promise的fulfilAry现在为空,在新Promise的then操作后.新Promise的resolve执

行 x instanceof Promise ? x.then(resolve, reject):resolve(x);

}catch(err){ reject(err)

} });

//以下同理 this.rejectedAry.push(() => {

try { let x = this.rejectedCallBack(this.value);

x instanceof Promise ? x.then(resolve, reject):resolve(x);

}catch(err){ reject(err)

} })

}) ;

}

测试用例：

let p1 = new Promise((resolve, reject) => { setTimeout(() => {

Math.random()<0.5?resolve(100):reject(-100);

}, 1000)

})

let p2 = p1.then(result => { //执行then返回的是一个新的Promise

return result + 100;

})

let p3 = p2.then(result => { console.log(result);

}, reason => { console.log(reason)

})

简单画图来模拟一下链式调用的内部流程：

有了then方法，catch自然而然调用即可：

catch(rejectedCallBack) { return this.then(null, rejectedCallBack);

}

（3）Promise.all()

接下来实现Promise.all()

//为类的静态方法，而不是在原型上 static all(promiseAry = []) {

let index = 0, result = [];

return new Promise((resolve, reject) => { for(let i = 0; i < promiseAry.length; i++){

promiseAry[i].then(val => { index++;

result[i] = val;

if( index === promiseAry.length){ resolve(result)

} }, reject);

} })

}

（4）Promise.race()

接下来是race方法

static race(promises) { return new Promise((resolve, reject) => {

if (promises.length === 0) {

}, reject);

} }

});

}

（5）Promise.resolve()

static resolve (value) { if (value instanceof Promise) return value

return new Promise(resolve => resolve(value))

}

（6）Promise.reject()

static reject (value) { return new Promise((resolve, reject) => reject(value))

}

完整代码

现在手写一个简陋但是功能较为完备的Promise就大功告成了。

class Promise{ constructor(excutorCallBack){

this.status = 'pending';

this.value = undefined;

this.fulfillAry = [];

this.rejectedAry = [];

//=>执行Excutor let resolveFn = result => {

if(this.status !== 'pending') return;

let timer = setTimeout(() => { this.status = 'fulfilled';

this.value = result;

this.fulfillAry.forEach(item => item(this.value));

}, 0);

};

let rejectFn = reason => { if(this.status !== 'pending')return;

let timer = setTimeout(() => { this.status = 'rejected';

this.value = reason;

this.rejectedAry.forEach(item => item(this.value))

} }

then(fulfilledCallBack, rejectedCallBack) { typeof fulfilledCallBack !== 'function' ? fulfilledCallBack = result =>

result:null;

typeof rejectedCallBack !== 'function' ? rejectedCallBack = reason => { throw new Error(reason instanceof Error? reason.message:reason);

} : null

return new Promise((resolve, reject) => { this.fulfillAry.push(() => {

try { let x = fulfilledCallBack(this.value);

x instanceof Promise ? x.then(resolve, reject ):resolve(x);

}catch(err){ reject(err)

} });

this.rejectedAry.push(() => { try {

let x = this.rejectedCallBack(this.value);

x instanceof Promise ? x.then(resolve, reject):resolve(x);

}catch(err){ reject(err)

} })

}) ;

} catch(rejectedCallBack) {

return this.then(null, rejectedCallBack);

} static all(promiseAry = []) {

let index = 0, result = [];

return new Promise((resolve, reject) => { for(let i = 0; i < promiseAry.length; i++){

promiseAry[i].then(val => { index++;

result[i] = val;

if( index === promiseAry.length){ resolve(result)

} }, reject);

} })

} static race(promiseAry) {

return new Promise((resolve, reject) => { if (promiseAry.length === 0) {

return;

}