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

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

手写深拷贝 (deepClone)

/**
 * 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)

• 逻辑同深拷贝类似，浅拷只会影响一层数据结构

/**
 * 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 } }

手写 new 操作符 (customNew)

/**
 * 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)

/**
 * 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)

/**
 * 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);
    }
};

特殊字符描述：

1. 问题标注 Q:(question)
2. 答案标注 R:(result)
3. 注意事项标准：A:(attention matters)
4. 详情描述标注：D:(detail info)
5. 总结标注：S:(summary)
6. 分析标注：Ana:(analysis)
7. 提示标注：T:(tips)