关于前端:手撕代码系列二

前言

系列首发于公众号『前端进阶圈』，若不想错过更多精彩内容，请“星标”一下，敬请关注公众号最新消息。

手撕代码系列(二)

手写函数柯里化 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)());  // 15
console.log(curring(add)(1)(2)(3)(4,5)()); // 15
console.log(curring(add)(1,2)(3,4,5)()); // 15
console.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 flat
const 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

特殊字符形容：

1. 问题标注 Q:(question)
2. 答案标注 R:(result)
3. 注意事项规范：A:(attention matters)
4. 详情形容标注：D:(detail info)
5. 总结标注：S:(summary)
6. 剖析标注：Ana:(analysis)

7. 提醒标注：T:(tips)

   往期举荐：

8. 前端面试实录 HTML 篇
9. 前端面试实录 CSS 篇
10. JS 如何判断一个元素是否在可视区域内？
11. Vue2、3 生命周期及作用？
12. 排序算法：QuickSort
13. 箭头函数与一般函数的区别？
14. 这是你了解的 CSS 选择器权重吗？
15. JS 中 call, apply, bind 概念、用法、区别及实现？
16. 罕用位运算办法？
17. Vue 数据监听 Object.definedProperty()办法的实现
18. 为什么 0.1+ 0.2 != 0.3，如何让其相等？
19. 聊聊对 this 的了解？

20. JavaScript 为什么要进行变量晋升，它导致了什么问题？

    最初：

21. 欢送关注『前端进阶圈』公众号，一起摸索学习前端技术 ……
22. 公众号回复 加群 或 扫码, 即可退出前端交流学习群，一起高兴摸鱼和学习 ……
23. 公众号回复 加好友，即可添加为好友