2022前端年底面试总结_浅拷贝

又到年底了,很多小伙伴又开始​​跳槽​​​了,本次汇总都是​​面试真题​​​,来自各位小伙伴有​​大厂​​​也有​​小厂​​​,还有​​外包​​可以说很全面了。

某外包公司 3-5年 前端开发

1.计算机CPU功能和基本结构

属实开幕雷击 这种底层知识对于前端来说可能问的比较少

​CPU​​​ 它是你的电脑中最 硬核 的组件,这种说法一点不为过。​​CPU​​​ 是能够让你的计算机叫 计算机 的核心组件,但是它却不能代表你的电脑,​​CPU​​ 与计算机的关系就相当于大脑和人的关系

2022前端年底面试总结_虚拟内存_02

cpu的功能

主要是从程序或应用程序获取指令并执行计算。此过程可以分为三个关键阶段: ​​提取​​​,​​解码​​​和​​执行​

cpu的内部结构

以C语言为例 程序编译执行的过程 在这个流程中,CPU 负责的就是解释和运行最终转换成机器语言的内容

2.计算机的虚拟内存介绍一下

虚拟内存

​虚拟内存​​​ 是内存和磁盘交互的第二个媒介。虚拟内存是指把磁盘的一部分作为 ​​假想内存​​​ 来使用。这与磁盘缓存是假想的磁盘 (实际上是内存)相对,虚拟内存是假想的内存 (实际上是磁盘) 虚拟内存是计算机系统内存管理的一种技术。它使得应用程序认为它拥有 ​​​连续可用​​ 的内存(一个完整的地址空间),但是实际上,它通常被分割成多个物理碎片,还有部分存储在外部磁盘管理器上,必要时进行数据交换。

3.原生js对象的特征

我认为这个题他是想问对象的​​封装​​​,​​继承​​​,​​多态​​,三大特征

​封装​​就是把抽象出来的数据和对数据的操作封装在一起,数据被保护在内部,程序的其它部分只有通过被授权的操作(成员方法),才能对数据进行操作。

​继承​​​,继承的方式有很多种,常用的​​原型链继承​​​,​​寄生继承​​​,​​call apply借用法​​.

​多态​​,函数重载,很多语言都支持函数重载,js是不支持函数重载的,如果js想实现函数重载只能通过判断参数的个数或者类型来实现,或者使用ts去支持。

4.vue组件的传值方法都有哪些

传参的方式就很多了​​只包括组件不涉及路由传参​

1 父子 父给子 使用props 自给父使用emit

2 全局状态管理工具 Vuex pinia 等

3 发布订阅模式 eventBus mitt 等

4 借助 ​​$children​​​ / ​​$parent​

5 provide inject

6 ref / refs

7 ​​$attrs​

5.vue3新特性

说起3的新特性也是挺多的

最主要的区别就是 ​​Composition API​

新增两个内置组件 ​​Teleport​​​ ​​Suspense​

​Vue.prototype​​​ 替换为 ​​config.globalProperties​

去掉sync修饰符 并且v-model名称改变 ​​modelValue​​​ 作为 prop,​​update:modelValue​

style中使用变量 ​​color: v-bind('theme.color')​

支持 ​​Fragments​

响应式原理的变化 ​​defineProperty​​​ 换成 ​​proxy​

生命周期钩子

Vue2--------------vue3
beforeCreate -> setup()
created -> setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
activated -> onActivated
deactivated -> onDeactivated
6.哪个大学毕业的,学的是什么专业,学历学信网可不可查

答...

京东 3-5 年 前端

1.深拷贝浅拷贝的方法都有哪些

这道题主要考对引用类型的理解

1.​​深拷贝​​​ 偷懒方法 这种方法 可以深拷贝 注意 ​​​function和undefined​​ 是会丢掉的 没有这两种类型可以用

const obj2 = JSON.parse(JSON.stringify(obj1))

2.​​深拷贝​​ 递归解法

