前言
系列首发于公众号『前端进阶圈』 ，若不想错过更多精彩内容，请“星标”一下，敬请关注公众号最新消息。
手撕代码系列(二)
手写函数柯里化 curring
/** * 函数柯里化 curring * @param {Function} * @return 视具体方法而定 * * @logic * 1.创立一个参数数组 args * 2.创立一个函数，接管参数列表 * 3.函数判断参数数组是否有值 * 4.如果有值，则往 args 中进行 push 操作，否则就是没有参数了，则间接进行调用 * 5.调用后，将 args 参数数组清空 * 6.返回参数数组 */const curring = fn => { let args = []; return function temp(...rest) { if (rest.length) { args.push(...rest); return temp; } else { let result = fn.apply(this, args); args = []; return result; } }}// test:const add = (...args) => { return args.reduce((prev, next) => prev + next, 0);}console.log(curring(add)(1)(2)(3)(4)(5)()); // 15console.log(curring(add)(1)(2)(3)(4,5)()); // 15console.log(curring(add)(1,2)(3,4,5)()); // 15console.log(curring(add)(1)(2,3,4,5)()); // 15手写数组乱序办法 shuffle
/** * 随机洗牌 * @param {Array} arr 要被打乱的数组 * @returns 打乱后的元素 * * @logic * 1. 从还没解决的数组中，从 [0, array.length] 之间取一个随机数 random number * 2. 从剩下的 array.length 中把第 random 元素取出来放在新数组 result 中 * 3. 删除原数组中第 random 个元素 * 4. 反复2,3步骤直到所有元素取完 * 5. 最终返回新数组即可 */const shuffle = source => { let arr = Array.from(source); let result = []; while (arr.length) { let random = (Math.random() * arr.length) | 0; // let random = Math.floor(Math.random() * arr.length); // let random = (Math.random() * arr.length) >> 0; // let random = (Math.random() * arr.length) << 0; // let random = (Math.random() * arr.length) >>> 0; // let random = ~~(Math.random() * arr.length); result.push(arr[random]); arr.splice(random, 1) } return result;}// test:let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];console.log("shuffle(numbers) ------->", shuffle(numbers));// shuffle(numbers) -------> [// 9, 1, 17, 6, 10, 12, 18,// 19, 20, 8, 13, 2, 11, 15,// 7, 4, 16, 14, 5, 3// ]手写解析 URL Params 办法 getUrlParams
/** * 解析 URL Params getUrlParams * @param {String} urlStr * @return {Object} 参数对象 */// 办法一：const getUrlParams = url => { // 解析url,获取参数局部 let urlStr = url.split('?')[1]; // 判断是否有 hash 值 let newStr = ''; // 去重 hash 值逻辑 if (urlStr.includes('#')) { newStr = urlStr.split('#')[0]; } // 参数重置化 let res = new URLSearchParams(newStr); // Object.fromEntries() 办法将 key value 数组模式转换为对象; /** demo: let obj = { a: 1, b: 2 } console.log(Object.fromEntries(Object.entries(obj))); */ return Object.fromEntries(res.entries())}// 办法二：const getUrlParams = url => { let urlParams = new URL(url); return Object.fromEntries(urlParams.searchParams.entries());}// test:let tempUrl = "https://www.baidu.com:80/temp/src/index.html?name=John&sex=14#hash=title";console.log("getUrlParams(tempUrl) ------->", getUrlParams(tempUrl));// getUrlParams(tempUrl) -------> { name: 'John', sex: '14' }手写数组扁平化 myFlat
/** * 数组扁平化 myFlat * @param {Array} source 须要扁平化的数组 * @returns 扁平化后的新数组 */// 办法一：const myFlat = source => { // 后果数组 let result = []; // 遍历 for (let i = 0; i < source.length; i++){ // 数组元素 let item = source[i]; // 判断以后项是否为数组，若是数组递归执行 if (Array.isArray(item)) { // result.concat(myFlat(item)) 应用之前的列表(result)拼接以后的列表(item)，因为 concat 不会批改原数组，从新赋值给 result 数组 result = result.concat(myFlat(item)); } else { // 不是数组，则增加到 result 数组中 result.push(item); } } // 返回后果 return result;}// 办法二：// some + 扩大运算符：通过 while 循环来继续判断以后项是否为数组，如果为数组，间接批改原数组 arr 等于 空数组开展以后数组，按此逻辑继续执行。// some：如果有一个满足条件，则返回 true, 后续将和 includes 和 indexof 办法一样，不会再进行后续检测，如果不满足则返回 false// any: 数组中的所有元素都满足条件，返回 boolean 值。const MyFlat = (arr) => { while (arr.some((item) => Array.isArray(item))) { console.log(arr); arr = [].concat(...arr); } return arr;};// 办法三：// split + toString(): 此办法弊病，如果数组中的元素都是数字，那通过此办法会间接转为字符串。const MyFlat = (arr) => { return arr.toString().split(",");};// 办法四：// ES6 flatconst MyFlat = (arr) => { return arr.flat(Infinity);};// test:let arr = [1, [2, [3, 4, 5]]];console.log("myFlat(arr) after------>", myFlat(arr)); // myFlat(arr) after------> [ 1, 2, 3, 4, 5 ]手写 myInstanceof
/** * instanceof * instanceof 运算符用户检测构造函数的 prototype 属性是否呈现在某个实例对象的原型链上。 * 语法：object(实例对象) instanceof constructor(构造函数，与 prototype 是成对呈现的，你指向我，我指向你) * @param {Object} object 某个实例对象 * @param {Function} constructorFn 某个构造函数 * @return {Boolean} */const myInstanceof = (object, constructorFn) => { // Object.getPrototypeOf(object) === object.__proto__; 都是用来获取某个对象的隐式原型 let objectRes = Object.getPrototypeOf(object); // prototype：显式原型 const constructorRes = constructorFn.prototype; while (true) { if (!objectRes) return false; // 如果构造函数的 prototype 在对象的实例中，间接返回 true if (objectRes === constructorRes) return true; // 持续向下寻找 objectRes = Object.getPrototypeOf(objectRes); }};// test:function F() { };function D() { };let f = new F();// 示意: 构造函数 F 是否呈现在 f 对象实例上console.log(myInstanceof(f, F)); // true// 示意: 构造函数 D 是否呈现在 f 对象实例上console.log(myInstanceof(f, D)); // false特殊字符形容：
- 问题标注
Q:(question) - 答案标注
R:(result) - 注意事项规范：
A:(attention matters) - 详情形容标注：
D:(detail info) - 总结标注：
S:(summary) - 剖析标注：
Ana:(analysis) 提醒标注：
T:(tips)往期举荐：
- 前端面试实录HTML篇
- 前端面试实录CSS篇
- JS 如何判断一个元素是否在可视区域内？
- Vue2、3 生命周期及作用？
- 排序算法：QuickSort
- 箭头函数与一般函数的区别？
- 这是你了解的CSS选择器权重吗？
- JS 中 call, apply, bind 概念、用法、区别及实现？
- 罕用位运算办法？
- Vue数据监听Object.definedProperty()办法的实现
- 为什么 0.1+ 0.2 != 0.3，如何让其相等？
- 聊聊对 this 的了解？
JavaScript 为什么要进行变量晋升，它导致了什么问题？
最初：
- 欢送关注 『前端进阶圈』 公众号 ，一起摸索学习前端技术......
- 公众号回复 加群 或 扫码, 即可退出前端交流学习群，一起高兴摸鱼和学习......
- 公众号回复 加好友，即可添加为好友