250+ JS 资源助您掌握编程💥速查表
Hello World!
完成终极速查表合集后,我感觉无聊透顶,所以决定再创建一个!这是你能在网上找到的最全的 JavaScript 速查表和资源合集!
另请阅读:


400+ JavaScript 面试题🎓及答案🌠
Lorenzo 为 World In Dev 撰稿 ・ 2021 年 4 月 27 日
⚡ 赠品 ⚡
我们正在 Udemy 上免费赠送您需要的任何课程。任何价格,任何课程。
参与赠品活动的步骤
--> 回复此帖子
-->订阅我们的新闻通讯<-- 非常重要
PS:我花了大约 10 个小时才完成这篇文章 - 所以请记得点赞 ❤️和超级喜欢🦄
目录
对于初学者
什么是 JS (Javascript)
JavaScript 是一种脚本或编程语言,它允许你在网页上实现复杂的功能——每当网页不再只是显示静态信息供你浏览时——显示及时的内容更新、交互式地图、动画 2D/3D 图形、滚动视频点播等等——你肯定少不了 JavaScript 的身影。它是标准 Web 技术“千层蛋糕”中的第三层。MDN
是干啥用的?
简而言之,JavaScript 是一种面向对象的编程语言,旨在使 Web 开发更轻松、更具吸引力。在大多数情况下,JavaScript 用于为网页创建响应式、交互式元素,从而提升用户体验。诸如菜单、动画、视频播放器、交互式地图,甚至简单的浏览器内游戏,都可以使用 JavaScript 快速轻松地创建。JavaScript 是世界上最流行的编程语言之一。BitDegree - JavaScript 的用途以及学习它的理由
Javascript 中的 Hello World:
alert("Hello World") — Output data in an alert box in the browser window
confirm("Hello World") — Opens up a yes/no dialog and returns true/false depending on user click
console.log("Hello World") — Writes information to the browser console, good for debugging purposes
document.write("Hello World") — Write directly to the HTML document
prompt("Remember the like!") — Creates a dialogue for user input
学习资源:
Mozilla’s JavaScript Guide
JavaScript track on Codecademy: Interactive tutorials for beginners.
JavaScript for Cats by Max Ogden
Eloquent JavaScript by Marijn Haverbeke
Wikibooks’ JavaScript book
JavaScript Lectures by Douglas Crockford
You Don't Know JS - Possibly the best book written on modern JavaScript, completely readable online for free, or can be bought to support the author.
braziljs/js-the-right-way - An easy-to-read, quick reference for JS best practices, accepted coding standards, and links around the Web.
JSbooks - Directory of free JavaScript ebooks.
Superhero.js - A collection of resources about creating, testing and maintaining a large JavaScript code base.
SJSJ - Simplified JavaScript Jargon is a community-driven attempt at explaining the loads of buzzwords making the current JavaScript ecosystem in a few simple words.
How to Write an Open Source JavaScript Library - A comprehensive guide through a set of steps to publish a JavaScript open source library.
JavaScript Tutorials - Learn Javascript online from a diverse range of user ranked online tutorials.
Functional-Light JavaScript - Pragmatic, balanced FP in JavaScript.
Clean Code JavaScript - Clean Code concepts adapted for JavaScript.
List at GitHub - Awesome Javascript - By Alexandru Gherasim
At Reddit - What 10 Things Should a Serious Javascript Developer Know Right Now?
-
Scope. If you don't understand this intimately then you aren't that serious about this language. This is the number one point intentionally and I cannot stress it enough.
-
Architecture. You don't have to be a master software architect, but if you cannot perform some basic planning and put pieces together without massive layers of tooling you are an imposter. Expecting frameworks and other tools to simply do it for you isn't very impressive.
-
DOM. It is very common to see developers hiding from the DOM by layers of abstractions and other stupid crap. querySelectors are great, but are also 2800x slower than the standard DOM methods. That isn't trivial. These methods are super simple, so there is no valid excuse for developers fumbling over this or hiding in fear. http://prettydiff.com/guide/unrelated_dom.xhtml
-
Node.js If you are a serious developer should have a pretty solid grasp of how to walk the file system. You should understand how to conveniently read files as text or less conveniently read files as bit for bit binary buffers.
-
计时和异步操作。事件、计时器和网络请求都是异步的,彼此独立,并且同时存在于 Node 和浏览器中。你必须能够理解如何使用回调或 Promise。
-
可访问性。JavaScript强制的交互可能会造成可访问性障碍。一位认真的 JavaScript 开发人员应该熟悉 WCAG 2.0,并且知道如何遵循其建议,或者何时阻止违反业务要求的行为。
-
安全。你至少需要对安全违规、安全控制和隐私有基本的了解。你不需要成为CISSP,但你需要能够提供建议并避免明显的错误。如果你连最基本的都做不到,那么你就不是一个合格的开发者。
-
数据结构。你需要了解如何组织数据,以便在不影响维护的情况下实现最快的执行速度。这需要通过学术研究和反复编写应用程序的经验来学习。
-
呈现和语义。你确实需要对如何正确组织用户将要使用的内容以及如何以可消费的方式高效呈现有基本的了解。这几乎完全是靠经验积累的。你可能认为 CSS 和 HTML 是一些简单的技能,需要时就可以掌握,但你绝对错了。
-
知道何时避免胡扯。许多开发人员缺乏多年的经验,无法对自己的表现充满信心……所以有些人会试图伪装。不要成为冒名顶替者,因为每个人都能一眼看穿。指望堆积如山的抽象、工具、框架、编译器和其他胡扯能帮你解决问题,只会让你的应用程序陷入困境,并让你的队友感到困扰。如果你没有信心,那就坦诚相告,寻求指导,或者在工作之余参与开源软件。
JS 备忘单:
--> 点击此处下载此备忘单的 PDF 版本
包含 Javascript:
<script type="text/javascript"></script>
// or Include it in an external file (this is a comment)
/* This is also another way you can insert comments,
Multiline normally */
<script src="myscript.js"></script><code></code>
// PS: Remember to sub to our newsletter for the Giveaway!
变量:
var myVariable = 22; //this can be a string or number. var is globally defined
let myVariable = 22; //this can be a string or number. let can be reassigned
const myVariable = 22; //this can be a string or number. can't be reassigned
文章已不再可用
数据类型:
//string
let string = 'ASCII text';
//int
let integer = 123456789;
//float
let float = 123.456;
//boolean, can be true or false
let t = true;
let f = false;
//undefined
let undef;//defaults to undefined
let undef = undefined;//not common, use null
//null
let nul = null;
//array
let arr = ['Hello','my','name','is','Dr.Hippo',123,null];
//object
let person = {'name':'John Smith','age':27};
//function
let fun = function(){
return 42;
}
来源 - JavaScript 中的数据类型 - c-sharpcorner.com
运算符
基本运算符
+ — Addition
- — Subtraction
* — Multiplication
/ — Division
(...) — Grouping operator, operations within brackets are executed earlier than those outside
% — Modulus (remainder )
++ — Increment numbers
-- — Decrement numbers
文章已不再可用
比较运算符
== Equal to
=== Equal value and equal type
!= Not equal
!== Not equal value or not equal type
> Greater than
< Less than
>= Greater than or equal to
<= Less than or equal to
? Ternary operator
逻辑运算符
&& Logical and
|| Logical or
! Logical not
位运算符
& AND statement
| OR statement
~ NOT
^ XOR
<< Left shift
>> Right shift
>>> Zero fill right shift
循环
for——多次循环代码块。
for (statement 1; statement 2; statement 3) {
// Coooode
}
for/in - 循环遍历对象的属性。for
/of - 循环遍历可迭代对象的值。
while - 当指定条件为真时循环执行代码块。
let i=0;
while (i < 10) {
console.log(i);
i++;
}
中断并继续
如果使用不带标签的 break,它会立即终止最内层的 while、do-while、for 或 switch 语句,并将控制权转交给后续语句。
如果使用带标签的 break,它会终止指定的带标签的语句。如果使用不带标签的 continue,它会终止最内层 while、do-while 或 for 语句的当前迭代,并继续执行循环的下一次迭代。与 break 语句不同,continue 不会完全终止循环的执行。在 while 循环中,它会跳转回条件语句。在 for 循环中,它会跳转至增量表达式。
如果使用带标签的 continue,它会应用于该标签所标识的循环语句。
文章已不再可用
字符串
dev.to 文章 - 你应该知道的 10 个 JavaScript 字符串方法 - 作者:@frugencefidel
转义字符
\' — Single quote
\" — Double quote
\\ — Backslash
\b — Backspace
\f — Form feed
\n — New line
\r — Carriage return
\t — Horizontal tabulator
\v — Vertical tabulator
数组和数组方法
你应该知道的 10 个 JavaScript 数组方法 - Rachel Cole,morioh.com
concat(arr1,[...]) // Joins two or more arrays, and returns a copy of the joined arrays
copyWithin(target,[start],[end]) // Copies array elements within the array, to and from specified positions
entries() // Returns a key/value pair Array Iteration Object
every(function(currentval,[index],[arr]),[thisVal]) // Checks if every element in an array pass a test
fill(val,[start],[end]) // Fill the elements in an array with a static value
filter(function(currentval,[index],[arr]),[thisVal]) // Creates a new array with every element in an array that pass a test
find(function(currentval,[index],[arr]),[thisVal]) // Returns the value of the first element in an array that pass a test
findIndex(function(currentval,[index],[arr]),[thisVal]) // Returns the index of the first element in an array that pass a test
forEach(function(currentval,[index],[arr]),[thisVal]) // Calls a function for each array element
from(obj,[mapFunc],[thisVal]) // Creates an array from an object
includes(element,[start]) // Check if an array contains the specified element
indexOf(element,[start]) // Search the array for an element and returns its position
isArray(obj) // Checks whether an object is an array
join([seperator]) // Joins all elements of an array into a string
keys() // Returns a Array Iteration Object, containing the keys of the original array
lastIndexOf(element,[start]) // Search the array for an element, starting at the end, and returns its position
map(function(currentval,[index],[arr]),[thisVal]) // Creates a new array with the result of calling a function for each array element
pop() // Removes the last element of an array, and returns that element
push(item1,[...]) // Adds new elements to the end of an array, and returns the new length
reduce(function(total,currentval,[index],[arr]),[initVal]) // Reduce the values of an array to a single value (going left-to-right)
reduceRight(function(total,currentval,[index],[arr]),[initVal]) // Reduce the values of an array to a single value (going right-to-left)
reverse() // Reverses the order of the elements in an array
shift() // Removes the first element of an array, and returns that element
slice([start],[end]) // Selects a part of an array, and returns the new array
some(function(currentval,[index],[arr]),[thisVal]) // Checks if any of the elements in an array pass a test
sort([compareFunc]) // Sorts the elements of an array
splice(index,[quantity],[item1,...]) // Adds/Removes elements from an array
toString() // Converts an array to a string, and returns the result
unshift(item1,...) // Adds new elements to the beginning of an array, and returns the new length
valueOf() // Returns the primitive value of an array
功能
句法
function name(parameter1, parameter2, parameter3) {
// code to be executed
}
示例
function myFunction(p1, p2) {
return p1 * p2; // The function returns the product of p1 and p2
}
let x = myFunction(4, 3); // Function is called, return value will end up in x
function myFunction(a, b) {
return a * b; // Function returns the product of a and b
}
// Convert Fahrenheit to Celsius:
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);
来源 - JavaScript 函数 - w3schools
数学


