1. 30-seconds-of-code

該項(xiàng)目講的是滿足你所有開發(fā)需求的簡短代碼段，里面都是些經(jīng)常會用到而且是非常經(jīng)典的代碼，非常值得學(xué)習(xí)！

比如 JavaScript 模塊就分為了 All、Array、Browser、Date、Function、Math、Node、Object、String 方便學(xué)習(xí)的。

比如：你必須知道的 4 種 JavaScript 數(shù)組方法

Array.prototype.map()

const arr = [1, 2, 3]; 
const double = x => x * 2; 
arr.map(double); // [2, 4, 6] 

Array.prototype.filter()

const arr = [1, 2, 3]; 
const isOdd = x => x % 2 === 1; 
arr.filter(isOdd); // [1, 3] 

Array.prototype.reduce()

const arr = [1, 2, 3]; 
 
const sum = (x, y) => x + y; 
arr.reduce(sum, 0); // 6 
 
const increment = (x, y) => [...x, x[x.length - 1] + y]; 
arr.reduce(increment, [0]); // [0, 1, 3, 6] 

Array.prototype.find()

const arr = [1, 2, 3]; 
const isOdd = x => x % 2 === 1; 
arr.find(isOdd); // 1 

又比如：如何在 JavaScript 中實(shí)現(xiàn)睡眠功能？

同步版本

const sleepSync = (ms) => { 
  const end = new Date().getTime() + ms; 
  while (new Date().getTime() < end) { /* do nothing */ } 
} 
 
const printNums = () => { 
  console.log(1); 
  sleepSync(500); 
  console.log(2); 
  console.log(3); 
}; 
 
printNums(); // Logs: 1, 2, 3 (2 and 3 log after 500ms) 

異步版本

const sleep = (ms) => 
  new Promise(resolve => setTimeout(resolve, ms)); 
 
const printNums = async() => { 
  console.log(1); 
  await sleep(500); 
  console.log(2); 
  console.log(3); 
}; 
 
printNums(); // Logs: 1, 2, 3 (2 and 3 log after 500ms) 

其實(shí)上面講到的事例里面還提供 api 和方法的講解的，方便讀者能看懂的，這里就不寫出來了。

還想學(xué)更多的 經(jīng)典 js 代碼片段，請看下面的倉庫

https://github.com/30-seconds...

2. 33-js-concepts

[[357715]]

JavaScript開發(fā)者應(yīng)懂的 33 個概念

這個項(xiàng)目是為了幫助開發(fā)者掌握 JavaScript 概念而創(chuàng)立的。它不是必備，但在未來學(xué)習(xí)（JavaScript）中，可以作為一篇指南。

目錄

調(diào)用堆棧
原始類型
值類型和引用類型
隱式, 顯式, 名義和鴨子類型
== 與 ===, typeof 與 instanceof
this, call, apply 和 bind
函數(shù)作用域, 塊級作用域和詞法作用域
閉包
map, reduce, filter 等高階函數(shù)
表達(dá)式和語句
變量提升
Promise
立即執(zhí)行函數(shù), 模塊化, 命名空間
遞歸
算法
數(shù)據(jù)結(jié)構(gòu)
消息隊(duì)列和事件循環(huán)
setTimeout, setInterval 和 requestAnimationFrame
繼承, 多態(tài)和代碼復(fù)用
按位操作符, 類數(shù)組對象和類型化數(shù)組
DOM 樹和渲染過程
new 與構(gòu)造函數(shù), instanceof 與實(shí)例
原型繼承與原型鏈
Object.create 和 Object.assign
工廠函數(shù)和類
設(shè)計(jì)模式
Memoization
純函數(shù), 函數(shù)副作用和狀態(tài)變化
耗性能操作和時間復(fù)雜度
JavaScript 引擎
二進(jìn)制, 十進(jìn)制, 十六進(jìn)制, 科學(xué)記數(shù)法
偏函數(shù), 柯里化, Compose 和 Pipe
代碼整潔之道

而且每個主題都包含了相關(guān)的精彩文章和視頻，非常適合學(xué)習(xí)。

https://github.com/leonardoms...

3. javascript-questions

JavaScript 進(jìn)階問題列表。

