js手写面试题

1.数据类型判断

typeOf适用于判断undefined、Boolean、Number、string、symbole、function,但是对于其他的类型，比如null、date来判断数据类型可能会不准确。这时候就可以使用Object.protytype.toString.call(object)来实现。

例如:
function typeOf(ocject){
	let res = Object.prototype.toString.call(object).split(' ')[1];
	res = res.subString(0,res.length-1).toLowerCase()
	return res
}
typeOf([]) //array
typeOf({}) //object
typeOf(new Date()) //date
ps:toString.call()是对象的方法。而直接使用array.toString()是数组的方法。Array重写了对象的方法。

2.闭包使用场景

防抖节流

思路：1. 创建一个定时器时间 2.返回一个方法，3.清除定时器 4，创建一个定时器来执行方法
        var ceshi = document.getElementById('ceshi');
        ceshi.addEventListener('click', debounce(showMsg, 500), false)

        function showMsg() {
            console.log('防抖');
        }

        function debounce(func, wait) {
            let timeer;
            return function () {
	                let arg = arguments;
                clearTimeout(timeer);
                timeer = setTimeout(() => {
                    func.apply(this, arg )
                }, wait);
            }
        }

3.原型链

4.去重

    var list = [1, 2, 3, 5, 6, 8, 7, 9, 7];
    var newList = list.filter((item, index, arr) => arr.indexOf(item) === index)
    console.log(newList);//[1, 2, 3, 5, 6, 8, 7, 9]

5.计数

    let string = "sdfagsfaad";
    const table = {}
    for (let char of string) {
        table[char] = table[char] + 1 || 1;
    }
    console.log(table, 'table');{s: 2, d: 2, f: 2, a: 3, g: 1} "table"
    
map实现
    let string = 'kapilalipak';
    const countMap = new Map();
    for (let i = 0; i < string.length; i++) {
        if (countMap.has(string[i])) {
            countMap.set(string[i], countMap.get(string[i]) + 1)
        } else {
            countMap.set(string[i], 1)
        }
    }
    console.log(countMap, 'count');//{"k" => 2, "a" => 3, "p" => 2, "i" => 2, "l" => 2}

6.洗牌数组

    const list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    list.sort(() => {
        return Math.random() - 0.5;
    });

7.将Object属性转换为属性数组

const obj = { a: 1, b: 2, c: 3 };

Object.entries(obj);
// Output
(3) [Array(2), Array(2), Array(2)]
0: (2) ["a", 1]
1: (2) ["b", 2]
2: (2) ["c", 3]
length: 3

Object.keys(obj);
(3) ["a", "b", "c"]

Object.values(obj);
(3) [1, 2, 3]

8.watch和computed

 computed:会进行缓存，只有数据发生改变的时候才会修改，节省性能。默认get:，可以加set。watch,立即执行,deep属性可以监听对象。immediate立即执行
watch立即执行 immediate=true

9.如何优化vue首屏加载慢的问题

1.路由懒加载 component: () => import("../views/succase.vue")
2.代码层面的优化，精灵图，组件化模块化，优化代码逻辑，提高代码复用性等。
3. 对于一些通用的工具库可以采用CDN引入
4. 组件按需加载，vant的组件