JavaScript | 常用方法索引对照表

摘录一些基础的常用的方法（且不限于方法，如属性、常量），在全面与精简中尽量作平衡。

表格内每一项时常以内在意义进行排序而非字母顺序排序，请善用 目录 与 Ctrl+F?

 

目录

数据类型

Number

String

其他

常用库

Math

对象

Objects

Array

Map

Set

HTML DOM

查找 HTML 元素

改变 HTML 元素

增删 HTML 元素

节点导航

对象、集合和属性

事件种类

nodeType

---

注：本文符号对应关系：

符号	对应
斜体	需要替换为对应内容的标记
[args]	可选参数

 

---

 

数据类型

Number

详细解释：JavaScript Number 对象 | 菜鸟教程

舍入

方法	描述（返回值）
num.toFixed([len])	指定位小数位数的数字字符串
num.toPrecision([len])	指定长度的数字字符串
num.toExponential([len])	已被四舍五入并使用指数计数法的数字字符串

 

常量属性

属性	描述
Number.MAX_VALUE	返回 JavaScript 中可能的最大数
Number.MIN_VALUE	返回 JavaScript 中可能的最小数
Number.NEGATIVE_INFINITY	表示负的无穷大（溢出返回）
Number.NaN	表示非数字值（"Not a Number"）
Number.POSITIVE_INFINITY	表示无穷大（溢出返回）

 

其他函数

方法	描述
num.isFinite()	是否是有限数
num.isNaN()	是否为 NaN

 

String

详细解释：JavaScript String 对象 | 菜鸟教程

查找子串

方法	描述
str.indexOf(substr [, pos])	顺序查找子串并返回位置
str.lastIndexOf(subStr [, pos])	从末尾开始查找子串并返回位置
str.includes(substr [, pos])	是否包含子串并返回boolean值
str.startsWith(str2)	是否按某字符串开始
str.endsWith(str2)	是否按某字符串结束

 

获取子串