最后 - 如何理解数学 - 很棒的资源列表🚀
Lorenzo 为 World In Dev 撰稿 ・ 2021 年 3 月 30 日
特性
E — Euler’s number
LN2 — The natural logarithm of 2
LN10 — Natural logarithm of 10
LOG2E — Base 2 logarithm of E
LOG10E — Base 10 logarithm of E
PI — The number PI
SQRT1_2 — Square root of 1/2
SQRT2 — The square root of 2
日期
文章已不再可用
JavaScript 日期对象允许我们使用日期和时间。我们可以通过创建日期并将其赋值给变量来获取日期信息:
let d = new Date(); // We usually call it d or date
Date 对象提供了很多不同的方法,最常用的是年、月、日、时、分、秒和毫秒。请记住,您必须精确到整年(1950 年,而不仅仅是 50 年),并且始终从 0 开始(例如,12 月是 11 日,一分钟由 59 秒组成……),并且日期采用 24 小时制。
然后您可以从日期中检索许多不同的信息:
d.getDate() Returns the day of the month (from 1-31)
d.getDay() Returns the day of the week (from 0-6)
d.getFullYear() Returns the year
d.getHours() Returns the hour (from 0-23)
d.getMilliseconds() Returns the milliseconds (from 0-999)
d.getMinutes() Returns the minutes (from 0-59)
d.getMonth() Returns the month (from 0-11)
d.getSeconds() Returns the seconds (from 0-59)
我们还可以设置...打开文章继续阅读
活动
老鼠
onclick - 用户单击元素时发生该事件
oncontextmenu - 用户右键单击元素以打开上下文菜单
ondblclick - 用户双击元素
onmousedown - 用户在元素上按下鼠标按钮 onmouseenter - 指针
移动到元素 上
onmouseleave - 指针移出元素 onmousemove - 指针在元素上移动
时 onmouseover
- 指针移动到元素或其子元素 上
onmouseout - 用户将鼠标指针移出元素或其子元素
上 onmouseup - 用户在元素上释放鼠标按钮
键盘
onkeydown - 当用户按下某个键时
onkeypress - 用户开始按下某个键时
onkeyup - 用户释放某个键时
框架
onabort - 媒体加载中止
onbeforeunload - 事件发生在文档即将卸载之前
onerror - 加载外部文件时发生错误 onhashchange
- URL 的锚点部分已更改
onload - 当对象已加载时
onpagehide - 用户离开网页时
onpageshow - 当用户导航到网页时
onresize - 文档视图已调整大小
onscroll - 元素的滚动条正在滚动
onunload - 当页面已卸载时发生事件
形式
onblur - 当元素失去焦点时
onchange - 表单元素的内容发生变化(对于 、 和 )
onfocus - 元素获得焦点
onfocusin - 当元素即将获得焦点时
onfocusout - 元素即将失去焦点
oninput - 用户在元素上输入
oninvalid - 元素无效
onreset - 表单重置
onsearch - 用户在搜索字段中输入内容(对于 )
onselect - 用户选择一些文本(对于 和 )
onsubmit - 表单提交
拖
ondrag - 元素被拖动
ondragend - 用户完成元素拖动
ondragenter - 拖动元素进入放置目标
ondragleave - 拖动元素离开放置目标
ondragover - 拖动元素位于放置目标顶部
ondragstart - 用户开始拖动元素
ondrop - 拖动元素放置在放置目标上
剪贴板
oncopy - 用户复制元素的内容
oncut - 用户剪切元素的内容
onpaste - 用户粘贴元素中的内容
媒体
onabort - 媒体加载中止
oncanplay - 浏览器可以开始播放媒体(例如,文件已缓冲足够内容)
oncanplaythrough - 浏览器可以不停止地播放媒体
ondurationchange - 媒体时长发生变化
onended - 媒体已到达结尾
onerror - 加载外部文件时发生错误
onloadeddata - 媒体数据已加载
onloadedmetadata - 元数据(如尺寸和时长)已加载
onloadstart - 浏览器开始查找指定的媒体
onpause - 媒体由用户暂停或自动
暂停 onplay - 媒体已开始播放或不再暂停
onplaying - 媒体在暂停或停止缓冲后正在播放
onprogress - 浏览器正在下载媒体
onratechange - 媒体的播放速度发生变化
onseeked - 用户已完成移动/跳过媒体中的新位置
onseeking - 用户开始移动/跳过
installed - 浏览器正在尝试加载媒体,但不可用
onsuspend - 浏览器故意不加载媒体
ontimeupdate - 正在播放位置已改变(例如由于快进)
onvolumechange - 媒体音量已改变(包括静音)
onwaiting - 媒体已暂停但预计会恢复(例如缓冲)
animationend - CSS 动画已完成
animationiteration - CSS 动画已重复
animationstart - CSS 动画已开始
其他
transitionend - CSS 转换完成时触发
onmessage - 通过事件源收到消息
onoffline - 浏览器开始离线工作
ononline - 浏览器开始在线工作
onpopstate - 当窗口的历史记录发生变化时
onshow - 元素显示为上下文菜单
onstorage - Web 存储区域更新
ontoggle - 用户打开或关闭元素
onwheel - 鼠标滚轮在元素上上下滚动
ontouchcancel - 屏幕触摸中断
ontouchend - 用户手指从触摸屏上移开 ontouchmove -
手指在屏幕上拖动
ontouchstart - 手指放在触摸屏上
异步 JS 和错误处理
文章已不再可用
SetTimeout 将等待 foo 秒,然后执行操作。SetInterval 将每 foo 秒执行一次相同的操作。
两者都可以是内联的,也可以是多行的,我建议 99% 的情况下使用多行。需要注意的是,它们的计算单位是毫秒。
设置超时:
setTimeout(function(){
alert("Hello World!");
}, 2000); // 2 seconds
setTimeout(function(){ alert("The fifth episode of the series"); }, 3000);
设置间隔:
setInterval(function() {
alert("I want to show you another Javascript trick:");
}, 1000);
setInterval(function() {alert("How to work with SetTimeout and SetInterval");}, 1000);
- 如果您想移除第一个延迟,则必须在函数外部首次添加代码。我建议您将此代码保存在一个单独的函数中,以便随时调用。继续阅读此处
文章已不再可用
首先,需要注意的是,大多数后端操作的结果都是未知的,我们在编写代码时并不知道它是否会成功。因此,我们总是需要编写两段不同的代码,一段用于判断操作是否成功,另一段用于判断操作是否出错。这正是 try/catch 的工作原理:我们提交一段代码进行尝试,如果成功,代码继续执行;如果失败,我们捕获错误(避免应用崩溃)并运行另一段代码。这在 Web 开发中非常常见,例如在使用 Java 的 Android 应用开发中。
尝试/捕获
try {
// Try to run this code
// For example make a request to the server
}
catch(e) {
console.log(e)
// if any error, Code throws the error
// For example display an error message to the user
}
承诺
try/catch 最大的问题是,当你需要嵌套它时(你肯定会嵌套),它会变得非常混乱,难以阅读和编写。因此,JavaScript 通过异步函数支持 Promise:
语法:new Promise (executor)
executor=(accept,reject) =>{}
var asyncronus_function = (number)=>
{
return new Promise( (accept, reject)=>
{
})
}
此函数返回一个 Promise 对象。
如果函数正常结束,则返回 accept(),否则返回 rejection()。
更多详情请见此处。
成为 JavaScript 大师的项目想法


