关于javascript:12-个-GitHub-上超火的-JavaScript-奇技淫巧项目找到写-JavaScript-的灵感

大家好，我是你们的猫哥，一个不喜爱吃鱼、又不喜爱喵的超级猫 ~

猫哥是一个长年混迹在 GitHub 上的猫星人，所以发现了不少好的前端开源我的项目、罕用技巧，在此分享给大家。

公众号：前端 GitHub，专一于开掘 GitHub 上优良的前端开源我的项目，并以专题的模式举荐，每专题大略 10 个好我的项目，每周会有一到三篇精髓文章推送。

曾经举荐了 面试我的项目 、css 奇技淫巧我的项目、 代码标准我的项目 、 数据结构与算法我的项目 、 治理后盾模板 、 前端必备在线工具 等专题的近 100 个优良我的项目了。

平时如何发现好的开源我的项目，能够看看这篇文章：GitHub 上能挖矿的神仙技巧 – 如何发现优良开源我的项目

以下为【前端 GitHub】的第 12 期精髓内容。

该我的项目讲的是满足你所有开发需要的简短代码段，外面都是些常常会用到而且是十分经典的代码，十分值得学习！

比方 JavaScript 模块就分为了 All、Array、Browser、Date、Function、Math、Node、Object、String 不便学习的。

比方：你必须晓得的 4 种 JavaScript 数组办法

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 中实现睡眠性能？

同步版本

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)

其实下面讲到的事例外面还提供 api 和办法的解说的，不便读者能看懂的，这里就不写进去了。

还想学更多的经典 js 代码片段，请看上面的仓库

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

JavaScript 开发者应懂的 33 个概念

这个我的项目是为了帮忙开发者把握 JavaScript 概念而创建的。它不是必备，但在将来学习（JavaScript）中，能够作为一篇指南。

调用堆栈
原始类型
值类型和援用类型
隐式, 显式, 名义和鸭子类型
== 与 ===, typeof 与 instanceof
this, call, apply 和 bind
函数作用域, 块级作用域和词法作用域
闭包
map, reduce, filter 等高阶函数
表达式和语句
变量晋升
Promise
立刻执行函数, 模块化, 命名空间
递归
算法
数据结构
音讯队列和事件循环
setTimeout, setInterval 和 requestAnimationFrame
继承, 多态和代码复用
按位操作符, 类数组对象和类型化数组
DOM 树和渲染过程
new 与构造函数, instanceof 与实例
原型继承与原型链
Object.create 和 Object.assign
工厂函数和类
设计模式
Memoization
纯函数, 函数副作用和状态变动
耗性能操作和工夫复杂度
JavaScript 引擎
二进制, 十进制, 十六进制, 迷信记数法
偏函数, 柯里化, Compose 和 Pipe
代码整洁之道

而且每个主题都蕴含了相干的精彩文章和视频，非常适合学习。

https://github.com/leonardoms…

JavaScript 进阶问题列表。

从根底到高级：测试您对 JavaScript 的理解水平，略微刷新一下常识或为编写代码面试做筹备！

比方上面会输入是什么？

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() 是一个内建的函数结构器。尽管它看着像是一个 number，但它实际上并不是一个实在的 number：它有一堆额定的性能并且它是一个对象。

当咱们应用 == 操作符时，它只会查看两者是否领有雷同的值。因为它们的值都是 3，因而返回 true。

而后，当咱们应用 === 操作符时，两者的值以及类型都应该是雷同的。new Number() 是一个对象而不是 number，因而返回 false。

https://github.com/lydiahalli…

应用原生 JavaScript 在 30 天内实现 30 个我的项目。

每天实现的 HTML, CSS 和 javascript 解决方案。

https://github.com/wesbos/JavaScript30

和 leetcode 有点相似，也是在平台上和其他人一起实现实在的代码挑战，晋升你的技术。

相比于其余平台，codewars 给出的问题更加贴合理论工作与生存，很多题都会给出题目背景，更有代入感。

能够晋升技能：在社区创立的 kata 上挑战自我，以加强各种技能。把握您以后抉择的语言，或扩大您对新语言的了解。

要退出这个社区，您必须先答题证实本人的技能才能够的。

https://www.codewars.com/

入门的前端都应该都晓得的 ES6 开源书籍，猫哥初入前端时就是学了阮一峰老师开源的 ES6 内容的，始终实用至今！

《ECMAScript 6 入门教程》是一本开源的 JavaScript 语言教程，全面介绍 ECMAScript 6 新引入的语法个性。

本书笼罩 ES6 与上一个版本 ES5 的所有不同之处，对波及的语法常识给予具体介绍，并给出大量简洁易懂的示例代码。

本书为中级难度，适宜曾经把握 ES5 的读者，用来理解这门语言的最新倒退；也可当作参考手册，查寻新增的语法点。

