前端高频编程题

---

前言

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) {
    // 待处理的url
    const urlList = [...urls];

    // 请求结果，key: url, value: res
    const 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());
        }
    });
}

---