终极 Javascript 速查表

JavaScript 基础

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

页面脚本

将内部 JavaScript 添加到 HTML

<script type="text/javascript"> //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 (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
}

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
}

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

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

字符串

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

charAt 方法
返回指定索引处的字符。

str.charAt(3)

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

str1.concat(str2)

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

str.indexOf('substr')

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

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

replace 方法
在字符串中搜索与指定字符串或字符匹配的内容，并通过替换指定值返回新字符串。

str1.replace(str2)

搜索方法
根据指定值搜索字符串。

str.search('term')

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

str.split('\n')

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

str.substring(0,5)

数组

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

变量
用于存储数据的容器。

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

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

concat()

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

indexOf()

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

join()

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

pop()

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

reverse()

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

sort()

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

toString()

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

valueOf()

数字方法

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

toExponential 方法
将数字转换为其指数形式。

toExponential()

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

toPrecision()

toString 方法
将对象转换为字符串

toString()

valueOf 方法
返回数字的原始值。

valueOf()

数学方法

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

ceil(x)

exp 方法
返回 E^x 的值。

exp(x)

log 方法
返回 x 的对数值。

log(x)

pow 方法
返回 x 的 y 次方值。

pow(x,y)

random 方法
返回 0 到 1 之间的随机数。

random()

sqrt 方法
返回数字 x 的平方根

sqrt(x)

日期

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

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

getDate()

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

getDay()

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

getHours()

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

getMinutes()

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

getSeconds()

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

getTime()

鼠标事件

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

click
当元素被点击时触发

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

oncontextmenu
当元素被右键单击时触发

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

dblclick
双击元素时触发

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

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

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

mouseleave
当鼠标箭头离开元素时触发

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

mousemove
当鼠标在元素内移动时触发

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

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

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

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

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

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

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

错误

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

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

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

窗口方法
窗口对象可用的方法

alert 方法
用于在屏幕上发出警报

alert()

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

blur()

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

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

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

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

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

window.close()

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

window.confirm('Are you sure?')

打开
打开一个新窗口

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

prompt
用文本提示用户并接受一个值。第二个参数是默认值

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

滚动方式

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

scrollTo
将文档滚动到指定的坐标。

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

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

clearInterval(var)

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

clearTimeout(var)

stop
停止进一步的资源加载

stop()

查询/获取元素

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

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

document.querySelector('css-selectors')

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

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

getElementsByTagName
根据标签名称选择元素

document.getElementsByTagName('element-name')

getElementsByClassName
根据类名选择元素

document.getElementsByClassName('class-name')

通过 ID 获取元素
通过 ID 选择元素

document.getElementById('id')

创建元素
在 DOM 中创建新元素

createElement

创建新元素

document.createElement('div')

createTextNode
创建新的文本节点

document.createTextNode('some text here')

点击此处下载此备忘单

文章来源：https://dev.to/abhirajb/the-ultimate-javascript-cheatsheet-55j2