提问率最高的五道前端笔试面试题-JavaScript实战题

1、☆ ☆ ☆ 如何判断一个对象是否为数组，函数

方法 1 ：instanceof：
    var arr = []
     
console.log(arr instanceof Array) 返回值为：true


方法 2 ：constructor ：
    
console.log(arr.constructor == Array)返回值为： true

方法 3 ： Array.isArray ()

 console.log(Array.isArray(arr)) 返回值为 ：true

2、☆ ☆ ☆ 假如A页面我定义了一个定时器，然后跳到B页面如果让A页面的定时器暂停

方法 1 ：在beforeDestroy()等生命周期结束阶段内清除定时器：
     
    beforeDestroy （）{

        clearInterval(this.timer)
        
        this.timer = null
}

方法 2 ：通过$once这个事件监听器在定义完定时器之后的位置来清除定时器。

    const timer = setInterval (()=>{

    //某些定时器操作

},500)

    //通过$once来监听定时器，在beforeDestroy钩子可以被清除。
    
    this.$once('hook:beforeDestroy',()=>{
        
    clearInterval (timer)


})

3、☆ ☆ ☆ ☆ ☆ 函数节流、防抖。scroll resize 使用函数节流实现不要频繁触发事件的需求

1 - 防抖 
scroll方法中的do somthing 至少间隔500毫秒执行一次
    
    window.addEvetListener('scroll',function(){

    var timer 使用闭包，缓存变量

    return function(){

    if(timert) clearTimeot(timer)
    
    timer = setTimeout(function(){    
    
    console.log('do somthing')

},500)


}
}()) //此处()作用 - 立即调用return后面函数，形成闭包

 2 - 节流

    window。addEventListener（'scroll',function(){

        var timer //使用闭包，缓存变量
     
        var starTime = new Date()
     
        return function(){

        var curTime = new Date()
       
         if(curTime - starTime >=2000){

           timer = setTimeout(function(){

            console.log('do somthing')

            },500)

            starTime = curTime

            }

    }

}()) //此处()作用 - 立即调用return后面函数，形成闭包    
            
            

4、 ☆ ☆ ☆ ☆ ES6中，数组监测怎么实现的（代理）

//通过ES6的关键字extends实现继承完成Array原型方法的重写

    class NewArray extends Array {

    constructor(....args){

        //调用父类Arrar的constructor()
        
        super(...args)

    }
    
    push(...args){

        console.log('监听到数组的变化了！')

        //调用父类原型push方法

        return super.push（...args)

        }

}

     let list3 = [1,2]

    let arr = new NewArray(...list3)

    console.log(arr)

    //(2)[1,2]

    arr.push(3)
    
    //监听到数组的变化了!

    console.log(arr)

    //(3)[1,2,3]

5、 ☆ ☆ ☆ ☆ 微任务和宏任务有什么区别？

	宏任务（macrotask）	微任务（microtask）
谁发起的	宿主 （Node、浏览器）	JS引擎
具体事件	1.script（可以理解为外层同步代码）2.setTimeout/setlnterval 3.UI rendering/UI事件 4.postMessage，MessageChannel 5.setlmmediate ,I/O(Node.js)	1.Promise 2.MutaionObserver 3.Object.observe(以废弃；proxy对象替代） 4.process.nextTick（Node.js）
谁先运行	后运行	先运行
会触发新一轮Tick吗	会	不会