JavaScript手写题
Pcjmy2022-09-05JavaScript面试题
JavaScript 手写题
深克隆
function deepClone(obj = {}) {
if (typeof obj == null || typeof obj !== "object") {
return obj;
}
let res;
if (obj instanceof Array) {
res = [];
} else {
res = {};
}
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
res[key] = deepClone(obj[key]);
}
}
return res;
}
节流 throttle
单位时间内，频繁触发事件，只执行一次
- 典型场景：高频事件快速点击、鼠标滑动、resize事件、scroll事件
- 代码思路是利用定时器，等定时器执行完毕，才开启定时器（不要打断）
function throttle(fn, delay = 100) {
let timer = null;
return function () {
if (timer) {
return;
}
timer = setTimeout(() => {
fn.apply(this, arguments);
timer = null;
}, delay);
};
}
防抖 debounce
单位时间内，频繁触发事件，只执行最后一次
- 典型场景：搜索框搜索输入
- 代码思路是利用定时器，每次触发先清掉以前的定时器（从新开始）
function debounce(fn, delay = 500) {
// timer是闭包中的
let timer = null;
return function () {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fn.apply(this, arguments);
timer = null;
}, delay);
};
}
Promise.all
Promise.myAll = (promises) => {
return new Promise((resolve, reject) => {
let count = 0
let result = []
const len = promises.length
if (len === 0) {
return resolve([])
}
promises.forEach((p, i) => {
Promise.resolve(p).then((res) => {
count += 1
result[i]=res
if(count === len) {
resolve(result)
}
}).catch(reject)
})
})
}
const p1 = Promise.resolve(1)
const p2 = new Promise((resolve) => {
setTimeout(() => resolve(2), 1000)
})
const p3 = new Promise((resolve) => {
setTimeout(() => resolve(3), 3000)
})
const p4 = Promise.reject('err4')
const p5 = Promise.reject('err5')
// 1. 所有的Promise都成功了
const p11 = Promise.myAll([ p1, p2, p3 ])
.then(console.log) // [ 1, 2, 3 ]
.catch(console.log)
// 2. 有一个Promise失败了
const p12 = Promise.myAll([ p1, p2, p4 ])
.then(console.log)
.catch(console.log) // err4
// 3. 有两个Promise失败了，可以看到最终输出的是err4，第一个失败的返回值
const p13 = Promise.myAll([ p1, p4, p5 ])
.then(console.log)
.catch(console.log) // err4
// 与原生的Promise.all返回是一致的
Promise.race
Promise.myRace = (promises) => {
return new Promise((resolve, reject) => {
promises.forEach((p) => {
Promise.resolve(p).then(resolve).catch(reject)
})
})
}
const p1 = new Promise((resolve, reject) => {
setTimeout(resolve, 500, 1)
})
const p2 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, 2)
})
Promise.myRace([p1, p2]).then((value) => {
console.log(value) // 2
})
Promise.myRace([p1, p2, 3]).then((value) => {
console.log(value) // 3
})