这么简单的Promise，只有1个面试者回答正确了。以及这段时间的面试总结。

AlanClick
81 阅读6分钟

简短截说，面试共计二十人不到，最后有4个优次不一的二面人选。让我没想到的是，随手的一个简单题目，仅有一个人回答正确。

一、仅仅是简单的await用法

// 开放题 就下面的代码自由发挥 随便说
async function b1231() {
    await Test2().then(()=>{
        console.log(1);
    })
    console.log(2);
}

之所以是开放题，是因为我不单单希望其能说出1、2的打印顺序，更是顺便把async、await、Promise、以及.then这样的微任务再扩展到事件循环这些内容都包含在这道题目中了。

我希望能看看面试者能走到哪一步，但仅仅在1、2的打印顺序上，就把他们拦住了。

打印顺序

显而易见，await会等待一个Promise，准确的说，是一个Promise链。说到这里，答案已经很明显了，await会等待.then返回确认的fulfilled(已解决状态)，然后再顺序执行下面的代码。

这里可能有部分同学疑惑，.then没有返回，具体来说:

  • 如果Test2不返回一个promise，那么因为.then的存在，其会被在.then中包装成一个Promise类型。
  • 假设没有.then存在，那么取得await Test2()的返回值也会被Promise包装，即便是没有返回值也会返回一个空的Promise。按照ts的说法是返回一个Promise<void>类型。

是的，当局者迷。看了题解的人觉得不过如此，但对于略有紧张的面试者，就会想到那些什么微任务、宏任务之类的。(顺便说一句，我可不喜欢什么从1到10的打印顺序的问题，那种东西跑一下出结果更合适。)

从少数样本的这次实验中来看，大部分人都被迷惑了。虽然我主观是认为他们的js基础不扎实。

二、我对面试的思考

作为面试官，可以从第二人称的角度回来观看自己作为面试者的表现，以及公司希望招聘到哪样的人才，接下来会从几点去总结一下。

  • 态度和形象。

    • 在沟通中展现出热情是很好的，无论是自信、表现出积极，都会留下一个好印象，如果你有些情况不方便开摄像头、或者是因为感冒之类的状态不好，只要进行了说明，都是没关系的。
    • 如果拽的和二五八万似的，你最好能通过我的特地用来为难你的面试题。
    • 形象上倒是没有过多的挑剔，线上面试也只是看个大概，但值得一提的是，一位约了4:30面试的人在3点就到了公司，打了我一个措不及防。更要命的是，表现出来的水准和糟糕的精神状态不像是准备好应试的样子，还有着一身的烟味，我只好将其送下电梯。

  • 面试者的回答。

    • 首先一定不行的是：一类人没话硬说，的回答回答不到点子上，嘴还不停，不知道何时适可而止，沟通能力欠佳。一类人前面几道基础题目回答不出来，直接快速结束，基本准备还没做好。
    • 对于答案较短的题目，应该精准的回答答案。然后可以稍作扩展，展现自己在这方面的能力。如果能结合过往项目经验就是最好的。
    • 对于答案范围很大，应该确认面试官具体希望了解哪一个部分，还是简单快速的带过整体。不然就会出现:你啰啰嗦嗦、我想听的不是这个之类的。

  • 你的态度应该符合这个职位的招聘需求。

    • 对于技术工作者而言，定薪资的范围是相对宽泛的一个区间，表现的越专业，定薪就会越高，所以不必有任何的含蓄，毫无保留的展现你的能力，以用来争取到更高的评估。
    • 挑选者，而非被挑选者。当面试官对你的能力深信不疑的时候，希望将你留下来，你是最优的选择，面试官就会帮你去争取薪水，进而将你留在这里。是的，你被认为是一个抢手的家伙，是时候谈谈条件了，不过注意分寸，谈崩了就炸了。

三、分享我的面试题目

感谢你能看到这里，就分享一下我用来面试的大概题目吧~

我的问题偏向基础与实际应用，鲜有八股文、这那原理、专门难为人的题目，不过对于基础要求扎实。(虽然下文里面有偏八股、原理内容，但我鲜有提问)

  • 浏览器相关 div的DOM名称是？ addEventListener是什么 web worker的功能与限制 定时器、动画帧、nextTick 事件的传递顺序、e.target是什么 ajax、xhr、axios、fetch

    历史堆栈是什么？

    从url输入到页面展现，发生了什么？ 浏览器环境下的事件循环、如何处理长任务 介绍浏览器进程与线程

    介绍Proxy对象，是否有使用

  • vue相关 MVVM 父子组件的生命周期过程 样式穿透的关键字是？ wacth 和 computed pinia 的使用 持久化如何做？ 介绍插槽、组合式函数 teleport是什么 keepAlive的使用 动态组件的标签名称是？ nextTick()是啥、 介绍双向绑定、单项数据流、响应性是如何工作的 vDOM如何更新 vue3.5更新: 带响应式Props解构赋值、Props默认值新写法 3.4更新 解析器速度提高、更高效的响应式、 v-bind 同名简写、删除全局 JSX 命名空间、删除v-is 指令转而使用:is

  • html meta标签的使用 data-* 属性是什么 脚本的 async 和 defer input标签的常见type element-ui中的常见组件

  • css 常见选择器 介绍flex布局 盒模型、BFC是什么 伪类和伪元素 如何实现响应式布局？ 图片懒加载

  • canvas、echart 简单介绍canvas的使用 echarts的常见图表

  • ts语法 枚举是什么 说一下接口与泛型

  • js基础 如何获得某个dom节点？ 基础数据类型有哪些 什么是堆栈？ 常见dom方法？ Obj的静态方法 深拷贝 Generator和yield是什么？ 近几年的es6更新内容 Map与Set对象的使用场景 es6的class语法糖 介绍原型与原形链 介绍promise

  • 其它 常见的设计模式 是否了解react-fibber、 jsx是什么 介绍常见数据结构 前缀和、差分 git常用命令 nvm的使用 后端、数据库了解 常见linux命令

  • 代码题

// 下面代码的this指向那？ 答案：取决于addLocalFolderPromise被调用的位置 从此处看，该方法属于某个类的实例方法 所以this指向的是实例对象
addLocalFolderPromise: function (localPath, props) {
            return new Promise((resolve, reject) => {
                this.addLocalFolderAsync2(Object.assign({ localPath }, props), (err, done) => {
                    if (err) reject(err);
                    if (done) resolve(this);
                });
            });
        },
// 如何修改this指向？bind、call 或者 apply

// 开放题 就下面的代码自由发挥 随便说
async function b1231() {
    await Test2().then(()=>{
        console.log(1);
    })
    console.log(2);
}

// 最后 试试来个手写排序或者数组方法重构？
avatar
文章
阅读
粉丝