從基礎(chǔ)到高級：測試您對 JavaScript 的了解程度，稍微刷新一下知識或?yàn)榫帉懘a面試做準(zhǔn)備！

比如下面會輸出是什么？

let a = 3 
let b = new Number(3) 
let c = 3 
 
console.log(a == b) 
console.log(a === b) 
console.log(b === c) 

• A: true false true
• B: false false true
• C: true false false
• D: false true true

答案: C

解釋：

new Number() 是一個內(nèi)建的函數(shù)構(gòu)造器。雖然它看著像是一個 number，但它實(shí)際上并不是一個真實(shí)的 number：它有一堆額外的功能并且它是一個對象。

當(dāng)我們使用 == 操作符時，它只會檢查兩者是否擁有相同的 值 。因?yàn)樗鼈兊闹刀际?nbsp; 3 ，因此返回  true 。

然后，當(dāng)我們使用 === 操作符時，兩者的值以及 類型 都應(yīng)該是相同的。 new Number() 是一個對象而不是 number，因此返回  false 。

https://github.com/lydiahalli...

4. JavaScript 30

使用原生 JavaScript 在 30 天內(nèi)完成 30 個項(xiàng)目。

每天完成的 HTML, CSS 和 javascript 解決方案。

https://github.com/wesbos/JavaScript30

5. Codewars

和 leetcode 有點(diǎn)類似，也是在平臺上和其他人一起完成真實(shí)的代碼挑戰(zhàn)，提升你的技術(shù)。

相比于其他平臺，codewars 給出的問題更加貼合實(shí)際工作與生活，很多題都會給出題目背景，更有代入感。

可以提升技能：在社區(qū)創(chuàng)建的 kata 上挑戰(zhàn)自我，以增強(qiáng)各種技能。掌握您當(dāng)前選擇的語言，或擴(kuò)展您對新語言的理解。

要加入這個社區(qū)，您必須先答題證明自己的技能才可以的。

https://www.codewars.com/

6. ES6 入門教程

入門的前端都應(yīng)該都知道的 ES6 開源書籍，貓哥初入前端時就是學(xué)了 阮一峰 老師開源的 ES6 內(nèi)容的，一直實(shí)用至今！

《ECMAScript 6 入門教程》是一本開源的 JavaScript 語言教程，全面介紹 ECMAScript 6 新引入的語法特性。

本書覆蓋 ES6 與上一個版本 ES5 的所有不同之處，對涉及的語法知識給予詳細(xì)介紹，并給出大量簡潔易懂的示例代碼。

本書為中級難度，適合已經(jīng)掌握 ES5 的讀者，用來了解這門語言的最新發(fā)展；也可當(dāng)作參考手冊，查尋新增的語法點(diǎn)。

如果你是 JavaScript 語言的初學(xué)者，建議先學(xué)完《JavaScript 語言入門教程》，再來看這本書。

https://es6.ruanyifeng.com/

7. JavaScript 教程

本教程全面介紹 JavaScript 核心語法，覆蓋了 ES5 和 DOM 規(guī)范的所有內(nèi)容。

也是 阮一峰 老師寫的，真的非常通俗易懂，非常適合前端學(xué)習(xí)。

不得不說，知識掌握通透的人寫的技術(shù)文章，非常能讓人容易明白。

內(nèi)容上從最簡單的講起，循序漸進(jìn)、由淺入深，力求清晰易懂。

所有章節(jié)都帶有大量的代碼實(shí)例，便于理解和模仿，可以用到實(shí)際項(xiàng)目中，即學(xué)即用。

本教程適合初學(xué)者當(dāng)作 JavaScript 語言入門教程，學(xué)完后就可以承擔(dān)實(shí)際的網(wǎng)頁開發(fā)工作，也適合當(dāng)作日常使用的參考手冊。

目錄

入門篇
數(shù)據(jù)類型 
運(yùn)算符 
語法專題
標(biāo)準(zhǔn)庫
面向?qū)ο缶幊?br /> 異步操作 
DOM
事件
瀏覽器模型
附錄：網(wǎng)頁元素接口

https://wangdoc.com/javascript/

8. 現(xiàn)代 JavaScript 教程