function DeepClone(data) {
const newData = Array.isArray(data) ? [] : {}
for (let key in data) {
if (data[key] && typeof data[key] === 'object') {
newData[key] = DeepClone(data[key])
} else {
newData[key] = data[key]
}
}
return newData
}

3.​​浅拷贝​​ Object.assign 这个最常用了 注意这个方法是浅拷贝

Object.assign({},{},...)

4.​​浅拷贝​​es6扩展运算符

const obj2 = {...obj1}

这道题相信大家还是都会的

2.async和await

​async​​是一个加在函数前的修饰符,被async定义的函数会默认返回一个Promise对象resolve的值。因此对async函数可以直接then,返回值就是then方法传入的函数。

​await​​​ ​​​await​​​ 也是一个修饰符,只能放在async定义的函数内。可以理解为等待。 ​​​awai​​​t 修饰的如果是​​Promise​​​对象:可以获取Promise中返回的内容(resolve或reject的参数),且取到值后语句才会往下执行; 如果不是​​​Promise​​​对象:把这个非​​promise​​​的东西当做​​await​​表达式的结果。

async function some() {
await Promise.xxxxxx
}
3.JS事件循环event loop 怎么理解

果然微任务 宏任务又来了

js宏任务有:​​<script>整体代码​​​、​​setTimeout​​​、​​setInterval​​​、​​setImmediate​​​、​​Ajax​​​、​​DOM事件​

js微任务有:​​nodejs process.nextTick​​​、​​MutationObserver​​​、​​Promise.then catch finally​

执行顺序是宏任务先走应为script标签要先走,然后清空所有的同步任务,碰到异步任务都放到异步队列里面,

在异步队列里面先执行宏任务,然后执行本次宏任务里面的所有微任务,然后继续下一个tick 一直循环直到全部执行完成

2022前端年底面试总结_虚拟内存_03

4.vue-router的方法都有哪些?

​redirect​​ 可以重定向

​push​​ 跳转页面并且有历史记录

​replace​​ 跳转且没有历史记录

​go​​ 前进后退

​back​​ 返回

​beforeEach​​ 前置守卫

​afterEach​​ 后置守卫

​addRoute​​ 动态路由

​removeRoute​​删除路由

​getRoutes​​ 查看路由表

5.HTTP状态码206是干什么的

这个应该问的是断点续传技术

首先就是前端拿到file 然后通过​​slice​​​ 可以切片 然后使用​​promise.all​​并发上传 中间可以暂停 也可以恢复上传 后端可以读到碎片最后上传完成之后后端会合成一个完整的文件 那如何记录当前上传到哪块了 此时需要通过请求头的Range 属性 提供该信息

GET /file.zip HTTP/1.1
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-
excel, application/msword, application/vnd.ms-powerpointRange:
bytes=200000- //告诉服务器 file.zip 这个文件从200000字节开始传,前面的字节不用传了
Accept-Language: zh-cn
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 5.01; Windows NT 5.0)Connection: Keep-Alive
6.算法题环节

相交链表 跟LeetCode 基本一样 这边直接拿过来了

2022前端年底面试总结_浅拷贝_04

我是这么写的

/**
* Definition for singly-linked list.
* class ListNode {
* val: number
* next: ListNode | null
* constructor(val?: number, next?: ListNode | null) {
* this.val = (val===undefined ? 0 : val)
* this.next = (next===undefined ? null : next)
* }
* }
*/
let set = new Set()
function getIntersectionNode(headA: ListNode | null, headB: ListNode | null): ListNode | null {
while (headA!=null) {
set.add(headA)
headA = headA.next
}
while (headB!=null) {
if(set.has(headB)){
return headB
}
headB = headB.next
}

};

思路就是 在第一个循环里面疯狂添加 A链表的值 在第二个循环里面去检测 如果set里面的值 与 B链表的值一样 那说明有相交

结束语:面试题远远不止这些,今天先挑出来一些常问的和一些好玩的面试题 剩下的面试题我们后续篇章见