文章目录
- 前言
- 1.防抖
- 2.节流
- 3.数组去重
- 4.数组拍平
- 5.深拷贝
- 6.柯里化
- 7.并发请求
前言
JS常见面试编程题
1.防抖
function debounce(fn, delay) {let timer = null;return function(...args) {if (timer) {clearTimeout(timer)}timer = setTimeout(()=>{timer = null;fn.apply(this, args);}, delay)}
}
2.节流
function throttle(fn, interval) {let lastTime;let timer;return function(...args) {const now = Date.now();if(lastTime && now - lastTime < interval) {clearTimeout(timer);timer = setTimeout(() => {last = now;fn.apply(this, args)}, interval)}else {last = now;fn.apply(this, args)}}
}
3.数组去重
function deDuplicated(arr) {// return Array.from(new Set(arr));return [...new Set(arr)];
}function deDuplicated2(arr) {const result = [];arr.forEach(item => {if (!result.includes(item)) {result.push(item);}});return result;
}function deDuplicated3(arr) {const record = {};return arr.filter((item) => {const hasItem = record[item];record[item] = 1;return !hasItem;});
}
4.数组拍平
function flat(arr) {return arr.flat();
}function flat2(arr) {return arr.toString().split(',');
}function flat3(arr) {const result = [];const process = list => {list.forEach(item => {if (Array.isArray(item)) {process(item);}else {result.push(item);}});};process(arr);return result;
}
5.深拷贝
function getType(varible) {return Object.prototype.toString.call(varible);
}// 递归实现
// 注意不同类型变量的拷贝
function deepClone(any){switch(getType(any)) {// 拷贝对象case '[object Object]':let o = {};for (let key in any) {o[key] = deepClone(any[key]);}return o;// 拷贝数组case '[object Array]':var arr = []for(let i = 0, len = any.length; i < len; i++) {arr[i] = deepClone(any[i]);}return arr;// 拷贝函数case '[object Function]':return new Function('return ' + any.toString()).call(this);// 拷贝日期case '[object Date]':return new Date(any.valueOf());// 拷贝正则case '[object RegExp]':return new RegExp(any);// 拷贝映射case '[object Map]':let m = new Map();any.forEach((v, k)=>{m.set(k, deepClone(v));});return m;// 拷贝集合case '[object Set]':let s = new Set();for (let val of any.values()) {s.add(deepClone(val));}return s;default:return any;}
}// 性能稍差,并且只能拷贝普通对象
function deepClone(any) {return JSON.parse(JSON.stringify(any));
}
6.柯里化
// 实现一个add方法,使计算结果能够满足如下预期:
add(1)(2)(3) = 6;
add(1, 2, 3)(4) = 10;
add(1)(2)(3)(4)(5) = 15;function add() {// 第一次执行时,定义一个数组专门用来存储所有的参数var _args = Array.prototype.slice.call(arguments);// 在内部声明一个函数,利用闭包的特性保存_args并收集所有的参数值var _adder = function() {_args.push(...arguments);return _adder;};// 利用toString隐式转换的特性,当最后执行时隐式转换,并计算最终的值返回_adder.toString = function () {return _args.reduce(function (a, b) {return a + b;});}return _adder;
}
7.并发请求
// 由于urls列表是已知的,且不会动态添加,因此逻辑比较简单
// 就是先并发请求,然后每个请求结束时候再补位,直到传入的url都请求完
function multiRequest(urls, maxNum) {// 待处理的urlconst urlList = [...urls];// 请求结果,key: url, value: resconst responseMap = new Map();return new Promise((resolve) => {const onComplete = res => {responseMap.set(url, res);if (urlList.length) {request(urlList.pop());}else {resolve(urls.map(url => responseMap[url]));}};const request = url => {return fetch(url).then(onComplete, onComplete);;};// 初始化,开始并行请求for (let i = 0; i < maxNum && urlList.length; i++) {request(urlList.pop());}});
}