前端进阶 & 面试必备，优质资源、好文整理分享！

前言

前端技术日新月异，随着 大前端 的趋势，想要成为一名合格的前端工程师，需要学习掌握的东西更是宽泛。所以我们在寻求进阶的过程中，既要不断夯实前端基础，也要快速响应技术的更新迭代。闲话少说，这次给大家整理分享一些前端进阶的优质学习资源，希望对大家有所帮助！

个人博客地址 🍹🍰 fe-code

github 优质项目

frontend-tech-list

前端技术清单，不论你是正在自学前端，还是对前端某些技术熟练掌握但某些还未涉足，我都希望这份清单能帮助你 review 一些前端的基础能力。

github
前端技术清单

CS-Notes

📚 Tech Interview Guide 技术面试必备基础知识、Leetcode 题解、Java、C++、Python、后端面试、操作系统、计算机网络、系统设计

github
摘要

算法	操作系统	网络	面向对象	数据库	Java	系统设计	工具	编码实践	后记
✏️	💻	☁️	🎨	💾	☕️️	💡	🔧	🍉	📝

✏️ 算法

☁️ 网络

javascript-algorithms

JavaScript 算法与数据结构。本仓库包含了多种基于 JavaScript 的算法与数据结构。每种算法和数据结构都有自己的 README，包含相关说明和链接，以便进一步阅读 (还有 YouTube 视频) 。
算法是如何解决一类问题的明确规范。算法是一组精确定义操作序列的规则。B - 初学者， A - 进阶

github
摘要
- B Bit 操控 - set/get/update/clear 位、乘以/除以二进制位、变负等
- B 阶乘
- B 斐波那契数 - 经典 和 闭式 版本
- B 素数检测 (排除法)
- B 欧几里得算法 - 计算最大公约数 (GCD)
- B 最小公倍数 (LCM)
- B 素数筛 - 查找任意给定范围内的所有素数
- B 判断 2 次方数 - 检查数字是否为 2 的幂 (原生和按位算法)
- B 杨辉三角形
- B 复数 - 复数及其基本运算
- B 弧度和角 - 弧度与角的相互转换
- B 快速算次方
- A 整数拆分
- A 割圆术 - 基于 N-gons 的近似 π 计算
- A 离散傅里叶变换 - 把时间信号解析成构成它的频率

30-seconds-of-code

精选 JavaScript 代码段集合，您可以在30秒或更短的时间内理解这些代码段

github
摘要

📚 Array

all
allEqual
any
arrayToCSV
bifurcate
bifurcateBy
chunk
compact
countBy
countOccurrences
deepFlatten
difference
differenceBy
differenceWith
drop
dropRight
dropRightWhile
dropWhile
everyNth
filterFalsy
filterNonUnique
filterNonUniqueBy
findLast
findLastIndex
mapObject
maxN
minN
none

🌐 Browser

arrayToHtmlList
bottomVisible
copyToClipboard
counter
createElement
createEventHub
currentURL
detectDeviceType
elementContains
elementIsVisibleInViewport
formToObject
getImages
getScrollPosition
getStyle
hasClass
hashBrowser
hide

javascript-questions

JavaScript 进阶问题列表，从基础到进阶，测试你有多了解 JavaScript，刷新你的知识，或者帮助你的 coding 面试！ 💪 🚀 我每周都会在这个仓库下更新新的问题。

github

摘要

1. 输出是什么？

function sayHi() {
console.log(name)
console.log(age)
var name = 'Lydia'
let age = 21
}

sayHi()

- A: `Lydia` 和 `undefined`
- B: `Lydia` 和 `ReferenceError`
- C: `ReferenceError` 和 `21`
- D: `undefined` 和 `ReferenceError`

<summary><b>答案</b></summary>

答案: D

在函数内部，我们首先通过 `var` 关键字声明了 `name` 变量。这意味着变量被提升了（内存空间在创建阶段就被设置好了），直到程序运行到定义变量位置之前默认值都是 `undefined`。因为当我们打印 `name` 变量时还没有执行到定义变量的位置，因此变量的值保持为 `undefined`。

通过 `let` 和 `const` 关键字声明的变量也会提升，但是和 `var` 不同，它们不会被<i>初始化</i>。在我们声明（初始化）之前是不能访问它们的。这个行为被称之为暂时性死区。当我们试图在声明之前访问它们时，JavaScript 将会抛出一个 `ReferenceError` 错误。


---

* 2. 输出是什么？

```javascript
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 1)
}

for (let i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 1)
}

- A: `0 1 2` 和 `0 1 2`
- B: `0 1 2` 和 `3 3 3`
- C: `3 3 3` 和 `0 1 2`

<details><summary><b>答案</b></summary>
<p>
答案: C

由于 JavaScript 的事件循环，`setTimeout` 回调会在*遍历结束后*才执行。因为在第一个遍历中遍历 `i` 是通过 `var` 关键字声明的，所以这个值是全局作用域下的。在遍历过程中，我们通过一元操作符 `++` 来每次递增 `i` 的值。当 `setTimeout` 回调执行的时候，`i` 的值等于 3。

在第二个遍历中，遍历 `i` 是通过 `let` 关键字声明的：通过 `let` 和 `const` 关键字声明的变量是拥有块级作用域（指的是任何在 {} 中的内容）。在每次的遍历过程中，`i` 都有一个新值，并且每个值都在循环内的作用域中。

</p>
</details>

---
```

Daily-Interview-Question

每天搞定一道前端大厂面试题，祝大家天天进步，一年后会看到不一样的自己。

github
摘要

2019-07-26

第 114 题：编程题，找出字符串中连续出现最多的字符和个数（蘑菇街）
'abcaakjbb' => {'a':2,'b':2}
'abbkejsbcccwqaa' => {'c':3}

解析：第 114 题

<br/>

2019-07-25

第 113 题：编程题，根据以下要求，写一个数组去重函数（蘑菇街）

如传入的数组元素为[123, "meili", "123", "mogu", 123]，则输出：[123, "meili", "123", "mogu"]

如传入的数组元素为[123, [1, 2, 3], [1, "2", 3], [1, 2, 3], "meili"]，则输出：[123, [1, 2, 3], [1, "2", 3], "meili"]

如传入的数组元素为[123, {a: 1}, {a: {b: 1}}, {a: "1"}, {a: {b: 1}}, "meili"]，则输出：[123, {a: 1}, {a: {b: 1}}, {a: "1"}, "meili"]

解析：第 113 题

<br/>

learnVue

Vue.js 源码解析

github

vue-design

渲染器，仓库内还有一个针对 Vue 的逐行级别的源码分析，都是干货。

github
目录列表
- 组件的本质
- 设计 Vnode
- 辅助创建 VNode 的 h 函数
- 渲染器之挂载
- 渲染器之 patch
- 渲染器的核心 Diff 算法
- 自定义渲染器和异步渲染

CS-Interview-Knowledge-Map

前端面试图谱

react-interpretation

React 源码解析。通过两个部分来完成这个解析：第一是加上这份代码的中文注释，第二是配套相应的文章。

github

Front-end-Web-Development-Interview-Question

这里将收集我做过的所有的前端面试笔试题，并根据自己的理解提供解答，以及一些关于前端找工作方面的经验等。

github
摘要

试题链接	原题概述	标签分类	更新状态
1.md	Front End Web Development Quiz CSS部分	CSS	已完结
2.md	Front End Web Development Quiz HTML部分	HTML	已完结
3.md	FEX 面试题	General	待完善
4.md	前端面试常见问题	General	待完善
5.md	前端面试HTML 相关问题	HTML	已完结