01 | 能让我想一想吗？。。。对不起，我忘记了！

时间  2021-08-12
标签 node 面试 数组 promise 浏览器 微信 markdown app 异步 async 栏目 快乐工作 繁體版
原文   原文链接

前言

最近本身面试和观看同窗面试后，感慨万分！其实不少知识点真的看过，可是在面试过程当中会忽然想不起来，你说可气不可气。这个有个好方法--提词器，这个须要你用本身的语言去整理简短的提词器，而后经过提词器的内容去拓展这个问题的知识点。在整理的过程当中，让本身再次去理解加深本身的印象，也有利于本身在面试过程当中的表达。表达在面试过程当中很是重要，若是你知道这个问题的答案，就由于你没表达清楚，让面试官感受你仍是没弄懂的状态，致使这道题失分，这是否是很惋惜呢？其实还能够经过和同窗或者朋友对练的形式，让本身的表达能力获得提高。node

image.png

面试题高频考点

var、let和const的区别

  • 做用域不一样(是否含有块级元素)
    • 块级做用域：声明的变量只在该代码块做用域内有效
    • var没有块级做用域，let、const有块级做用域
  • 是否存在暂时性死区
    • let和const定义的变量是存在暂时性死区的，而var没有，原理以下：
    • 对于var而言，当进入var变量的做用域时，会当即为它建立存储空间，并对它进行初始化，赋值为undefined，当函数加载到变量声明语句时，会根据语句对变量赋值。
    • 而let和const却不同，当进入let变量的做用域时，会当即给它建立存储空间，可是不会对它进行初始化
  • 是否存在变量提高

    • 变量提高：变量在声明以前可使用面试

    • var声明的变量存在变量提高，let、const不存在变量提高数组

  • 可否重复声明
    • var声明的能够重复声明, let 和const声明的不能够重复声明
  • 变量可否被修改
    • var、let声明的变量能够被修改，const声明的常量不可修改

面试官深挖的问题

QQ图片20210514095847.gif

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，输出的机会是1promise

  • 第二个输出的是1，这里隐藏了变量提高和函数提高的优先级，函数声明提高>变量声明提高.当js解析器在遇到函数声明时，会优先将其提高到定义体顶部，其次再是var声明的变量，这样就致使函数a被变量a给覆盖的状况，因此最终将打印1。浏览器

  • 第三个输出的是TypeError: a is not a function,这个和第二个相似，函数a被变量a给覆盖，因此当调用a()的时候，就会报错由于a只是一个变量了。微信

//3
var a = 1;
function a(){
	console.log(a);
}
// a()
console.log(a); // 输出的是 1
复制代码

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定义的引用类型只要指针不发生改变，其余的不论如何改变都是容许的。markdown

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}`);
复制代码

即便对象的内容没改变，指针改变了也是不能够的 image.pngapp

箭头函数和普通函数的区别

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

面试官深挖的问题

QQ图片20210514095847.gif

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()
复制代码

image.png 这里箭头函数c是在普通函数b中定义的，因此箭头函数c的this是指向普通函数b的this的，这里普通函数的this是全局（window），这个须要在浏览器环境下执行，在node环境下执行是undefined异步

Promise的静态方法和实例方法

注：这里有些公司会涉及手写Promise，你们能够去研究源码实现和手写一下。这个知识点很重要，高频考点中高频考点，你们必定要注意了啊！
1.首先了解Promise的三种状态async

  • 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)));
复制代码

image.png 实例方法(原型方法)

  • 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)
});
复制代码

面试官深挖的问题

QQ图片20210514095847.gif then有几个参数，then第二个参数和catch的区别是什么？

这里我面试官先问的是then有几个参数，我回答的是1个；接着面试官就问then第二个参数和catch的区别是什么？这时我就知道本身打错了，哎！因此后面这个问题我确定也是答不出来的。

image.png 接下来就为你们解答吧！

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捕获错误');
  })
复制代码

image.png 咱们能够发现then中的第二个函数没法捕获到自身第一个函数抛出的异常，catch则能够捕获的获得 若是把catch删除，那么就会报错

const p = new Promise((resolve, reject)=>{
    resolve('成功了')
  })
  p.then((res)=>{
    throw new Error('hello'); 
  },(err)=>{
      console.log(err,'第一个then捕获错误');
  })
复制代码

image.png

也能够在继续使用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捕获错误');
  })
复制代码

image.png

就近原则捕获异常，就是区别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捕获错误');
  })
复制代码

image.png

Promise和async/await的区别

  • promise是ES6，async/await是ES7
  • async/await相对于promise来说，写法更加优雅
  • reject状态：
    • 1）promise错误能够经过catch来捕捉，建议尾部捕获错误，
    • 2）async/await既能够用.then又能够用try-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);
        })

复制代码

image.png 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);
        })
复制代码

image.png

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，执行。

image.png

推荐Promise相关题目：【建议星星】要就来45道Promise面试题一次爽到底(1.1w字用心整理)

总结

本人仍是大三学生，因为时间和精力有限，就暂时更新到这，下篇将会尽快整理出来，但愿你们能够多多支持！ 我如今也在不断突破本身，特别是表达能力，但愿你们共同进步吧！有问题能够在评论区中指出来，在此先感谢你们！也能够➕微信zxl814405253共同探讨问题！

image.png

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程