方法	描述
str.slice(start [, end])	支持负值
str.substring(start [, end])	不支持负值，支持start大于end
str.substr(start [, length])`	指定字符串长度而非结束位置

推荐使用slice方法。

 

转义字符

字符	描述
\n	换行
\r	回车：不单独使用
	Windows文本文件使用 \r\n 组合表示换行符
\', \"	引号
\\	反斜线
\t	制表符
\xXX	十六进制的 unicode XX
\uXXXX	UTF-16 编码的十六进制 unicode 符号
\u{X…XXXXXX}（1到6个字符）	UTF-32 编码的十六进制 unicode 符号

 

其他

方法	描述
str.charAt(pos)	获得字符串特定位置字符（也可以使用方括号直接获得）
str.toLowerCase()	转换为小写
str.toUpperCase()	转换为大写
str.localeCompare(str2)	根据语言比较字符串而非字符代码大小
str.trim()	删除字符串前后的空格
str.repeat(n)	重复字符串 n 次

 

常用库

Math

舍入

方法	描述
Math.floor()	向下舍入
Math.ceil()	向上舍入
Math.round()	四舍五入
Math.trunc()	只取整数部分（IE不支持）

这些函数都是取整，如需要保留n位小数，则使用：

• toFixed(precision) 方法
• 先乘10n，舍完再除10n

 

其他

方法	描述
Math.random()	获得随机数
Math.max(a, b, c...)	返回参数中的最大值
Math.min(a, b, c...)	返回参数中的最小值

 

对象

Objects

// TODO

 

Array

详细解释：JavaScript Array 对象 | 菜鸟教程

添加/删除元素

方法	描述
push(...items)	从结尾添加元素
pop()	从结尾提取元素
shift()	从开头提取元素
unshift(...items)	从开头添加元素
splice(pos, deleteCount [, ...items])	从 pos 开始删除 deleteCount 个元素并在当前位置插入元素
slice(start [, end])	从 start 到 end（不包括end）的元素返回一个新的数组
concat(...items)	返回当前数组所有成员并添加 items（如为数组则提取其中元素）的新数组

注意： splice 方法会修改数组本身。

 

查询元素

方法	描述
indexOf(item [, pos])	从 pos 开始找到 item 则返回索引，否则返回 -1
lastIndexOf(item [, pos])	从 结尾找到 pos，如找到 item 则返回索引，否则返回 -1
includes(value)	数组有 value 则返回 true，否则返回 false
find(func)	通过函数过滤元素：返回符合 func 条件的第一个值
filter(func)	通过函数过滤元素：返回符合 func 条件的全部值

findIndex 和 find 类似，但返回索引而不是值。

 

数组转换

方法	描述
map(func)	从每个元素调用 func 的结果创建一个新数组
sort(func)	将数组按func条件判断并排序，然后返回。例：arr.sort((a, b) => a-b)
reverse()	在原地颠倒数组，然后返回它
split(delim)	将字符串按 delim 分隔符拆分为数组并返回
join(delim)	将数组按 delim 分隔符黏合为字符串并返回

注意： sort 方法、reverse 方法会修改数组本身。

 

迭代元素

方法	描述
forEach(func)	为每个元素调用 func，不返回任何东西

 

其他

方法	描述
Array.isArray(arr)	检查 arr 是否是一个数组
Array.from(object [, mapFunction, thisValue])	通过给定的对象中创建一个数组

 

方法	描述
arr.some(func)	对数组每个元素调用函数 func，若存在有结果为 true，则返回 true，否则返回 false
arr.every(func)	对数组每个元素调用函数 func，若所有的结果为 true，则返回 true，否则返回 false
arr.fill(value [, start, end])	用 value 重复填充数组
reduce(func(total, currVal [, currIdx, arr]) [, initVal])	将数组元素计算为一个值（例如数组所有元素累加）
arr.copyWithin(target [, start, end])	从数组的指定位置拷贝元素到数组的另一个指定位置中（覆盖现有）

 

Map

方法 / 属性	描述
new Map()	创建 map
map.set(key, value)	根据键（key）存储值（value）。支持链式调用
map.get(key)	根据键返回值。若该键不存在，返回 undefined
map.has(key)	若键存在，返回 true，否则返回 false
map.delete(key)	移除该键的值
map.clear()	清空 map
map.size	返回当前元素个数

 

Set

方法 / 属性	描述
new Set(iterable)	创建 set，可以利用可迭代对象（如数组）来创建
set.add(value)	添加值，返回 set 自身
set.delete(value)	删除值，若该 value 存在则返回 true ，否则返回 false
set.has(value)	如果 set 中存在该值则返回 true ，否则返回 false
set.clear()	清空 set
set.size	返回当前元素个数

 

HTML DOM

查找 HTML 元素

方法	描述
document.getElementById(id)	通过 id 来查找 HTML 元素
document.getElementsByTagName(name)	通过标签名来查找 HTML 元素
document.getElementsByClassName(name)	通过类名来查找 HTML 元素
document.querySelectorAll(name-with-selector)	通过 CSS 选择器查找 HTML 元素

注意getElement与getElements的区别

 

改变 HTML 元素

方法	描述
element.innerHTML = new-html-content	改变元素的 innerHTML
element.attribute = new-value	改变元素的属性值
element.setAttribute(attribute, value)	改变元素的属性值
element.style.property = new style	改变元素的 CSS 样式

 

增删 HTML 元素

方法	描述
document.createElement(element)	创建 HTML 元素
elem.removeChild(child)	删除 HTML 元素
elem.appendChild(child)	添加 HTML 元素
elem.insertBefore(element)	插入 HTML 元素
elem.replaceChild(newchild, oldchild)	替换 HTML 元素
document.write(text)	写入 HTML 输出流

 

节点导航

节点属性	描述
parentNode	父节点
childNodes[nodeNumber]	第 nodeNumber 位子节点
firstChild	首个子节点
lastChild	最后一个子节点
nextSibling	同一层级的后一个节点
previousSibling	同一层级的前一个节点

 

对象、集合和属性

分为 HTML DOM Level 1 和 HTML DOM Level 3。

属性	描述（返回值）	DOM
document.documentElement	<html> 元素	3
document.head	<head> 元素	3
document.title	<title> 元素	1
document.body	<body> 元素	1
document.scripts	所有 <script> 元素	3
document.images	所有 <img> 元素	1
document.forms	所有 <form> 元素	1
document.embeds	所有 <embed> 元素	3
document.anchors	拥有 name 属性的所有 <a> 元素。	1
document.links	拥有 href 属性的所有 <area> 和 <a> 元素	1
document.cookie	文档 cookie	1
document.doctype	文档 doctype	3
document.documentMode	浏览器使用的模式	3
document.readyState	文档加载状态	3
document.inputEncoding	文档编码（字符集）	3
document.URL	文档完整 URL	1
document.documentURI	文档 URI	3
document.baseURI	文档绝对基准 URI	3
document.referrer	引用的 URI（链接文档）	1
document.domain	文档服务器的域名	1
document.lastModified	文档更新的日期和时间	3
document.implementation	DOM 实现	3
document.strictErrorChecking	是否强制执行错误检查	3

 

不常用：

属性	描述	DOM
document.applets	返回所有 <applet> 元素（HTML5 不建议使用）	1
document.domConfig	废弃。返回 DOM 配置	3

 

事件种类

事件名	描述
onload / onunload	进入/离开 页面时
onchange	内容 被改变 时
onmouseover / onmouseout	移入/移出 某个元素的上方时
onmousedown / onmouseup	鼠标按钮 按下/抬起时
onclick	鼠标按钮点击后（按下与抬起动作都在元素上方完成）

 

nodeType

节点	类型	例子
ELEMENT_NODE	1	<h1>W3School</h1>
ATTRIBUTE_NODE	2	class = "heading" （HTML DOM 弃用，仅 XML DOM）
TEXT_NODE	3	W3School
COMMENT_NODE	8	<!-- 这是注释 -->
DOCUMENT_NODE	9	HTML 文档本身（<html> 的父节点）
DOCUMENT_TYPE_NODE	10	<!Doctype html>

 

---

 

更多笔记请访问我的笔记导航?