如果你是 JavaScript 语言的初学者，倡议先学完《JavaScript 语言入门教程》，再来看这本书。

https://es6.ruanyifeng.com/

本教程全面介绍 JavaScript 外围语法，笼罩了 ES5 和 DOM 标准的所有内容。

也是阮一峰老师写的，真的十分通俗易懂，非常适合前端学习。

不得不说，常识把握通透的人写的技术文章，十分能让人容易明确。

内容上从最简略的讲起，循序渐进、由浅入深，力求清晰易懂。

所有章节都带有大量的代码实例，便于了解和模拟，能够用到理论我的项目中，即学即用。

本教程适宜初学者当作 JavaScript 语言入门教程，学完后就能够承当理论的网页开发工作，也适宜当作日常应用的参考手册。

入门篇
数据类型 
运算符 
语法专题
规范库
面向对象编程
异步操作 
DOM
事件
浏览器模型
附录：网页元素接口

https://wangdoc.com/javascript/

以最新的 JavaScript 规范为基准。通过简略但足够具体的内容，为你解说从根底到高阶的 JavaScript 相干常识。

课程的核心内容蕴含 2 局部，涵盖了 JavaScript 编程语言相干常识和浏览器行为。此外还有一系列的专题文章。

JavaScript 编程语言

在这儿咱们将从头开始学习 JavaScript，也会学习 OOP 等相干高级概念。

本教程专一于语言自身，咱们默认应用最小环境。

浏览器：文档，事件，接口

学习如何治理浏览器页面：增加元素，操纵元素的大小和地位，动态创建接口并与访问者互动。

其余文章

教程的前两局部未波及的其余主题的内容列表。此处没有明确的层次结构，你能够按你须要的程序阅读文章。

https://zh.javascript.info/

MDN Web Docs 网站提供凋谢网络 (Open Web) 技术无关的信息, 包含用于网站和渐进式网络应用的 HTML、CSS 和 API。

Mozilla, Microsoft, Google, Samsung 和 W3C 将单干把 MDN 打造成最好的 Web 文档。

所以在这个平台学习 web 技术算是比拟权威的了。

源于开发者，服务开发者。

https://developer.mozilla.org…

优良的 JS 代码标准。

比方：对雷同类型的变量应用雷同的关键字

Bad：

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

Good：

getUser();

再比方：应用可搜寻的命名

在开发过程中，咱们浏览代码的工夫会远远超过编写代码的工夫，因而保障代码的可读性与可搜寻会十分重要。切记，没事不要坑本人。

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

从 JavaScript 程序员的角度总结思考，循序渐进的了解 TypeScript。

这个教程真的是猫哥看过的最残缺而简洁、并且通俗易懂的 TypeScript 教程！

《TypeScript 入门教程》全面介绍了 TypeScript 弱小的类型零碎，残缺而简洁，示例丰盛，比官网文档更易读，非常适合作为初学者学习 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 创立类型别名。

类型别名罕用于联结类型。

https://ts.xcatliu.com

前端必须晓得的 Web 技术教程平台，尽管很多前端都晓得了，然而有必要提一下。

当先的 Web 技术教程 – 全副收费。

在 W3School，你能够找到你所须要的所有的网站建设教程。

从根底的 HTML 到 CSS，乃至进阶的 XML、SQL、JS。

在这里学习前端最好的中央就是有 demo 可能学习，能够验证你的成果或者输入。

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

人不知; 鬼不觉，曾经写到第 12 期了呢，曾经分享了靠近 100 个好的前端我的项目了呢，往期精文请看下方宝藏仓库，点击很危险，请慎入！

[前端 GitHub]：https://github.com/FrontEndGitHub/FrontEndGitHub

平时如何发现好的开源我的项目，能够看看这篇文章：如何在 GitHub 上发现优良开源我的项目和如何应用 GitHub 进行精准搜寻的神仙技巧。

感觉有用？喜爱就珍藏，顺便点个赞吧，你的反对是超级猫最大的激励！

超级猫的 wx：CB834301747，微信搜“前端 GitHub”，回复“电子书”即能够取得 160 本前端精髓书籍哦。

往期精文

10 个 GitHub 上超火的前端面试我的项目，打造本人的加薪宝库！
10 个 GitHub 上超火的 CSS 技巧我的项目，找到写 CSS 的灵感！
11 个超火的前端必备在线工具，终于有工夫下班摸鱼了
11 个超火的大厂前端代码标准，你也能写出诗一样的代码！

关于javascript:12-个-GitHub-上超火的-JavaScript-奇技淫巧项目找到写-JavaScript-的灵感

前言

1. 30-seconds-of-code

2. 33-js-concepts

3. javascript-questions

4. JavaScript 30

5. Codewars

6. ES6 入门教程

7. JavaScript 教程

8. 古代 JavaScript 教程

9. MDN

10. clean-code-javascript

11. TypeScript 入门教程

12. w3school

最初