12 个 GitHub 上超火的 JavaScript 奇技淫巧项目,找到写 JavaScript 的灵感!(上)

简介: 12 个 GitHub 上超火的 JavaScript 奇技淫巧项目,找到写 JavaScript 的灵感!(上)

1. 30-seconds-of-code


微信图片_20220513161418.png


该项目讲的是满足你所有开发需求的简短代码段,里面都是些经常会用到而且是非常经典的代码,非常值得学习!


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


微信图片_20220513161440.png


比如:你必须知道的 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...

2. 33-js-concepts


微信图片_20220513161642.png


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
代码整洁之道


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


微信图片_20220513161737.png


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

3. javascript-questions


微信图片_20220513161758.png


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...

4. JavaScript 30


微信图片_20220513161837.png


使用原生 JavaScript 在 30 天内完成 30 个项目。


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


https://github.com/wesbos/JavaScript30

5. Codewars


和 leetcode 有点类似,也是在平台上和其他人一起完成真实的代码挑战,提升你的技术。


相比于其他平台,codewars 给出的问题更加贴合实际工作与生活,很多题都会给出题目背景,更有代入感。


可以提升技能:在社区创建的 kata 上挑战自我,以增强各种技能。掌握您当前选择的语言,或扩展您对新语言的理解。


要加入这个社区,您必须先答题证明自己的技能才可以的。


https://www.codewars.com/

6. ES6 入门教程


微信图片_20220513161903.png


入门的前端都应该都知道的 ES6 开源书籍,猫哥初入前端时就是学了 阮一峰 老师开源的 ES6 内容的,一直实用至今!


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


本书覆盖 ES6 与上一个版本 ES5 的所有不同之处,对涉及的语法知识给予详细介绍,并给出大量简洁易懂的示例代码。


本书为中级难度,适合已经掌握 ES5 的读者,用来了解这门语言的最新发展;也可当作参考手册,查寻新增的语法点。


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

https://es6.ruanyifeng.com/
相关文章
|
1月前
|
开发工具 git
如何操作github,gitee,gitcode三个git平台建立镜像仓库机制,这样便于维护项目只需要维护一个平台仓库地址的即可-优雅草央千澈
如何操作github,gitee,gitcode三个git平台建立镜像仓库机制,这样便于维护项目只需要维护一个平台仓库地址的即可-优雅草央千澈
183 69
如何操作github,gitee,gitcode三个git平台建立镜像仓库机制,这样便于维护项目只需要维护一个平台仓库地址的即可-优雅草央千澈
|
8天前
|
前端开发 JavaScript Java
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
53 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
|
8天前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
55 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
7天前
|
SQL JavaScript 安全
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
44 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
|
11天前
|
人工智能 JavaScript 安全
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
55 13
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
|
3月前
|
JavaScript 前端开发 安全
JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择
本文深入探讨了JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择。JavaScript以其灵活性和广泛的生态支持著称,而TypeScript通过引入静态类型系统,提高了代码的可靠性和可维护性,特别适合大型项目。文章还讨论了结合使用两种语言的优势,以及如何根据项目需求和技术背景做出最佳选择。
98 4
|
3月前
|
CDN
如何在项目中使用Moment.js库?
如何在项目中使用Moment.js库?
|
4月前
|
JavaScript 测试技术 API
跟随通义灵码一步步升级vue2(js)项目到vue3版本
Vue 3 相较于 Vue 2 在性能、特性和开发体验上都有显著提升。本文介绍了如何利用通义灵码逐步将 Vue 2 项目升级到 Vue 3,包括备份项目、了解新特性、选择升级方式、升级依赖、迁移组件和全局 API、调整测试代码等步骤,并提供了注意事项和常见问题的解决方案。
194 4
|
4月前
|
JavaScript 前端开发 测试技术
JavaScript与TypeScript:为何TypeScript成为大型项目的首选
JavaScript与TypeScript:为何TypeScript成为大型项目的首选
49 1
|
4月前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
110 1

热门文章

最新文章

  • 1
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    23
  • 2
    Node.js 中实现多任务下载的并发控制策略
    32
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    25
  • 4
    【JavaScript】深入理解 let、var 和 const
    48
  • 5
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    44
  • 6
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    53
  • 7
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    55
  • 8
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    71
  • 9
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55
  • 10
    JavaWeb JavaScript ③ JS的流程控制和函数
    62