前端進階 & 面試必備，優質資源、好文整理分享！

時間 2019-11-07

原文原文鏈接

前言

前端技術突飛猛進，隨着 大前端 的趨勢，想要成爲一名合格的前端工程師，須要學習掌握的東西更是寬泛。因此咱們在尋求進階的過程當中，既要不斷夯實前端基礎，也要快速響應技術的更新迭代。閒話少說，此次給你們整理分享一些前端進階的優質學習資源，但願對你們有所幫助！javascript

我的博客地址 🍹🍰 fe-codecss

github 優質項目

frontend-tech-list

前端技術清單，不論你是正在自學前端，仍是對前端某些技術熟練掌握但某些還未涉足，我都但願這份清單能幫助你 review 一些前端的基礎能力。

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

🌐 Browser

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	已完結