跳到主要内容

面试复盘

· 阅读需 7 分钟
Yana Ching
Yana Ching
Front End Engineer

summary​

vue3 相关与 JS 原生

基本类型​

number string boolean symbol undefined null

箭头函数与普通函数​

this 指向​

普通 - 根据运行时函数调用方式动态决定箭头 - 没有自己的 this，捕获上下文，不可改变

arguments 对象​

普通 - 可使用 arguments 获取所有传入参数箭头 - 没有 arguments，但是可通过 ...args 获取所有传入参数

prototype 属性​

普通 - 创建时自动拥有一个 prototype 属性箭头 - 没有 prototype 属性，无法创建对象的原型链

事件循环​

浏览器环境中事件循环有以下阶段：

  • 同步任务执行阶段
  • 消息队列检查阶段（先进先出）
  • 微任务执行阶段
  • 渲染阶段
提示

常见微任务：

  • Promise.then
  • MutationObserver
  • Proxy
  • process.nextTick(Node)

常见宏任务

  • script
  • setTimeout/setInterval
  • UI rendering
  • postMessage、postChannel
  • setImmediate、I/O
执行机制是：
  • 执行宏任务
  • 遇到微任务，微任务入队列，完成宏任务之后依次执行微任务（FIFO）
直接执行 await 这一行中的同步代码，下一行之后的代码全部阻塞，进入微任务队列 **await 一定会阻塞 await 下一行之后的

代码**，将 await 下面的代码全部看作 Promise.then 即可，直接加入微任务队列，继续执行同步代码

正常情况 await 后就是一个 Promise，如果不是 Promise,相当于一个 return 语句，直接返回

(()=>{
    try(){
        new Promise(res=>{
            const a = 1
            console.log(a)
            a = 2
            console.log(a)
        })
    }catch(err){
        console.log(3)
    }
})()
注意 try-catch 只能捕捉同步代码中的 error 异步代码中错误由 Promise.reject(xxx) 来对外暴露错误信息

这里会打印出 1 之后直接报错 TypeError，常量不可以二次赋值触发 catch 中的逻辑，打印 3

所以结果是 1, 抛出异常

数组方法与异步操作​

使用数组的方法的时候注意不要在循环提内部执行异步操作：

  • forEach
  • filter
  • map
  • every
  • some

此时循环体内部的同步代码是不会被异常操作打断的，所以执行的代码会打印出很多个循环结束时候的结果，与预期的效果有出入

提示

如果是多个对象需要执行异步操作，建议使用 for-of 来循环对象内部的值，或者使用 Promise.all 方法来操作 :::

try-catch​

只捕获同步代码错误，异步代码错误需要依靠 Promise 中的 reject 来对外暴露错误信息

em\rem\vh\vh\px​

  • em 相对于父元素的 font-size
  • rem 先对于 html 元素的 font-size
  • vh、vw 是相对于视口的比例
  • px 是绝对单位

数组方法​

增​

  • push 栈方法
  • unshift 队列方法
  • splice 粘合
  • concat 拼贴 ----- 该方法不改变原数组，其他的改变

删​

  • pop 栈推出
  • shift 队列出队
  • splice 第二个参数决定删除多少个
  • slice 切割数组 ----- 不改变原数组，其他改变

改​

splice 第三个参数之后可以在原数组中插入新元素

查​

  • indexOf 查元素的 pos
  • includes 判断是否在
  • find 寻找匹配的元素

排序​

  • reserve 反转
  • sort 排序

ts 中 type 与 interface 的区别​

  • type 不能重复定义，报错，复合、交叉、联合、函数类型
  • interface 可以重复定义，对象结构扩展

js 中的加法​

0.1 + 0.2 约等于 0.3 （永远不会等于 3） ::: tip 会转换成位运算 :::

flex 简写​

提示

放大、缩小、初始比例

flex: flex-grow, flex-shrink, flex-basis :::

会引起重排的属性​

visible background-color font-size

TS 属性区别​

for-in 与 for-of​

  • for-in 遍历的是对象中的属性，数组中就是下标，对象中就是属性
  • for-of 遍历的是对象中的值，数组中就是元素，对象中就是属性值

vue3 的响应式​

vue3 中的响应式只针对最外层对象进行处理 :::

因此如果 ref 与 reactive 中存在对象嵌套的情况，应该先获取对应的属性，再去求得相应的值

const a1 = ref(1)
const a2 = reactive(a1)
const a3 = reactive([a1])
const a4 = reactive({ key: a1 })

a1.value
a2.value
a3[0].value
a4['key'].value

在以上的情况中，会打印出 1 1 undefined undefined

后面两个若是想要正常显示，需要先获取 a3[0], a4['key'] 求得其 ref 对象才能获取后续的值，否则只会打印 undefined

vue3 概念​

  • ref 创建的是具有 value 属性的基础类型数据
  • reactive 是基于 Proxy 的响应式
  • toRefs() 是将响应式转换为普通对象（该问题在上一问中有涉及）
  • markRaw() 标记对象不可代理 ---- 大致理解为 node_modules 中的依赖排除，因为三方的库已经自己做类型检查了
  • readonly 为只读代理，本质是不允许修改变量的堆地址，不关注对象内部的属性、属性值变化，属性、属性值变化由 Proxy 来监控