以最新的 JavaScript 標(biāo)準(zhǔn)為基準(zhǔn)。通過簡單但足夠詳細(xì)的內(nèi)容，為你講解從基礎(chǔ)到高階的 JavaScript 相關(guān)知識。

課程的核心內(nèi)容包含 2 部分，涵蓋了 JavaScript 編程語言相關(guān)知識和瀏覽器行為。此外還有一系列的專題文章。

JavaScript 編程語言

在這兒我們將從頭開始學(xué)習(xí) JavaScript，也會學(xué)習(xí) OOP 等相關(guān)高級概念。

本教程專注于語言本身，我們默認(rèn)使用最小環(huán)境。

瀏覽器：文檔，事件，接口

學(xué)習(xí)如何管理瀏覽器頁面：添加元素，操縱元素的大小和位置，動態(tài)創(chuàng)建接口并與訪問者互動。

其他文章

教程的前兩部分未涉及的其他主題的內(nèi)容列表。此處沒有明確的層次結(jié)構(gòu)，你可以按你需要的順序閱讀文章。

https://zh.javascript.info/

9. MDN

MDN Web Docs 網(wǎng)站提供開放網(wǎng)絡(luò)(Open Web)技術(shù)有關(guān)的信息,包括用于網(wǎng)站和漸進(jìn)式網(wǎng)絡(luò)應(yīng)用的 HTML、CSS 和 API。

Mozilla, Microsoft, Google, Samsung 和 W3C 將合作把 MDN 打造成最好的 Web 文檔。

所以在這個平臺學(xué)習(xí) web 技術(shù)算是比較權(quán)威的了。

源于開發(fā)者，服務(wù)開發(fā)者。

https://developer.mozilla.org...

10. clean-code-javascript

優(yōu)秀的 JS 代碼規(guī)范。

比如：對相同類型的變量使用相同的關(guān)鍵字

Bad：

getUserInfo();  
getClientData();  
getCustomerRecord(); 

Good：

getUser(); 

再比如：使用可搜索的命名

在開發(fā)過程中，我們閱讀代碼的時間會遠(yuǎn)遠(yuǎn)超過編寫代碼的時間，因此保證代碼的可讀性與可搜索會非常重要。切記，沒事不要坑自己。

Bad:

//525600到底啥意思？ 
for (var i = 0; i < 525600; i++) { 
  runCronJob(); 
} 

Good:

// 聲明為全局變量 
var MINUTES_IN_A_YEAR = 525600; 
for (var i = 0; i < MINUTES_IN_A_YEAR; i++) { 
  runCronJob(); 
} 

https://github.com/ryanmcdermott/clean-code-javascript

11. TypeScript 入門教程

從 JavaScript 程序員的角度總結(jié)思考，循序漸進(jìn)的理解 TypeScript。

這個教程真的是貓哥看過的最完整而簡潔、并且通俗易懂的 TypeScript 教程！

《TypeScript 入門教程》全面介紹了 TypeScript 強(qiáng)大的類型系統(tǒng)，完整而簡潔，示例豐富，比官方文檔更易讀，非常適合作為初學(xué)者學(xué)習(xí) TypeScript 的第一本書。 —— 阮一峰

比如 類型別名 ：類型別名用來給一個類型起個新名字。

簡單的例子:

type Name = string; 
type NameResolver = () => string; 
type NameOrResolver = Name | NameResolver; 
function getName(n: NameOrResolver): Name { 
    if (typeof n === 'string') { 
        return n; 
    } else { 
        return n(); 
    } 
} 

上例中，我們使用 type 創(chuàng)建類型別名。

類型別名常用于聯(lián)合類型。

https://ts.xcatliu.com

12. w3school

前端必須知道的 Web 技術(shù)教程平臺，雖然很多前端都知道了，但是有必要提一下。

領(lǐng)先的 Web 技術(shù)教程 - 全部免費(fèi)。

在 W3School，你可以找到你所需要的所有的網(wǎng)站建設(shè)教程。

從基礎(chǔ)的 HTML 到 CSS，乃至進(jìn)階的 XML、SQL、JS。

在這里學(xué)習(xí)前端最好的地方就是有 demo 可能學(xué)習(xí)，可以驗(yàn)證你的效果或者輸出。

https://www.w3school.com.cn/j...