乐趣区

关于前端:哭了我以为刷刷前端面试题高频考点就够了没想到面试官还会深挖问题问

jiezi

前言

逛网站时看到个网友在说，本人面试时被问到了刷到的题目过后很开心，信念满满的答复，但紧接着下一秒就笑不进去了，认为面试官是换问题问了，没想到在这个问题根底上提问，这让他就有点措手不及了，答复的支支吾吾的。其实面试官会持续在这问题上“不放过”你，也是看你了解并把握的是有多深。一道公众题谁都会，这分辨不出个什么，但要是深挖下的问题，这技术也能看的出十七八九，所以也并不是专门去刁钻，面试官问的越深，你答复的稳，面试官可不得喜爱你。碰到这种状况不见得多，但小编还是整顿些在高频考点上深挖的题目，小伙伴们看看心里有个底，题目都是带有答案的。

面试题高频考点

var、let 和 const 的区别

1、作用域不同 (是否含有块级元素)

  • 块级作用域：申明的变量只在该代码块作用域内无效
  • var 没有块级作用域，let、const 有块级作用域

2、是否存在暂时性死区

  • let 和 const 定义的变量是存在暂时性死区的，而 var 没有，原理如下：
  • 对于 var 而言，当进入 var 变量的作用域时，会立刻为它创立存储空间，并对它进行初始化，赋值为 undefined，当函数加载到变量申明语句时，会依据语句对变量赋值。
  • 而 let 和 const 却不一样，当进入 let 变量的作用域时，会立刻给它创立存储空间，然而不会对它进行初始化

3、是否存在变量晋升

  • 变量晋升：变量在申明之前能够应用
  • var 申明的变量存在变量晋升，let、const 不存在变量晋升

4、是否反复申明

  • var 申明的能够反复申明, let 和 const 申明的不能够反复申明

5、变量是否被批改

  • var、let 申明的变量能够被批改，const 申明的常量不可批改

    面试官深挖的问题

    1. 那么 var 是什么作用域呢？这个我在面试的时候就被问到过, 那么你晓得吗？
    var 的作用域是在被定义的时候决定的，如下：

  • 在函数外部定义的话，那么 var 就是局部变量，其作用域称为函数作用域 / 部分作用域
  • 在函数内部定义的话，那么 var 就是全局变量，其作用域称为全局作用域

2. 变量晋升和函数晋升的相干问题 

//1
var a = 1;
function b(){
  var a = 2;
  console.log(a)   // 输入的是什么 为什么
}
b()

//2
var a = 1; 
function a(){}
console.log(a)  // 输入的是什么 为什么
//3
var a = 1;
function a(){console.log(a);
}
a()// 输入的是什么 为什么
  • 首先第一个输入的是 2, 这个波及的就是作用域问题，因为在 b() 外部定义变量 a，所有先拜访函数外部的变量 a, 所有输入的是 2, 如果函数外部没有定义变量 a，那么就拜访全局中定义的 a，输入的机会是 1
  • 第二个输入的是 1，这里暗藏了变量晋升和函数晋升的优先级，函数申明晋升 > 变量申明晋升. 当 js 解析器在遇到函数申明时，会优先将其晋升到定义体顶部，其次再是 var 申明的变量，这样就导致函数 a 被变量 a 给笼罩的状况，所以最终将打印 1。
  • 第三个输入的是 TypeError: a is not a function, 这个和第二个相似，函数 a 被变量 a 给笼罩，所以当调用 a() 的时候，就会报错因为 a 只是一个变量了。

3.const 申明的常量不能够扭转 =>const 申明的对象属性是否能够扭转？

const obj = {
    name:"大海",
    age: 18
}
obj.age = 20;
console.log(`name:${obj.name},age:${obj.age}`); 
// 输入 name: 大海,age:20

