简单的几个面试题笔记

最近前端笔试中常见的一些方法总结

工具函数

1. 防抖函数

const debounce = (fn, delay = 1000) => {
    let timeout = null; // 创建一个标记用来存放定时器的返回值
    return function () {
        // 每当用户输入的时候把前一个 setTimeout clear 掉
        clearTimeout(timeout);
        // 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数
        timeout = setTimeout(() => {
            fn.apply(this, arguments);
        }, delay);
    };
}

2. 节流函数

const debounce = (fn, delay = 1000) => {
    let timeout = null; // 创建一个标记用来存放定时器的返回值
    return function () {
        // 每当用户输入的时候把前一个 setTimeout clear 掉
        clearTimeout(timeout);
        // 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数
        timeout = setTimeout(() => {
            fn.apply(this, arguments);
        }, delay);
    };
}

字符串的一些方法

1. 转换驼峰字符串

let strTest = 'hello-word'
function convertStr(str) {
    let arr = str.split('-')
    let value = ''
    for(let i = 1; i < arr.length; i++) {
        arr[i] = arr[i][0].toUpperCase() + arr[i].substr(1, arr[i].length - 1)
    }
    value = arr.join('')
    return value
}
convertStr(strTest)

2. rgb颜色转换成16进制颜色

let colorTest = 'rgb(255,189,255)';
function rgbTo16(color) {
 let arr = color.slice(4, color.length -1).split(',');
 let value = '#'
arr.forEach(item => {
    value += Number(item).toString(16)
})
 return value
}
rgbTo16(colorTest)

3. 反转字符串

let strTest = 'hello world'
function reverseStr(str) {
    return str.split('').reverse().join('')
}
reverseStr(strTest)

数组常用方法

1. 数组排序

// 冒泡排序
let arrTest1 = [10, 14, 7, 9, 34, 50]
function bubbleSort(arr) {
    for (let i = 0; i < arr.length - 1; i++) {
        for (let j = 0; j < arr.length - 1 - i; j++) {
            if (arr[j] > arr[j + 1]) {
                let t = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = t;
            }
        }
    }
    return arr;
}
bubbleSort(arrTest1)
// 选择排序
let arrTest2 = [10, 14, 7, 9, 34, 50]
function selectionSort(arr) {
    let value = []
    for (let i = 0; i < arr.length; i++) {
        value[i] = arr[i];
        // console.log(value)
        for (let j = i + 1; j < arr.length; j++) {
            if(value[i] > arr[j]) {
                let t = value[i];
                value[i] = arr[j];
                arr[j] = t;
            }
        }
    }
    return value;
}
selectionSort(arrTest2)

2. 反转数组

let arrTest = [1, 2, 3, 4, 5]
function reverseArr(arr) {
    let len = arr.length;
    let num = Math.floor(len / 2);
    for (let i = 0; i < num; i++) {
        let temp = arr[i];
        arr[i] = arr[len - i - 1];
        arr[len - i - 1] = temp;
    }
    return arr;
}
reverseArr(arrTest)

对象常用方法

1. 实现对象深拷贝

let objTest = {
    value:'hello world',
    value1:undefined,
    value2:null,
    value3:true,
    value4: {
        a: {
            b: {
                c() {
                    console.log(11)
                },
                d:[1, 2, 3, 4]
            }
        }
    },
    value5: [1, 2, 3, 43],
    value6() {
        console.log(this.value)
    }
}
function deepClone(data) {
    let value
    if( data instanceof Array ) {
        value = []
        for(let item of data) {
            value.push(deepClone(item))
        }
    } else if( data instanceof Function) {
        value = data
    } else if( data instanceof Object ) {
        value = {}
        for(let key in data) {
            value[key] = deepClone(data[key])
        }
    }
    else {
        value = data
    }
    return value
}
deepClone(objTest)