JavaScript 备忘单，从初学者到高级......

大家好。我尝试在一篇文章里整理了一些 JavaScript 速查表。希望你喜欢。

JavaScript 基础

JavaScript 基本语法集，用于在 Javascript 中添加、执行和编写基本编程范例

页面脚本

将内部 JavaScript 添加到 HTML

<script type="module"> //JS code goes here </script>

外部 JS 文件

将外部 JavaScript 添加到 HTML

<script src="filename.js"></script>

功能

JavaScript 函数语法

function nameOfFunction () {
// function body 
}

DOM元素

更改 DOM 元素的内容

document.getElementById("elementID").innerHTML = "Hello 
World!";

输出

这将在 JavaScript 控制台中打印 a 的值

console.log(a);

条件语句

条件语句用于根据某些条件执行操作。

If 语句

当指定的条件为真时要执行的代码块。

if (condition) {
// block of code to be executed if the condition is true
}

If-else 语句

如果 if 块的条件为假，则执行 else 块。

if (condition) {
// block of code to be executed if the condition is true
} else {
// block of code to be executed if the condition is false
}

Else-if 语句

基本的 if-else 阶梯

if (condition1) {
// block of code to be executed if condition1 is true
} else if (condition2) {
// block of code to be executed if the condition1 is false and condition2 is true
} else {
// block of code to be executed if the condition1 is false and condition2 is false
}

Switch 语句

JavaScript 中的 Switch Case 语句

switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}

迭代语句（循环）

迭代语句方便程序员重复执行任何代码块，并且可以根据程序员添加的条件进行控制。

For 循环

JavaScript 中的 For 循环语法

for (statement 1; statement 2; statement 3) {
// code block to be executed
}

While 循环

运行代码直到指定条件为真

while (condition) {
// code block to be executed
}

执行 While 循环

无论条件为真还是假，do while 循环都会至少执行一次

do {
// run this code in block
i++;
} while (condition);

字符串

字符串是用于存储和管理文本数据的字符序列。

charAt 方法

返回指定索引处的字符。

str.charAt(3)

concat 方法

将两个或多个字符串连接在一起。

str1.concat(str2)

方法索引

返回字符串中第一次出现指定字符的索引，如果未找到则返回 -1。

str.indexOf('substr')

匹配方法

搜索字符串以查找与正则表达式匹配的内容。

str.match(/(chapter \d+(\.\d)*)/i;)

replace 方法

搜索与指定字符串或字符匹配的字符串，并通过替换指定值返回新字符串。

str1.replace(str2)

搜索方法

根据指定值搜索字符串。

str.search('term')

分割法

将字符串拆分为由子字符串组成的数组。

str.split('\n')

子字符串方法

返回包含指定索引中的字符的字符串的子字符串。

str.substring(0,5)

数组

数组是同一类型的数据项的集合，简单来说，它是一个包含多个值的变量。

多变的

用于存储数据的容器。

var fruit = ["element1", "element2", "element3"];

concat 方法

将两个或多个数组连接在一起。

concat()

indexOf 方法

返回数组中指定项目的索引。

indexOf()

连接方法

将数组元素转换为字符串。

join()

pop 方法

删除数组的最后一个元素。

pop()

逆向方法

此方法反转数组元素的顺序。

reverse()

排序方法

按照指定的方式对数组元素进行排序。

sort()

toString 方法

将数组元素转换为字符串。

toString()

valueOf 方法

返回保存传递的参数值的相关数字对象

valueOf()

数字方法

JS 数学和数字对象提供了几个常量和方法来执行数学运算。

toExponential 方法

将数字转换为其指数形式。

toExponential()

toPrecision 方法

将数字格式化为指定的长度。

toPrecision()

toString 方法

将对象转换为字符串

toString()

valueOf 方法

返回数字的原始值。

valueOf()

数学方法

ceil 方法
将数字向上舍入为最接近的整数，并返回结果

ceil(x)

exp 方法

返回 E^x 的值。

exp(x)

对数方法

返回 x 的对数值。

log(x)

pow 方法

返回 x 的 y 次方值。

pow(x,y)

随机方法

返回 0 至 1 之间的随机数。

random()

平方和法

返回数字 x 的平方根

sqrt(x)

日期

Date 对象用于获取年、月、日。它具有获取和设置日、月、年、时、分、秒的方法。

从日期对象中提取日期，
返回日期对象的日期