成为 JavaScript 大师的项目创意🚀资源汇编💥+赠品⚡
Lorenzo 为 World In Dev 撰稿 ・ 2021 年 4 月 10 日
a)通用(适合初学者)
- 转换器
- 字数统计器
- 定时器/时钟
- 随机密码生成器
- 计算器
b)游戏
- 猜数字
- 数学时间!
- 其他游戏
c)社交和网站
- 登录、注册
- 筛选
- 待办事项清单
- 社会的
- 文件夹
打开帖子以获取有关每个项目的更多信息!
其他资源:
目录
完整的 JS 备忘单:
令人难以置信的资源 -->通过网站设置
另外两个:
来自 overapi
通过 HTML cheat sheet.com - Interactive
JS 承诺(异步 JS):
文章已不再可用
文章已不再可用
JS 数组:
JS 循环:
JS预处理器:
CoffeeScript:
快速参考 - Autotelicum 撰写 - PDF 版本
EJS:
巴别塔:
基于 JavaScript 的框架和库:
文章 Angular vs Vue vs React at codeinwp.com
最佳 Javascript 框架 - hackr.io 上的文章
角度
Vue
反应
在 GitHub 上:React + Typescript 速查表
JQuery
作者:ascarotero.com - 做得非常好
其他的
Ember.js:
流星:
秘银:
节点
其他资源:
高级主题
- 浏览器的工作原理:现代网络浏览器的幕后
- 学习高级 JavaScript(作者:John Resig)
- HTML Dog 的 JavaScript 高级教程
- WebGL 基础知识
- 学习 JavaScript 设计模式(作者:Addy Osmani)
- JavaScript 计算机科学简介
- JavaScript 的不可变数据结构
库/框架/工具
- React 视频介绍
- React 面试问题
- JavaScript Promises:带有示例的教程
- 可汗学院:使用 jQuery 制作互动网页
- Grunt 初学者指南:JavaScript 构建工具
- Underscore.js 入门
- Code School 的 jQuery 课程
- Thinkster.io 关于 React 和 Angular 的课程
- 2016 年你应该学习的语言和框架
- GitHub 上的 ES6 工具列表
- Redux 入门
服务器端 JavaScript
- Code School 的 Node.js 实时 Web 课程
- NodeSchool课程
- Lynda 上的 Node.js 初探
- Udemy 上有关 NodeJS 课程的所有信息
- Coursera 上的 NodeJS 服务器端开发课程
来源(含链接) - 50 个资源助您开始学习 JavaScript - 作者:Daniel Borowski - Medium
另请阅读:


成为 JavaScript 大师的项目创意🚀资源汇编💥+赠品⚡
Lorenzo 为 World In Dev 撰稿 ・ 2021 年 4 月 10 日


最后 - 如何理解数学 - 很棒的资源列表🚀
Lorenzo 为 World In Dev 撰稿 ・ 2021 年 3 月 30 日


25 门值得你花钱和花时间的 Udemy 课程
Garvit Motwani for World In Dev ・ 2021 年 4 月 22 日
感谢阅读,祝你编码愉快❤
完整备忘单汇编:
文章已不再可用
⚡赠品⚡
我们正在 Udemy 上免费赠送您所需的任何课程。任何价格,任何课程。
参与赠品活动的步骤
--> 回复此帖子
-->订阅我们的新闻通讯<-- 非常重要
-->在 Twitter 上关注我<-- 中奖概率 x2
获奖者将于 5 月 1 日通过 Twitter 公布
订阅我的新闻通讯!
- 本文的PDF版本!!!
- 星期一:每周精选!!!
- 星期三:讨论和开发见解 - 我们围绕开发人员的生活进行辩论 - 示例:咖啡在开发背后的重要性/如果您不是开发人员,那么您将是......
- 礼物多多🎁!我们会发送小抄、编程建议、效率提升技巧等等!
- 那是-->免费的<--而且你帮助了我!
PS:我花了大约 10 个小时才完成这篇文章 - 所以请记得点赞 ❤️和超级点赞🦄 - 让我们这次达到本月的顶峰🚀
文章来源:https://dev.to/worldindev/200-js-resources-to-master-programming-3aj6