前言
逛网站时看到个网友在说，本人面试时被问到了刷到的题目过后很开心，信念满满的答复，但紧接着下一秒就笑不进去了，认为面试官是换问题问了，没想到在这个问题根底上提问，这让他就有点措手不及了，答复的支支吾吾的。其实面试官会持续在这问题上“不放过”你，也是看你了解并把握的是有多深。一道公众题谁都会，这分辨不出个什么，但要是深挖下的问题，这技术也能看的出十七八九，所以也并不是专门去刁钻，面试官问的越深，你答复的稳，面试官可不得喜爱你。碰到这种状况不见得多，但小编还是整顿些在高频考点上深挖的题目，小伙伴们看看心里有个底，题目都是带有答案的。
面试题高频考点
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.变量晋升和函数晋升的相干问题
//1var a = 1;function b(){ var a = 2; console.log(a) //输入的是什么 为什么}b()//2var a = 1; function a(){ }console.log(a) //输入的是什么 为什么//3var 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 服务，为什么回绝呢？