getDate()

从日期对象中提取日期，
返回日期对象中的日期

getDay()

从日期对象中提取小时数
返回日期对象的小时数

getHours()

从日期对象中提取分钟数
返回日期对象的分钟数

getMinutes()

从日期对象中提取秒数
返回日期对象的秒数

getSeconds()

从日期对象中提取时间
返回日期对象的时间

getTime()

鼠标事件

对象状态的任何变化都称为事件。借助 JS，你可以处理事件，即当用户执行某些操作时，特定 HTML 标签将如何工作。

点击

当点击元素时触发

element.addEventListener('click', ()=>{
// Code to be executed when the event is fired
});

上下文菜单

右键单击元素时触发

element.addEventListener('contextmenu', ()=>{
// Code to be executed when the event is fired
});

双击

双击元素时触发

element.addEventListener('dblclick', ()=>{
// Code to be executed when the event is fired
});

鼠标进入

当鼠标箭头进入元素时触发

element.addEventListener('mouseenter', ()=>{
// Code to be executed when the event is fired
});

鼠标离开

当鼠标箭头退出元素时触发

element.addEventListener('mouseleave', ()=>{
// Code to be executed when the event is fired
});

鼠标移动

当鼠标移动到元素内部时触发

element.addEventListener('mousemove', ()=>{
// Code to be executed when the event is fired
});

键盘事件

按键

当用户按下键盘上的某个键时触发

element.addEventListener('keydown', ()=>{
// Code to be executed when the event is fired
});

按键

当用户按下键盘上的键时触发

element.addEventListener('keypress', ()=>{
// Code to be executed when the event is fired
});

键升

当用户释放键盘上的某个键时触发

element.addEventListener('keyup', ()=>{
// Code to be executed when the event is fired
});

错误

每当编译器或解释器发现代码中的任何错误时，就会抛出错误，错误可以是任何类型，如语法错误、运行时错误、逻辑错误等。JS 提供了一些函数来处理这些错误。

尝试捕捉

尝试代码块，并在抛出 err 时执行 catch

try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}

窗口方法

窗口对象可用的方法

警报方法

用于在屏幕上提醒某事

alert()

模糊方法

blur() 方法从当前窗口移除焦点。

blur()

设置间隔

以一定的时间间隔执行代码

setInterval(() => {
// Code to be executed
}, 1000);

设置超时

在一定时间间隔后执行代码

setTimeout(() => {
// Code to be executed
}, 1000);

关闭

Window.close() 方法关闭当前窗口

window.close()

确认

window.confirm() 指示浏览器显示带有可选消息的对话框，并等待用户确认或取消

window.confirm('Are you sure?')

打开
打开一个新窗口

window.open("https://www.anmolraj.com");

迅速的

用文本提示用户并获取一个值。第二个参数是默认值

var name = prompt("What is your name?", "Anmol");

滚动方式

window.scrollBy(100, 0); // Scroll 100px to the right

滚动至

将文档滚动到指定坐标。

window.scrollTo(500, 0); // Scroll to horizontal position 500

清除间隔

清除 setInterval。var 是 setInterval 调用返回的值

clearInterval(var)

清除超时

清除 setTimeout。var 是 setTimeout 调用返回的值

clearTimeout(var)

停止

停止进一步的资源加载

stop()

查询/获取元素

每当网页加载时，浏览器都会创建一个 DOM（文档对象模型），借助 HTML DOM，人们可以访问和修改 HTML 文档的所有元素。

querySelector
选择器选择第一个匹配的元素

document.querySelector('css-selectors')

querySelectorAll

用于选择所有匹配元素的选择器

document.querySelectorAll('css-selectors', ...)

通过标签名获取元素

通过标签名称选择元素

document.getElementsByTagName('element-name')

通过类名获取元素

按类名选择元素

document.getElementsByClassName('class-name')

通过 ID 获取元素

通过 id 选择元素

document.getElementById('id')

创建元素

在 DOM 中创建新元素

createElement
创建新元素

document.createElement('div')

createTextNode
创建新的文本节点

document.createTextNode('some text here')

嗨，朋友们，如果你们喜欢，请点赞、分享并关注更多。我尽量把大部分内容都加进去了。如果我漏掉了什么，请在评论区补充。谢谢🙏

文章来源：https://dev.to/anmolraj/javascript-cheatsheet-for-beginners-to-advance-4en4