首先感谢掘金,茫茫人海,我在这里遇到了我的爱人,我们相遇于掘金沸点,然后相识、相知、相见、相恋,见家长,并且一起计划我们的未来、相守、相伴
我真的很感激、很开心、很幸运、很幸福!
由于她也准备找工作了,所以本篇文章,写给我家女朋友,提前祝她找到一家好公司
HTML + CSS
CSS 和 JS 基础都很重要,有些人明明框架源码都能对答如流,可是这些基础却支支吾吾说不明白,从而错过好的 offer 是真的很可惜,所以面试前一定要好好复习下这些基础知识
JavaScript 基础
可以看这篇文章 JavaScript 进阶知识点。内容包含数据类型、类型转换、Set、Map、WeakSet、WeakMap、this、箭头函数、闭包、深浅拷贝、原型链、继承、垃圾回收、事件循环等
JS 数据类型
最新的 ECMAScript 标准定义了8种
数据类型。JavaScript 数据类型和数据结构
基础类型:Number
, String
, Boolean
, undefined
, null
, Symbol
, BigInt
复杂类型:Object
事件循环
事件循环:一句话概括就是入栈到出栈的循环。即:一个宏任务,所有微任务,渲染(需要渲染的话),一个宏任务,所有微任务,渲染.....
循环过程:
- 所有同步任务都在主线程上依次执行,形成一个执行栈(调用栈),异步任务则放入一个任务队列
- 当执行栈中任务执行完,再去检查微任务队列里的微任务是否为空,有就执行,如果执行微任务过程中又遇到微任务,就添加到微任务队列末尾继续执行,把微任务全部执行完
- 微任务执行完后,再到任务队列检查宏任务是否为空,有就取出最先进入队列的宏任务压入执行栈中执行其同步代码
- 然后回到第2步执行该宏任务中的微任务,如此反复,直到宏任务也执行完,如此循环
深浅拷贝
浅拷贝:只拷贝对象第一层,键值是引用类型就拷贝指针。拷贝栈不拷贝堆
// 1. 展开运算符 ...
let obj1 = { ...obj }
// 2. Object.assign() 把obj2合并到obj1
Object.assign(obj1, obj2)
// 3. 手写
function clone(target){
let obj = {}
for(let key in target){
obj[key] = target[key]
}
return obj
}
// 4. 数组浅拷贝 用Array方法 concat()和slice()
let arr1 = [ 1,2,{ c:3 } ]
let arr2 = arr1.concat()
let arr3 = arr1.slice()
深拷贝:如果拷贝键值是对象,就需要进一步拷贝值,而不是指针了,所以一般需要用递归,直到全部键值都是基本类型
需要注意的是 属性引用了自身的情况,就会造成循环引用,导致栈溢出
解决循环引用 可以额外开僻一个存储空间,存储当前对象和拷贝对象的关系,当需要拷贝对象时,先去存储空间找,有木有这个拷贝对象,如果有就直接返回,如果没有就就继续拷贝,这就解决了
// 1. 用序列化和反序列化,重新开辟一块内存
let obj2 = JSON.parse(JSON.stringify(obj1))
// 2.手写递归 - 简易版
function clone(target, map = new Map()){
if (typeof target === 'object') { // 引用类型才继续深拷贝
let obj = Array.isArray(target) ? [] : {} // 考虑数组
//防止循环引用
if (map.get(target)) {
return map.get(target) // 有拷贝记录就直接返回
}
map.set(target,obj) // 没有就存储拷贝记录
for (let key in target) {
obj[key] = clone(target[key], map) // 递归
}
return obj
} else {
return target
}
}
Set、Map、WeakSet、WeakMap
Set
和 Map
都是强引用,都可以遍历,比如 for of / forEach
WeakSet
和 WeakMap
都是弱引用,对 GC(垃圾回收)
更加友好,都不能遍历
Set 和 WeakSet 只有键值(key)没有键名,Map 和 WeakMap 是键值对的集合
强弱引用:比如: let obj = {} 就默认创建了一个强引用的对象,只有手动将 obj = null,在没有引用的情况下它才会被垃圾回收机制进行回收,如果是弱引用对象,垃圾回收机制会自动帮我们回收,某些情况下性能更有优势,比如用来保存 DOM 节点,不容易造成内存泄漏
数组
会改变原数组的几个方法:pop()
、push()
、shift()
、unshift()
、reverse()
、sort()
、splice()
、fill()
、copyWithin()
其他更多详细的可以看这篇文章,总结的很详细:JS数组方法总览及遍历方法耗时统计,不说所有都记住吧,但是对于一些常用的方法要熟悉并知道区别,比如 forEach()
、map()
、filter()
之间的区别?
字符串
字符串相关如图,用法都在这篇文章 JavaScript 28个常用字符串方法及使用技巧
JavaScript 手写
很多公司喜欢考这个,比如:call、bind、apply、防抖、节流、Promise、深拷贝等,有时间的时候看看练一下这几个。具体可以参考这个 22个高频JavaScript手写代码
Vue
这一块知识也要尽可能熟练掌握,可能里面一些知识点觉得工作中用不到,而且公司也不会让你去写框架,但是如何让别人知道你能保质保量的完成好开发任务呢,就需要你熟练掌握框架
Vue 核心思想
- 数据驱动,视图内容随着数据改变而改变;
- 组件化,可以增加代码复用性,可维护性,体现了高内聚低耦合
Vue2 相关的可以看这篇三心大佬总结的文章:熬夜总结50个Vue知识点,全都会你就是神
Vue3 相关的看我写的这个:聊一聊 Vue3 的 9 个知识点,还有 Vue3的8种和Vue2的12种组件通信
Vue-Router 可以看下这篇红尘炼心大佬总结的文章:Vue-Router面试题汇总
Vue 新的状态管理 Pinia or Vuex5 ? 看这个:上手 Vue 新的状态管理 Pinia,一篇文章就够了
可以毎天看一部份,慢慢来,看不懂的就先跳过,知道个大概先,之后再来巩固一下就行
网络 + 浏览器
输入 URL 到页面显示的过程
这个是真的非常容易被问到,因为这里面涉及大量知识点,所以要尽可能熟练。 输入URL到页面显示的前端体系知识
HTTP 相关
这也是一个高频考点,特别是加密算法、签名原理、get和post的区别、常见状态码、http 不同版本的区别,这几个点要巩固一下。20分钟助你拿下HTTP和HTTPS,巩固你的HTTP知识体系
TCP/UDP 相关
过一下 TCP/UDP 的使用场景和区别,有个印象。巩固你的网络底层基础,再不怕被问TCP/IP/UDP
安全相关
浏览器在不断在进化和发展过程中,不断引入 CSP、SameSite
、HttpOnly
、Cookies 等新技术来增强安全性,但是仍存在很多潜在的威胁,这需要我们不断进行“查漏补缺”,所以也是很容易被问到一些安全问题和防范。吃透浏览器安全(同源限制/XSS/CSRF/中间人攻击)及防范
跨域相关
跨域是我们日常开发中一定会遇到的,怎么突破同源限制的一些方法,你可以不用,但你不能不知道。前端跨域整理总结
前端缓存相关
前端缓存(就是浏览器缓存/http缓存),特别强缓存和协商缓存,还有本地存储这一块这也是必问的,五步吃透前端缓存,让页面飞起
工程化
这一块如果没有很多实践的话,可能就会难一点,不过再怎么样,关于 Webpack 和 Vite 的特别一些区别还是要清楚的
Webpack
推荐刘小夕大佬的系列文章,由浅入深
带你深度解锁Webpack系列(基础篇)
带你深度解锁Webpack系列(进阶篇)
带你深度解锁Webpack系列(优化篇)
Vite
这里主要是 Vite 从安装到配置的实践流程:vite工程化实践,建议收藏
这里主要是 Vite 和传统打包方式的对比和原理:深入理解Vite核心原理
结语
在此祝愿大家:有对象的幸福美满,单身的早日找到如意良配
感谢大家的每一个点赞
感谢掘金