1、手写Promise
class Promise2 {
state = "pending";
callbacks = [];
constructor(fn) {
fn(this.resolve.bind(this), this.reject.bind(this));
}
resolve(result) {
if (this.state !== "pending") return;
this.state = "fullFilled";
nextTick(() => {
this.callbacks.forEach((handle) => {
if (typeof handle[0] === "function") {
handle[0].call(undefined, result);
}
});
});
}
reject(reason) {
if (this.state !== "pending") return;
this.state = "rejected";
nextTick(() => {
this.callbacks.forEach((handle) => {
if (typeof handle[1] === "function") {
handle[1].call(undefined, reason);
}
});
});
}
then(success, fail) {
const handle = [];
if (typeof success === "function") {
handle[0] = success;
}
if (typeof fail === "function") {
handle[1] = fail;
}
this.callbacks.push(handle);
return this;
}
}
function nextTick(fn) {
if (process !== undefined && typeof process.nextTick === "function") {
return process.nextTick(fn);
} else {
var counter = 1;
const observer = new MutationObserver(fn);
var textNode = document.createTextNode(String(counter));
observer.observe(textNode, {
// 踪字符更改
characterData: true,
});
counter += 1;
textNode.data = String(counter);
}
}
// 方法返回一个Promise实例,此实例在 iterable 参数内所有的promise 都完成(resolved)时回调完成(resolve);
// 如果参数中 promise有一个失败(rejected),此实例回调失败(reject),失败的原因是第一个失败promise的结果。
Promise2.all = function(arrP) {
let list = [];
len = 0;
return new Promise2((resolve, reject) => {
for (let i = 0; i < arrP.length; i++) {
arrP[i].then(
(val) => {
list[i] = val;
len++;
len === arrP.length && resolve(list);
},
(err) => {
reject(error);
}
);
}
});
};
Promise.prototype.myAll = (iterator) => {
return new Promise((resolve, reject) => {
const ret = []
let count = 0
Array.from(iterator).forEach((item, index) => {
Promise.resolve(item).then(data => {
ret[index] = data
count++
if(count === iterator.length) {
resolve(ret)
}
}, reject)
})
})
}
// 方法返回一个Promise实例,一旦迭代器中的某个 promise 完成(resolved)或失败(rejected),返回的 promise 就会 resolve 或 reject
Promise2.race = function(arrP) {
let flag1 = false;
let flag2 = false;
return new Promise2((resolve, reject) => {
for (let i = 0; i < arrP.length; i++) {
arrP[i].then(
(data) => {
!flag2 && !flag1 && resolve(data);
flag1 = true;
return;
},
(error) => {
!flag2 && !flag1 && reject(error);
flag2 = true;
return;
}
);
}
});
};
new Promise2((resolve, reject) => {
let [val, time] = [Math.random(), Math.random() * 1000];
setTimeout(() => {
val > 0.2 ? resolve(val) : reject(val);
}, time);
}).then(
(val) => console.log("promise 测试:", val),
(err) => console.error("promise 测试:" + err)
);
const getPList = () => {
let arrP = [];
for (let i = 0; i < 10; i++) {
arrP[i] = new Promise2((resolve, reject) => {
let [v, t] = [Math.random(), Math.random() * 1000];
setTimeout(() => {
v > 0.1 ? resolve(v) : reject(v);
}, t);
});
}
return arrP;
};
Promise2.all(getPList()).then(
(data) => console.log("promise.all 测试:", data),
(err) => console.error("promise.all 测试:" + err)
);
Promise2.race(getPList()).then(
(data) => console.log("promise.race 测试:", data),
(err) => console.error("promise.race 测试:" + err)
);
2、手写new
// 新生成一个对象
// 将构造函数的作用域赋值给新对象(即绑定新对象的 this)
// 执行构造函数中的代码(即为这个新对象添加属性)
// 返回新对象
function myNew() {
// 创建对象
let obj = new Object();
// 取第一个参数
let fn = Array.prototype.shift.call(arguments);
//obj.__proto__指向fn.prototype
obj.__proto__ = fn.prototype;
// 执行结果
let result = fn.apply(obj, arguments);
return typeof result === "object" ? result : obj;
}
function Person(name) {
this.name = name;
}
// var p1 = myNew(Person, "xx");
// console.log(p1.name);
function P(name) {
this.name = name;
return 1;
}
var p2 = myNew(P, "xm");
console.log(p2);
3、手写instanceof
实现思路:
1、leftVaule代表实例对象
2.rightVaule代表构造函数
3.利用typeof方法,判断输入的leftVaule是否为对象,如果不是,则返回false
4.遍历leftVaule的原型链,直到找到rightVaule的prototype,如果查找失败的话,返回false,反之,返回true
function myInstanceof(leftValue, rightValue) {
if (typeof leftValue !== "object" || leftValue === null) return false;
let leftProto = leftValue.__proto__;
let rightProto = rightValue.prototype;
while (true) {
if (leftProto === null) {
return false;
}
if (leftProto === rightProto) {
return true;
}
leftProto = leftProto.__proto__;
}
}
myInstanceof([], Array);
4、并发请求限制
限制请求数,一个请求完成替换下一个请求
第一次分段
第二次添加下一个
控制startIndex与endIndex
终止态:返回值已等于请求数,执行cb
// class LimitFetch {}
//
// 第一次分段
// 第二次添加下一个
// 控制startIndex与endIndex
// 终止态:返回值已等于请求数,执行cb
class LimitFetch {
constructor(opts) {
this.requestList = opts.requestList;
this.limit = opts.limit;
this.cb = opts.cb;
this.startIndex = 0;
this.result = {};
this.resultCount = 0;
this.batchRequest();
}
batchRequest(num) {
const endIndex = this.startIndex + (num || this.limit);
const len = this.requestList.length;
for (let i = this.startIndex; i < endIndex; i++) {
this.startIndex++;
if (!this.requestList[i]) return;
this.requestList[i]().then((res) => {
this.result[i] = res;
this.resultCount++;
if (this.resultCount === len) {
this.cb(this.result);
}
if (i < len - 1) {
this.batchRequest(1);
}
});
}
}
}
// 函数写法
function limitFetch(requestList, limit, cb) {
let startIndex = 0;
let results = {};
let resultCount = 0;
function batchRequest(num) {
const endIndex = startIndex + (num || limit);
for (let i = startIndex, len = requestList.length; i < endIndex; i++) {
if (!requestList[i]) continue;
startIndex++;
requestList[i]().then((res) => {
resultCount++;
results[i] = res;
if (i < len - 1) {
batchRequest(1);
}
if (resultCount === len) {
cb(results);
}
});
}
}
batchRequest();
}
let requestList = [];
function fn(time) {
return function () {
// console.log(time);
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log(time);
resolve(time);
}, time);
});
};
}
for (let i = 0; i < 5; i++) {
requestList.push(fn(1 * 1000));
}
// limitFetch(requestList, 3, (res) => {
// console.log(res);
// });
new LimitFetch({
requestList,
limit: 3,
cb: (res) => {
console.log(res);
},
});
// 限制并发
// 可以新增加
class BtRequest{
constructor(opts) {
this.limit = opts.limit
this.isRequest = false
this.queue = []
}
add(fn) {
this.queue.push(fn)
if(!this.isRequest) {
this.request()
}
}
request(end) {
this.isRequest = true
end = end || this.limit
const requestList = this.queue.splice(0, end)
if(!requestList.length) {
this.isRequest = false
}
requestList.forEach(item => {
Promise.resolve(item()).then((res) => {
console.log(1,res);
this.request(1)
})
})
}
}
const request = new BtRequest({limit: 1})
request.add(() => {
console.log(100);
// return 500
})
request.add(() => {
console.log(200);
// return 600
})
request.add(() => {
console.log(300);
// return 700
})
request.add(() => {
console.log(400);
// return 800
})
5、手写发布订阅者
使用一个对象作为缓存
on 负责把方法发布到缓存的 EventName 对应的数组
emit 负责遍历触发(订阅) EventName 下的方法数组
off 找方法的索引,并删除
// 使用一个对象作为缓存
// on 负责把方法发布到缓存的 EventName 对应的数组
// emit 负责遍历触发(订阅) EventName 下的方法数组
// off 找方法的索引,并删除
function indexOf(a, b) {
return a.indexOf(b);
}
class EventBus {
constructor() {
this.cache = {};
}
on(eventName, fn) {
this.cache[eventName] = this.cache[eventName] || [];
this.cache[eventName].push(fn);
}
off(eventName, fn) {
const index = this.cache[eventName].indexOf(fn);
if (index !== -1) {
this.cache[eventName].splice(index, 1);
}
}
emit(eventName) {
this.cache[eventName].forEach((fn) => {
fn();
});
}
once(eventName, cb) {
const one = (...args) => {
cb(...args)
this.off(eventName, one)
}
this.on(eventName,one)
}
}
6、手写一个搜索的组件
支持防抖
<template>
<div>
{{a}}
<input type='text' @input="onInput()">
<p>{{res}}</p>
</div>
</template>
<script>
const fetch = () => Promise.resolve('this is fetch data')
export default{
data() {
return {
a: '1',
res: undefined
}
},
methods: {
deboundce(fn, time) {
let timer;
return function() {
if(timer) {
clearTimeout(timer)
}
timer = setTimeout(fn, time)
}
},
async fetchData() {
console.log(11)
// return Promise.resolve(1)
this.res = await fetch()
},
async onInput() {
const fn = this.deboundce(this.fetchData, 1000)
fn()
// console.log(data)
}
}
}
</script>
7、手写Promise.allSettled
Promise.allSettled 只关心所有 promise 是不是都被 settle 了,不管其是 rejected状态的 promise,还是非 rejected状态(即fulfilled)的 promise, 我都可以拿到它的最终状态并对其进行处理
Promise.allSettled 的结果数组中可能包含以下两种格式的数据
{status:"fulfilled", value:result} 对于成功的响应
{status:"rejected", reason:error} 对于 error
const promise1 = Promise.resolve(3)
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100,'foo'))
const promise3 = [promise1, promise2]
Promise.myAllSettled = function(promises) {
return new Promise(resolve => {
const data = [], len = promises.length
let count = len;
for(let i = 0; i < len; i++) {
const promise = promises[i]
promise.then(res => {
data[i] = {status: 'fulfilled', value: res}
},error => {
data[i] = {status: 'rejected', value: error}
}).finally(() => {
if(!--count) {
resolve(data)
}
})
}
})
}
Promise.myAllSettled(promise3)
.then(results => results.forEach(result => console.log(result.status)))
8、手写bind
要支持能做为构造函数
思路:Function 的原型对象上增加一个函数,返回值是一个函数,函数的fn.prototype.constructor 指向函数和函数的 prototype 指向 Object.create(this.prototype)
const obj = {
name: 'xiao'
}
function func(first,last){
console.log(first + this.name, last);
}
Function.prototype.myBind = function(context,...args ){
console.log(context);
context.fn = this;
const fn = function() {
context.fn.apply(context,[...args])
}
fn.prototype = Object.create(this.prototype)
fn.prototype.constructor = this;
return fn
}
const fn1 = func.myBind(obj,'li', 'ming')
fn1()
const fn2 = new fn1()
console.log(fn2);
9、手写一个防抖
// 防抖 // 不管事件触发频率多高,一定在事件触发n秒后才执行,如果你在一个事件触发的 n 秒内又触发了这个事件,就以新的事件的时间为准,n秒后才执行,总之,触发完事件 n 秒内不再触发事件,n秒后再执行。 // 关联记忆: 函数防抖就是法师发技能的时候要读条,技能读条没完再按技能就会重新读条。
function debounce(fn, wait, immediate) {
let timeout;
return function () {
let context = this;
let args = arguments;
if (timeout) clearTimeout(timeout);
if (immediate) {
var callNow = !timeout;
timeout = setTimeout(() => {
timeout = null;
}, wait);
if (callNow) fn.apply(context, args);
} else {
timeout = setTimeout(function () {
fn.apply(context, args);
}, wait);
}
};
}
10、手写一个 深拷贝
// 基础版本
function clone2=(target, map = new WeakMap()) {
if (typeof target === 'object') {
let cloneTarget = Array.isArray(target) ? [] : {};
if(map.get(target)) return map.get(target)
map.set(target, cloneTarget)
for (const key in target) {
cloneTarget[key] = clone(target[key], map);
}
return cloneTarget;
} else {
return target;
}
};
// 资深版本
function isObject (target) {
const type = typeof target
return target !== null && (type === 'object' || type === 'function')
}
function getType(target) {
return Object.prototype.toString.call(target)
}
function getInit(target) {
const Ctor = target.constructor
return new Ctor()
}
const mapTag = '[object Map]';
const setTag = '[object Set]';
const arrayTag = '[object Array]';
const objectTag = '[object Object]';
const argsTag = '[object Arguments]'
const boolTag = '[object Boolean]';
const dateTag = '[object Date]';
const errorTag = '[object Error]';
const numberTag = '[object Number]';
const regexpTag = '[object RegExp]';
const stringTag = '[object String]';
const symbolTag = '[object Symbol]';
const funcTag = '[object Function]'
function forEach(array, iteratee) {
let index = -1;
const length = array.length;
while (++index < length) {
iteratee(array[index], index);
}
return array;
}
const deepTag = [mapTag, setTag, arrayTag, objectTag, argsTag]
//TODO: Reg 的拷贝方法
function cloneReg(targe) {
const reFlags = /\w*$/;
const result = new targe.constructor(targe.source, reFlags.exec(targe));
result.lastIndex = targe.lastIndex;
return result;
}
//TODO: Symbol 的拷贝方法
function cloneSymbol(targe) {
return Object(Symbol.prototype.valueOf.call(targe));
}
//TODO: cloneFunction
function cloneFunction(func) {
const bodyReg = /(?<={)(.|\n)+(?=})/m;
const paramReg = /(?<=().+(?=)\s+{)/;
const funcString = func.toString();
if (func.prototype) {
console.log('普通函数');
const param = paramReg.exec(funcString);
const body = bodyReg.exec(funcString);
if (body) {
console.log('匹配到函数体:', body[0]);
if (param) {
const paramArr = param[0].split(',');
console.log('匹配到参数:', paramArr);
return new Function(...paramArr, body[0]);
} else {
return new Function(body[0]);
}
} else {
return null;
}
} else {
return eval(funcString);
}
}
function cloneOtherType(targe, type) {
//TODO: constructor
const Ctor = targe.constructor;
switch (type) {
case boolTag:
case numberTag:
case stringTag:
case errorTag:
case dateTag:
return new Ctor(targe);
case regexpTag:
return cloneReg(targe);
case symbolTag:
return cloneSymbol(targe);
case funcTag:
return cloneFunction(targe)
default:
return null;
}
}
function clone(target, map = new WeakMap()) {
if(!isObject(target)) return target
const type = getType(target)
let cloneTarget
if(deepTag.includes(type)) {
cloneTarget = getInit(target, type)
}else {
return cloneOtherType(target, type)
}
if (map.get(target)) {
return map.get(target);
}
map.set(target, cloneTarget);
if(type === setTag) {
target.forEach(val => {
cloneTarget.add(clone(val, map))
})
return cloneTarget
}
// 克隆map
if (type === mapTag) {
target.forEach((value, key) => {
cloneTarget.set(key, clone(value,map));
});
return cloneTarget;
}
// 克隆对象和数组
const keys = type === arrayTag ? undefined : Object.keys(target);
forEach(keys || target, (value, key) => {
if (keys) {
key = value;
}
cloneTarget[key] = clone(target[key], map);
});
return cloneTarget;
}
标签:function,resolve,return,前端,面试,let,const,手写,fn
From: https://www.cnblogs.com/yiyi17/p/17608631.html