面试必考: 手撕代码系列 (一)

/** * deepClone 深拷贝 * @param {*} source 源对象(需要拷贝的对象) * @returns 新对象 */const deepClone = source => {    // 存储结果    const obj = {};    // for...in 方法：遍历对象时 key 为对象的键；遍历数组时 key 为数组下标 index    for (const key in source) {        // Object.prototype.hasOwnProperty.call(); 方法是一个常用的，安全监测对象是否含有某个属性的方法，使用此方法可避免 hasOwnProperty 属性被污染或被重写的风险。        if (Object.prototype.hasOwnProperty.call(source, key)) {            // Object.prototype.toString.call(); 通过原型的方式判断一个值的类型            // 为什么使用 xxx.slice(8, -1)？            // 因为 Object.prototype.toString.call() 返回的值是 [object Object], 使用 slice 方法截取            if (Object.prototype.toString.call(source[key]).slice(8, -1) === 'Object') {                // 递归                obj[key] = deepClone(source[key]);            } else {                // 赋值                obj[key] = source[key];            }        }    }    return obj;};

// test:const a = {    age: 12,    otherInfo: {        sex: 0,    },};
const b = deepClone(a);
b.age = 22;b.otherInfo.sex = 1;
console.log('a------>', a); // a------> { age: 12, otherInfo: { sex: 0 } }console.log('b------>', b); // b------> { age: 22, otherInfo: { sex: 1 } }

/** * shallowClone 浅拷贝 * @param {*} source 源对象(需要拷贝的对象) * @returns 新对象 */const shallowClone = source => {    const obj = {};    for (const key in source) {        if (Object.prototype.hasOwnProperty.call(source, key)) {            obj[key] = source[key];        }    }    return obj;};

// test:const a = {    age: 12,    otherInfo: {        sex: 0,    },};
const b = shallowClone(a);
b.age = 22;b.otherInfo.sex = 1;
console.log('a------>', a); // a------> { age: 12, otherInfo: { sex: 1 } }console.log('b------>', b); // b------> { age: 22, otherInfo: { sex: 1 } }

/** * customNew new操作符 * @param {*} fn 普通函数(!不能是箭头函数) * @param {*} rest 参数 * @returns 新对象(类似于实例) */const customNew = (fn, ...rest) => {    // 1.创建一个新对象    const obj = {};    // 2.让新对象的隐士原型等于函数的显示原型    obj.__proto__ = fn.prototype;    // 3.绑定 this, 让函数的 this 指向这个新对象(也就是绑定一些属性)    const res = fn.apply(obj, rest);    // 4.判断返回    return Object.prototype.toString.call(res).slice(8, -1) === 'Object' ? res : obj;};

// test:function Person(name, age) {    this.name = name;    this.age = age;}
Person.prototype.getName = function () {    return this.name;};
const person = customNew(Person, 'John', 11);
console.log('person ------->', person); // person -------> Person { name: 'John', age: 11 }console.log('person.getName() ------->', person.getName()); // person.getName() -------> John

/** * throttle 节流 * 某一段时间内只触发一次，按第一次来算 * @param {*} fn 方法 * @param {*} time 时间(默认 1500ms) * @returns */const throttle = (fn, time = 1500) => {    // 标记状态    let flag = null;    return function () {        // 若 flag 为 true, 则继续执行，不做任何操作        if (flag) return;        // 更改标记状态        flag = true;        // 执行方法        fn();        // 定时器        let timer = setTimeout(() => {            // time 结束，修改 flag = false            flag = false;            // 清除定时器标记            clearTimeout(timer);        }, time);    };};

/** * debounce 防抖 * 某一段时间内只触发一次，按最后一次来算 * @param {*} fn 方法 * @param {*} time 时间(默认 1500ms) * @returns */const debounce = (fn, time = 1500) => {    // 定期器标记    let timer = null;    return function () {        // 若 timer 为 true, 则停止之前方法，重新开始        timer && clearTimeout(timer);        timer = setTimeout(() => {            // 执行方法            fn();        }, time);    }};