因为对象是援用类型的，obj 中保留的仅是对象的指针，这就意味着，const 仅保障指针不产生扭转，批改对象的属性不会扭转对象的指针，所以是被容许的。也就是说 const 定义的援用类型只有指针不产生扭转，其余的不论如何扭转都是容许的。

const obj = {
    name:"大海",
    age: 18
}
// obj.age = 20;
// console.log(`name:${obj.name},age:${obj.age}`);
obj={name:"大海",age:18}
console.log(`name:${obj.name},age:${obj.age}`);

即便对象的内容没扭转，指针扭转了也是不能够的

箭头函数和一般函数的区别

  • 箭头函数不须要 function 关键字来创立函数
  • 箭头函数能够省略 return 关键字
  • 箭头函数继承以后上下文的 this 关键字, 定义的时候就确定并固定了
  • 箭头函数 call、apply、bind 并不会影响其 this 的指向
  • 箭头函数没有原型 prototype

  • 箭头函数没有本人的 arguments

    面试官深挖的问题

    1.call、apply 和 bind 的区别

  • 三者都能够扭转函数的 this 指向，通过第一个参数来绑定
  • 三者的第一个参数如果为 null、undefined 的时候，默认指向 window(在浏览器中)
  • call 第二个参数是参数列表，applay 是数组,bind 传入的也是一个参数列表 (然而这个参数列表能够分屡次传入，apply 和 call 是一次性传入所有参数)
  • bind 扭转 this 指向后不会立刻执行，而是返回一个永恒扭转 this 指向的函数来让咱们手动调用；apply, call 则是立刻调用

2. 箭头函数的 this 是怎么确定的 

var name = '小度'
function b(){console.log(this); // window
    var name = '小白'
    c =()=>{console.log(this.name)  ;
    }
    c()}
b()

这里箭头函数 c 是在一般函数 b 中定义的，所以箭头函数 c 的 this 是指向一般函数 b 的 this 的，这里一般函数的 this 是全局（window），这个须要在浏览器环境下执行，在 node 环境下执行是 undefined

Promise 的静态方法和实例办法

注：这里有些公司会波及手写 Promise，大家能够去钻研源码实现和手写一下。这个知识点很重要，高频考点中高频考点，大家肯定要留神了啊！

1. 首先理解 Promise 的三种状态

  • pending 待定
  • fulfilled/resolved 兑现 / 解决 / 胜利
  • rejected 回绝 / 失败

2.Promise 对象的状态扭转，只有两种可能：

  • 从 pending 变为 fulfilled

  • 从 pending 变为 rejected

    留神：这两种状况只有产生，状态就确定了，不会再变了。

【静态方法】

  • 1.Promise.resolve
    resolve : 将 Promise 对象的状态从 Pending(待定) 变为 Fulfilled(胜利)

    new Promise(resolve => {resolve('hello 大海')
  }).then(res => {console.log(res)
  })

  • 2.Promise.reject
    reject : 将 Promise 对象的状态从 Pending(待定) 变为 Rejected(失败)

    new Promise(reject => {reject('hello 大海')
}).then(res => {console.log(res)
})

  • 3.Promise.all

    • 比方当数组里的 p1,p2,p3,p4 都执行实现时，页面才显示。
    • 值得注意的是，返回的数组后果程序不会扭转，即便 P2 的返回要比 P1 的返回快，程序仍然是 p1,p2,p3,p4
    • Promise.all 胜利返回胜利数组, 失败返回失败数据, 一但失败就不会持续往下走 
        let p1 = Promise.resolve('p1')
     let p2 = Promise.resolve('p2')
     let p3 = Promise.resolve('p3')
     let p4 = Promise.resolve('p4')
     Promise.all([p1, p2, p3, p4]).then(res => {console.log('胜利', res); // 返回数组
     }).catch(err => {console.log('失败', err);
     })

  • 4.Promise.race
    Promise.race 是赛跑的意思，也就是说 Promise.race([p1, p2, p3,p4]) 外面的后果哪个获取的快，就返回哪个后果，不论后果自身是胜利还是失败 

    let p1 = Promise.resolve('p1')
