一天面五场，感觉身体被掏空。（上）

前言

上周一直在疯狂的面试，大大小小也面了十多家，大小offer也拿了几个，此篇用以记录一天面五场被问到的有价值的问题。

正文

this指向问题

代码输出题:

var a = 10

var foo = {

a: 20,

b: function () {

var a = 30;

return this.a;

},



c: () => {

var a = 40;

return this.a;

},

}

var d = {

a: 50,

}

console.log(a) 

console.log(foo.b()) 

console.log(foo.c()) 

console.log(foo.b.bind(d)()) 

console.log(foo.c.bind(d)()) 

这道题主要考察this指向问题，如果大家有不懂的可以参考我的关于this指向问题的文章。

this指向问题

算法–数组扁平化

问:

给你这样一个数组，请你将它扁平化。

var arr = [[1, 2, 2], [3, 4, 5], [6, 7, 8, 9, [11, 12, [12, 13, 14, [15]]]], 10];

答: 使用递归调用的方法来实现数组扁平化

function flatArr(arr) {

let ans = []

for (let i = 0; i < arr.length; i++) {

if (Array.isArray(arr[i])) {

ans = ans.concat(flatArr(arr[i]))

} else {

ans.push(arr[i]);

}

}

return ans;

}
var arr = [[1, 2, 2], [3, 4, 5], [6, 7, 8, 9, [11, 12, [12, 13, 14, [15]]]], 10];

console.log(flatArr(arr));

面试官: es6中有哪些新增的方法可以实现数组扁平化？

这个没有答上来，后面面试官补充道，可以使用arr.flat(arr.length)来实现数组扁平化。

浏览器的渲染过程(回流重绘)

可以参考我的往期文章: 浏览器的渲染过程

koa的运行机制

Koa是一个基于Node.js的Web应用框架，它利用中间件系统和异步编程（如async/await）来处理HTTP请求和响应。在Koa中，开发者可以通过注册一系列中间件来定义请求处理流程，每个中间件都是一个可以访问请求和响应对象的函数，并可通过调用next()函数来传递控制权给下一个中间件。一旦请求被接收，Koa按顺序执行这些中间件，直到某个中间件结束响应或所有中间件都已执行完毕。这种机制使得Koa既灵活又易于编写可维护的代码。

可参考: KOA洋葱模型

watch和computed的区别

• computed是一个计算属性，要基于其他数据计算得出新的数据属性而且computed属性的值会被缓存起来。

常见的应用场景: 购物车的总价，全选与全不选

const fullName = computed(() => { return ${firstName.value} ${lastName.value}; });

• watch是用来监听Vue实例上的某个属性，可以得到该属性的新旧值，在该属性变化时执行一些操作而且可以执行异步操作。

常见的应用场景: 像tags栏的处理，搜索栏的提示列表

css怎么做性能优化

1. 使用less，sass这样的预处理器
2. 减少使用通配符和标签选择器
3. 压缩css，删掉一些不必要的空格和注释还有换行
4. 按需加载css

前端中cookie的使用场景

可以在浏览器中存储少量的数据，可以跟踪用户的会话状态

像用户登录后，可以生成一个唯一的标识符存储在cookie中，相当于实现一个记住我这样一个功能

cookie很小，一般不会超过4kb，如果数据量大的话，一般都是存在localstorage中或者session storage里面

http1.0 和 http 2.0

1. 多路复用

   - http 1.0 每个TCP连接只能发送一个请求 
   - http 2.0 可以在同一个连接上发多个请求
   

2. 优先级

• http 2.0 会给每个请求设置优先级

3. 压缩头部

父组件如何调用子组件的方法

1. 使用ref获取到子组件实例

2. 在子组件中使用defineExpose()将子组件的方法暴露出去 defineExpose还可以将子组件的变量暴露出去

3. 在父组件中通过 childRef.value.xx使用子组件的方法

组件之间传值的方式

1. 父组件传子组件 父组件: 子组件: defineProps({msg})
2. 子传父 (发布订阅模式) 父组件: 子组件: emits = defineEmits([‘add1’]) emits(‘add1’,xxx)
3. v-model双向数据绑定
4. 通过父组件拿到子组件实例，在子组件中defineExpose暴露变量
5. 兄弟组件传值 通过父组件做桥梁 连接 两个兄弟组件
6. provide 和 inject 跨组件传值 顶层组件: provide(key,value) 孙子组件 : const message = inject(key) 或者给定默认值 inject(key,默认值)
7. Pinia和Vuex状态管理库,维护组件之间的公用变量,管理所有组件的状态

git中的多分支开发，指令描述

1. 创建分支

• git branch 查看所有的本地分支
• git branch feature 创建新的分支

2. 切换分支

• git checkout main 切换到现有分支

3. 合并分支

• git merge feature 和并新功能分支

4. 删除分支

• git branch -d 删除本地分支

5. 拉取远程分支

• git fetch origin 获取远程仓库的所有更改

简单聊一下react

react是由Facebook团队开发的一个js库，在构建单页应用时非常强大。react的核心特点就是组件化、虚拟DOM、单向数据流这些和vue都差不多我觉得最有特色的就是react中的hooks了很大的提高了函数组件的复用性，react它的基本语法是jsx，是一种类似html的写法允许我们在js文件中直接写类似html的标签，react的优势的话我目前了解到的就是在开发大型项目会比较适合。

v-on和v-bind的区别

• v-on 是用于监听DOM事件 v-on:event=’xxx’ 或简写为 @event = ‘xxx’
• v-bind 用于动态地将属性绑定到表达式的值 v-bind:href = ‘xxx’ 或简写为 :href = ‘xxx’

说一说数据改变时，渲染的过程

在Vue3中，当数据发生改变时，基于Proxy的响应式系统会自动检测到这些变化，首先通过reactive将数据转为响应式当组件首次渲染时收集依赖，然后当数据发生变化时，Vue会标记这些组件为待更新的状态，并将其放到更新队列里面，在下一个事件循环中异步执行然后Vue再重新执行渲染函数生成虚拟DOM，并与旧的虚拟DOM进行比较只更新实际发生改变的部分。

最后

码不动了,睡了睡了，就先总结到这里，未完待续……………….