2024-2-7 字节商业化 一面 过
CSS 有哪些选择器，权重
事件循环输出题目
为什么运行输出每次不一定一样，setTimeout 那里
new Promise((resolve, reject) => { console.log('1') resolve()}) .then(() => { console.log('2') }) .then(() => { console.log('10') })setTimeout(() => { console.log('11') setTimeout(() => { console.log('12') }, 0)}, 3)Promise.resolve().then(() => { console.log('3') setTimeo ...
call、apply、bind前言在前面已经了解了this，这篇文章讨论如何改变this的指向。
何为 this？this 是用来指代这个函数当前的运行环境，可以这么理解：
const me = { name: '111' }const you = { name: '222' }function sayName(context) { console.log(context.name)}sayName(me) // 111sayName(you) // 222
我们可以把传入的执行环境简化，这时候就使用到了this
const me = { name: '111' }const you = { name: '222' }function sayName() { console.log(this.name)}sayName.call(me) // 111sayName.call(you) ...
Vue-Router前言Vue-Router就是Vue的官方路由库，至于路由是什么，以及为什么需要他，他解决什么问题，有什么好处，下面来展开讲讲。
什么是路由路由（Route）就是指 App 如何响应 URL 的机制。它用于把不同的 URL 映射到 App 的不同页面/试图，从而实现页面之间的导航和切换。
在以前，我们通过地址栏切换不同的 URL 时，会向服务器发送请求，服务器返回拼接好的 HTML 文件，然后展示在页面，这也称为后端路由。他的优点是减少了前端的压力，因为 HTML 由后端拼接，不过他也有缺点：依赖网速、项目很大时对服务器的压力很大、前后端没有分离。
现在的话，得益于 SPA 的兴起，出现了前端路由的概念。
SPA: Singal Page Application，单页应用。就是指这个 Web 项目只有一个 HTML 页面，SPA 通过在单个 HTML 页面中加载并动态更新内容，实现了无需刷新整个页面的用户体验。
页面的刷新、跳转都和路由相关，也实现了前后端分离，前端负责页面呈现，仅仅需要获取数据的时候再向后端请求，模块化程度更高，用户体验也更好了。
路由 ...
虚拟 DOM前言在上一篇文章回流与重绘里面我们就提到了，操作 DOM 元素是代价挺高的，也给出了一些优化方案，不过总体来说，直接操作 DOM 其实也是比较麻烦的，而且也有较高的心智负担，这篇文章就来介绍一下虚拟 DOM。
关键词：虚拟 DOM、diff 算法、跨平台、回流、重绘
什么是虚拟 DOM先来说说为什么出现吧，在之前，基本都是使用jQuery手动操作 DOM，代码中有很大一部分都是在操作 DOM，随着应用的复杂化，这变得越来越烦琐，而且也有很大的性能开销。
所以说我们需要有一种方式来优化他，根据上一篇文章的优化方案，我们可以很容易的想到，在 js 里面模拟 DOM，然后操作完毕后，一次性渲染 DOM，这样可以减少很多重排次数。
那么把这个操作规范一下，我们只需要负责改变数据/状态，修改 DOM 的行为交给一个东西来做，可以称之为虚拟 DOM。
虚拟 DOM 可以简单理解为用 js 模拟 DOM 结构，然后在 js 中对比，之后再去渲染。
下面这个 DOM 就可以映射成一个虚拟 DOM
<ul id="list"> <li c ...
回流与重绘
重绘(repaint)，回流也称为重排(reflow)
前言这是一道很经典的前端八股面试题了，不过实际开发也是有作用的
在做 UI 效果的时候一般考虑的就是俩个方面：
美观层面：布局样式好不好看
性能层面：浏览器渲染性能，会不会触发回流和重绘
这里就围绕其中的回流与重绘展开谈谈
什么是浏览器的回流重绘？
如何在实际项目中考虑他们产生的性能问题？
如何权衡他们
重绘某些元素的外观改变所出发的浏览器行为，不过没有改变布局，把元素外观重新绘制出来的过程就叫重绘
常见会引起重绘的属性：
color
border-style
visibility
background
text-decoration
background-image
background-position
background-repeat
outline-color
outline
outline-style
border-radius
Outline-width
box-shadow
background-size
重排某些元素的位置或尺寸发生了变化，浏览器需要重新生成布局，重 ...
Map、Set 与 Symbol前言这几个数据结构是 ES6 新增的，还记得当时第一次面试被问到“你对这几个了解多少？有使用过吗？”时，啥也不会特尴尬 🫢，所以现在详细了解并整理一下这几个数据结构。
MapMap 是什么？让我们来看一下 MDN 文档的介绍：
Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者原始值）都可以作为键或值。
可以看到其中几个关键点：保存键值对、记住键的原始插入顺序、任何值都能作为键或值
这些就是他的特点，相较于 object 不同的地方，不过其实他和 object 也有很多共同之处，而且很多时候用哪个都可以。
基本使用// 创建一个空映射const map1 = new Map()// 使用嵌套数组初始化映射const map2 = new Map([ ['key1', 'val1'], ['key2', 'val2'],])
初始化之后可以通过set()来添加键值对，此外还可以通过get()和has()来查询，可以用size属性来获取数量，还可以 ...
面试梳理前言今天看了几篇大佬的文章，有被震撼的，想写一下自己面试需要达到的水平，以及需要做哪些准备，然后还会简单记录一些思路技巧。
大佬文章：
2020 三元同学春招阿里淘系、阿里云、字节跳动面经 & 个人成长经验分享
阿里腾讯面试梳理&个人成长经历分享
简单介绍我是 2025 届毕业生，目前是大三下，起步的话大致在大二那一学期，大半个学期在学前端，小半个大二以及大三上在实习，但是实习的过程中感觉没有很多实际上的进步，更多的是拓展视野以及知识面，并没有多少深入。
我这一届的暑期实习在 24 年 6 月，秋招在 24 年底，春招在 25 年初，所以时间不多也不少，目前来说投入更多的时间去学习还是来得及的，不过也需要保持一直学习，不能因为实习就少学。
那么首先是要有规划，然后看技术内容，实践总结梳理，最后有产出。
面试机会有很多同学或者学长在大厂工作，可以去找内推，所以机会肯定还是有的，但是能不能把握住就需要靠自己了。
履历上可以作为优秀的点有很多：
学历优势
大厂实习经历，offer
基础扎实，读过源码，理解框架的设计思想
有社区影响力，有博客产出
开源贡献，开 ...
JS 数据类型判断
参考文章：每天搞透一道 JS 手写题 💪「Day1 数据类型判断+手写 instanceof」
typeof可以区分基础类型，但是对于引用数据类型都会返回object，对类会返回function，对null返回object
log(typeof 'Ken') // stringlog(typeof 3.14) // numberlog(typeof false) // booleanlog(typeof function () {}) // functionlog(typeof undefined) // undefinedlog(typeof [1, 2, 3, 4]) // objectlog(typeof { name: 'Ken', age: 18 }) // objectlog(typeof new Date()) // objectlog(typeof null) // objectlog(typeof Object) // functionlog(typeof Numb ...
正则表达式一直以来都避免接触正则 😠，因为感觉都是啥，看不懂，好难看，不想学 🥺。不过还是有必要了解学习一下的，至少要能看懂，知道在什么时候使用它，当然具体的表达式可以直接百度或者问 GPT，看得懂意思就好。
正则表达式是匹配模式，要么匹配字符，要么匹配位置。
搞懂位置能干啥？
数字的千分位分割法
123456789 -> 123,456,789
手机号 3-4-4 分割
12345678901 -> 123-4567-8901
密码合法性校验
密码长度是 6-12 位，由数字、小写字符和大写字母组成，但必须至少包括 2 种字符
上面也都是很常见的需求，正则可以很方便的解决他们
什么是位置位置可以理解为相邻字符之间的位置，可以类比为空字符串，在字符的首尾、间隙用空字符连接
'he' === '' + 'h' + '' + 'e' + ''
有哪些位置正则中常用来表示位置的符号主要有：^、$、\b、\B、?=p、(?!p)、(?<= ...