let p2 = Promise.resolve('p2')
let p3 = Promise.reject('p3')
let p4 = Promise.resolve('p4')
Promise.race([p1, p2, p3, p4]).then(res => {console.log('胜利', res); // 返回数组
}).catch(err => {console.log('失败', err);
})

  • 5.Promise.allSettled //ES11 的新个性

    • 该办法返回一个在所有给定的 promise 都曾经 fulfilled 或 rejected 后的 promise，并带有一个对象数组，每个对象示意对应的 promise 后果。

    • 当您有多个彼此不依赖的异步工作胜利实现时，或者您总是想晓得每个 promise 的后果时，通常应用它。

      const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];

Promise.allSettled(promises).
then((results) => results.forEach((result) => console.log(result.status)));

      【实例办法 (原型办法)】

  • 1.Promise.prototype.then
    该办法能够接管两个回调函数作为参数，其中第二个回调函数是可选的。第一个回调函数是 Promise 对象的状态变为 Resolved 时调用，第二个回调函数是 Promise 对象的状态变为 Rejected 时调用。

    var p1 = new Promise((resolve, reject) => {resolve('胜利！');
  // or
  // reject(new Error("出错了！"));
});

p1.then(value => {console.log(value); // 胜利！}, reason => {console.error(reason); // 出错了！});

  • 2.Promise.prototype.catch
    该办法返回一个 Promise，并且只解决回绝（rejected）的状况。

    const p = new Promise((resolve, reject)=>{reject('失败了')
  }).catch(err=>{console.log(err);
  })
  • 3.Promise.prototype.finally
    该办法，无论上一个 promise 成败都会执行，且默认状况下会原样传递上一个 promise 的决定，然而 finally 对本身返回的 promise 的决定影响无限，它能够将上一个 resolve 改为 reject，也能够将上一个 reject 改为另一个 reject，但不能把上一个 reject 改为 resolve。

【默认状况】

var p = Promise.resolve('ok')
.finally((res) => {return res})
.then(value => {console.log('胜利', value)
}, (err) => {console.log('失败', err)
});

【将上一个 resolve 改为 reject】

var p = Promise.resolve('ok')
.finally(() => {return Promise.reject('err') })
.then(value => {console.log('胜利', value)
}, (err) => {console.log('失败', err)
});

面试官深挖的问题

then 有几个参数，then 第二个参数和 catch 的区别是什么？
then 办法能够承受两个回调函数作为参数。其中，第二个函数是可选的，不肯定要提供。这两个函数都承受 Promise 对象传出的值作为参数。then 办法返回的是一个实例（不是原来那个 Promise 实例）

【区别】

  • 区别 1：最次要区别就是 then 中第一个函数里抛出的异样，它的第二个函数是捕捉不到异样的，前面的 catch 能够捕捉到（或者第二个 then 的第二个函数也能够捕捉到）；
  • 区别 2：且 then 的第二个参数和 catch 捕捉异样时会采取就近准则，当两者都存在时，则只有 then 的第二个参数能捕捉到，如果 then 的第二个参数不存在，则 catch 办法会捕捉到；

【用代码展现一下 then 第二个参数和 catch 的区别】

const p = new Promise((resolve, reject)=>{resolve('对了')
  })
  p.then((res)=>{throw new Error('hello'); 
  },(err)=>{console.log(err,'第一个 then 捕捉谬误');
  }).catch((err1)=>{console.log(err1,'catch 捕捉谬误');
  })

咱们能够发现 then 中的第二个函数无奈捕捉到本身第一个函数抛出的异样，catch 则能够捕捉的失去，如果把 catch 删除，那么就会报错 



  const p = new Promise((resolve, reject)=>{resolve('胜利了')
  })
  p.then((res)=>{throw new Error('hello'); 
  },(err)=>{console.log(err,'第一个 then 捕捉谬误');
  })

也能够在持续应用 then 来捕捉上一个 then 中抛出的谬误 

const p = new Promise((resolve, reject)=>{resolve('胜利了')
  })
  p.then((res)=>{throw new Error('hello'); 
  },(err)=>{console.log(err,'第一个 then 捕捉谬误');
  }).then((res)=>{},(err1)=>{console.log(err1,'第二个 then 捕捉谬误');
  })

就近准则捕捉异样，就是区别 2 

const p = new Promise((resolve, reject)=>{resolve('胜利了')
  })
  p.then((res)=>{throw new Error('hello'); 
  },(err)=>{console.log(err,'第一个 then 捕捉谬误');
  }).then((res)=>{},(err1)=>{console.log(err1,'第二个 then 捕捉谬误');
  }).catch((err2)=>{console.log(err2,'catch 捕捉谬误');
  })

Promise.all 和 Promise.race 的区别

【区别】

  • Promise.all 胜利返回胜利数组, 失败返回失败数据, 一但失败就不会持续往下走
  • Promise.race 是赛跑的意思，也就是说 Promise.race([p1, p2, p3,p4]) 外面的后果哪个获取的快，就返回哪个后果，不论后果自身是胜利还是失败

【Promise.all】

        let p1 = Promise.resolve('p1')
        let p2 = Promise.resolve('p2')
        let p3 = Promise.reject('p3')
        let p4 = Promise.resolve('p4')
        Promise.all([p1, p2, p3, p4]).then(res => {console.log('胜利', res); // 返回数组
        }).catch(err => {console.log('失败', err);
        })

【Promise.race】

        let p1 = Promise.reject('p1')
        let p2 = Promise.resolve('p2')
        let p3 = Promise.reject('p3')
        let p4 = Promise.resolve('p4')
        Promise.race([p1, p2, p3, p4]).then(res => {console.log('胜利', res); // 返回数组
        }).catch(err => {console.log('失败', err);
        })

Promise 与 setTimeout 联合猜输入 

console.log('start')
setTimeout(() => {console.log('time')
})
Promise.resolve().then(() => {console.log('resolve')
})
console.log('end')

【剖析】

  • 刚开始整个脚本作为一个宏工作来执行，对于同步代码间接压入执行栈进行执行，因而先打印出 start 和 end。
  • setTimout 作为一个宏工作被放入宏工作队列 (下一个)
  • Promise.then 作为一个微工作被放入微工作队列
  • 本次宏工作执行完，查看微工作，发现 Promise.then，执行它

  • 接下来进入下一个宏工作，发现 setTimeout，执行。
    篇幅无限没有列举更多的前端面试题，小编把整顿的前端大厂面试题 PDF 分享进去，一共有 269 页，只须要点击即可收费支付 ，上面是面试题文档的局部展现。

    为什么会深挖问题？

    其实下面的问题说难不难，说简略也的确不简略。面试官须要的答案总是比你能答复的要再更深一步。不必太多，只一步。

只晓得“旧页面传值给新页面”，不够！须要晓得：如何解决“新页面回传给旧页面且思考新页面解体状况”？

只晓得“Object.defineproperty()”，不够！须要晓得：如何监控 DOM 新属性的减少？

只晓得“懒加载的滚动监听”，不够！须要晓得：懒加载的其它实现形式呢？

只晓得“PerformanceTiming API”，不够！须要晓得：具体是如何做差，各监控指标的差别在哪，图片资源加载到底如何计时？

呜呼！这算“面试造火箭，工作拧螺丝”吗？

未必！这些问题在理论工作中是极大可能遇到的，本瓜之前就用过监听本地缓存。PerformanceTiming 更是性能监控的良方，都是为了做出更好的 Web 服务，为什么回绝呢？

退出移动版