你有一份最全前端速查表，請注意查收！

要記住所有的 API 幾乎是不可能的。這個時候就要看速查表了！這是我收集的最好的前端速查表。

01

Javascript ES2015 features

devhints.io/es6

關於 ES2015，ES2016，ES2017 甚至之後的 JavaScript 新功能概覽都在這。代碼示例加上解釋，讓你輕鬆掌握所有 JavaScript 新功能。

02

Javascript

overapi.com/javascript

這個網站囊括所有 JavaScript APIs，點擊某個 API 還能夠查看代碼示例以及在線編譯運行代碼哦，快來試試吧。（其實這個網站還包括 Python，jQuery，NodeJS，PHP，Java，Ruby 等語言的 API 及語法介紹，一般人我不告訴他 _）

03

Javascript Regular expression

www.debuggex.com/cheatsheet/regex/javascript

JavaScript 正則表達式速查表，還自帶正則表達式測試工具，快來圍觀一下。

04

React

devhints.io/react

React 是目前最熱門的前端框架之一，以聲明式語法編寫 UI，提高了代碼可讀性且易於調試。

05

Redux

github.com/linkmesrl/react-journey-2016/blob/master/resources/egghead-redux-cheat-sheet-3-2-1.pdf

Redux 是 JavaScript 狀態容器，提供可預測化的狀態管理，並且易於測試。Redux 經常和 React 搭配一起使用，幫助大型複雜項目更好地管理狀態。這個 PDF 不僅解釋了 Redux 基礎概念，三原則等，還有代碼示例演示，而且劃分了代碼中各個關鍵函數實際匹配的概念，讓人一目了然。

06

Vue.js

vuejs-tips.github.io/cheatsheet/

Vue 也是目前最火的前端框架之一，比起 React 也是不遑多讓（React 目前 89 K stars，Vue 85 K）。下面這個速查表可以說囊括了 Vue 的各個方面，點擊每一項可以看到具體說明以及代碼示例。

07

Vuex

vuejs-tips.github.io/vuex-cheatsheet/

Vuex 是專為 Vue 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的所有組件狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。下面的速查表和上面的來自同一個 vuejs-tips 庫。

08

Angular 4

angular.io/guide/cheatsheet

Angular 和 Vue 一樣擅長構建一個單一頁面應用程序，但 Angular 還支持跨平台，可以構建適用於所有平台的應用。下面這個速查表也是 Angular 的官方速查表。

09

Flexbox

yoksel.github.io/flex-cheatsheet/

Flexbox 是一種 CSS 布局。前端新手（沒錯，就是我）可能會經常忘記 justify-content 和 align-items 在水平和垂直布局時的差異。這時候有個小小的動態布局工具來幫助鞏固用法想必是極好的。

這裡還有一個 [Flexbox 小遊戲](http://flexboxfroggy.com/#zh-cn)推薦一下，寓教於樂，讓你掌握 Flexbox 要點。

10

SCSS

devhints.io/sass

Sass 是一種 CSS 開發工具，是對 CSS 的擴展，讓 CSS 語言更強大、優雅。下面的速查表樣式想必大家已經很熟悉了。

11

Stylus

devhints.io/stylus

Stylus 是一個 CSS 預處理框架，Stylus 語法可讀性高，富有表現力，可以使用循環，分支，定義變數和函數結構來寫 CSS。大家趕緊收了 devhints 這個網站吧，這個網站的速查表佔了本篇文章半壁江山。=_=||

12

GraphQL

raw.githubusercontent.com/sogko/graphql-shorthand-notation-cheat-sheet/master/graphql-shorthand-notation-cheat-sheet.png

GraphQL 是一種用於 API 的查詢語言，GraphQL 對於 API 中的數據提供了一套易於理解的完整描述，讓客戶端能準確地獲取它需要的數據，而且沒有任何冗餘。

譯/ Cygwin

·END·

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！