JavaScript常用方法汇总

前端那点事
3 阅读9分钟

一、数组常用方法

方法语法描述
增加方法
splice()arr.splice(起始下标,长度,添加的元素1,元素2)从数组中添加或删除元素，案例：var arr = [1,2,3]; arr.splice(1,0,4); console.log(arr); // [1,4,2,3]
push()arr.push("元素")向数组末尾添加元素，返回新数组长度，案例：var arr = [1,2]; var len = arr.push(3); console.log(arr, len); // [1,2,3] 3
unshift()arr.unshift("元素1","元素2")向数组开头添加元素，返回新数组长度，案例：var arr = [2,3]; var len = arr.unshift(1); console.log(arr, len); // [1,2,3] 3
fill()arr.fill("填充值",起始下标,结束下标)用固定值填充数组，案例：var arr = [1,2,3]; arr.fill(0,1,2); console.log(arr); // [1,0,3]
删除方法
slice()arr.slice(起始下标,结束下标)选取数组部分元素，返回新数组（不修改原数组），案例：var arr = [1,2,3,4]; var newArr = arr.slice(1,3); console.log(newArr, arr); // [2,3] [1,2,3,4]
splice()arr.splice(起始下标,删除长度)从数组中删除元素（修改原数组），案例：var arr = [1,2,3]; arr.splice(1,1); console.log(arr); // [1,3]
pop()arr.pop()删除数组最后一个元素，返回被删元素，案例：var arr = [1,2,3]; var del = arr.pop(); console.log(arr, del); // [1,2] 3
shift()arr.shift()删除数组第一个元素，返回被删元素，案例：var arr = [1,2,3]; var del = arr.shift(); console.log(arr, del); // [2,3] 1
查询方法
indexOf()arr.indexOf("元素")搜索元素，返回首次出现的下标，无则返回-1，案例：var arr = [1,2,3,2]; var idx = arr.indexOf(2); console.log(idx); // 1
lastIndexOf()arr.lastIndexOf("元素")返回元素最后一次出现的下标，案例：var arr = [1,2,3,2]; var idx = arr.lastIndexOf(2); console.log(idx); // 3
includes()arr.includes("元素")判断数组是否包含指定值，返回布尔值，案例：var arr = [1,2,3]; console.log(arr.includes(2)); // true; console.log(arr.includes(4)); // false
isArray()Array.isArray(变量)判断对象是否为数组，案例：var arr = [1,2]; var obj = {}; console.log(Array.isArray(arr)); // true; console.log(Array.isArray(obj)); // false
every()arr.every(item => 条件)检测所有元素是否符合条件，返回布尔值，案例：var arr = [2,3,4]; console.log(arr.every(item => item > 1)); // true
some()arr.some(item => 条件)检测是否有元素符合条件，返回布尔值，案例：var arr = [2,3,4]; console.log(arr.some(item => item > 3)); // true
修改方法
toString()arr.toString()数组转为字符串，案例：var arr = [1,2,3]; var str = arr.toString(); console.log(str, typeof str); // "1,2,3" string
concat()arr.concat(数组1,数组2)连接多个数组，返回新数组，案例：var arr1 = [1,2]; var arr2 = [3,4]; var newArr = arr1.concat(arr2); console.log(newArr); // [1,2,3,4]
sort()arr.sort((a,b) => a-b)对数组元素排序（默认字符串排序，数字需传比较函数），案例：var arr = [3,1,2]; arr.sort((a,b) => a-b); console.log(arr); // [1,2,3]
join()arr.join("分隔符")数组所有元素放入字符串，用分隔符连接，案例：var arr = [1,2,3]; var str = arr.join("-"); console.log(str); // "1-2-3"
reverse()arr.reverse()反转数组元素顺序，案例：var arr = [1,2,3]; arr.reverse(); console.log(arr); // [3,2,1]
函数方法
find()arr.find(item => 条件)返回第一个符合条件的数组元素，案例：var arr = [{id:1}, {id:2}]; var obj = arr.find(item => item.id === 1); console.log(obj); // {id:1}
findIndex()arr.findIndex(item => 条件)返回第一个符合条件的元素下标，案例：var arr = [{id:1}, {id:2}]; var idx = arr.findIndex(item => item.id === 2); console.log(idx); // 1
forEach()arr.forEach((item,index) => {})遍历数组，无返回值，案例：var arr = [1,2,3]; arr.forEach((item, idx) => console.log(item, idx)); // 1 0 、2 1 、3 2
map()arr.map(item => 处理逻辑)遍历处理元素，返回新数组，案例：var arr = [1,2,3]; var newArr = arr.map(item => item * 2); console.log(newArr); // [2,4,6]
filter()arr.filter(item => 条件)过滤元素，返回符合条件的新数组，案例：var arr = [1,2,3,4]; var newArr = arr.filter(item => item % 2 === 0); console.log(newArr); // [2,4]

二、字符串常用方法

方法语法描述
charAt()str.charAt(下标)返回指定位置的字符，案例：var str = "hello"; console.log(str.charAt(1)); // "e"
concat()str.concat(字符串1,字符串2)连接多个字符串，返回新字符串，案例：var str1 = "he"; var str2 = "llo"; console.log(str1.concat(str2)); // "hello"
indexOf()str.indexOf("子串")返回子串首次出现的下标，案例：var str = "hello"; console.log(str.indexOf("l")); // 2
includes()str.includes("子串")判断是否包含指定子串，案例：var str = "hello"; console.log(str.includes("el")); // true; console.log(str.includes("ab")); // false
lastIndexOf()str.lastIndexOf("子串")从后向前搜索，返回子串最后下标，案例：var str = "hello"; console.log(str.lastIndexOf("l")); // 3
slice()str.slice(起始下标,结束下标)提取字符串片段，返回新字符串，案例：var str = "hello"; console.log(str.slice(1,4)); // "ell"
split()str.split("分隔符")字符串分割为数组，案例：var str = "a,b,c"; console.log(str.split(",")); // ["a","b","c"]
startsWith()str.startsWith("子串")判断是否以指定子串开头，案例：var str = "hello"; console.log(str.startsWith("he")); // true; console.log(str.startsWith("el")); // false
substr()str.substr(起始下标,长度)提取指定长度的字符串，案例：var str = "hello"; console.log(str.substr(1,3)); // "ell"
substring()str.substring(起始下标,结束下标)提取两个下标之间的字符，案例：var str = "hello"; console.log(str.substring(1,4)); // "ell"
search()str.search("子串/正则")检索匹配的子串，返回下标，案例：var str = "hello"; console.log(str.search("l")); // 2
replace()str.replace("旧值","新值")替换字符串中的指定内容，案例：var str = "hello"; console.log(str.replace("l", "x")); // "hexxo"
toUpperCase()str.toUpperCase()字符串转为大写，案例：var str = "hello"; console.log(str.toUpperCase()); // "HELLO"
toLowerCase()str.toLowerCase()字符串转为小写，案例：var str = "HELLO"; console.log(str.toLowerCase()); // "hello"
trim()str.trim()去除字符串两边空白，案例：var str = " hello "; console.log(str.trim()); // "hello"
fromCharCode()String.fromCharCode(Unicode编码)Unicode编码转为字符，案例：console.log(String.fromCharCode(97)); // "a"
charCodeAt()str.charCodeAt(下标)返回指定位置字符的Unicode编码，案例：var str = "hello"; console.log(str.charCodeAt(0)); // 104

三、Math对象及其方法

方法语法描述
Math.PIMath.PI返回圆周率，案例：console.log(Math.PI); // 3.141592653589793
Math.abs()Math.abs(数值)返回绝对值，案例：console.log(Math.abs(-5)); // 5; console.log(Math.abs(3)); // 3
Math.ceil()Math.ceil(数值)向上取整，案例：console.log(Math.ceil(3.1)); // 4; console.log(Math.ceil(3.9)); // 4
Math.floor()Math.floor(数值)向下取整，案例：console.log(Math.floor(3.9)); // 3; console.log(Math.floor(3.1)); // 3
Math.max()Math.max(数值1,数值2,...)返回一组数中的最大值，案例：console.log(Math.max(1,3,2)); // 3
Math.min()Math.min(数值1,数值2,...)返回一组数中的最小值，案例：console.log(Math.min(1,3,2)); // 1
Math.pow()Math.pow(x,y)返回x的y次幂，案例：console.log(Math.pow(2,3)); // 8; console.log(Math.pow(3,2)); // 9
Math.random()Math.random()返回0~1之间的随机数，案例：console.log(Math.random()); // 随机输出0≤x<1的数，如0.456
Math.round()Math.round(数值)四舍五入取整，案例：console.log(Math.round(3.5)); // 4; console.log(Math.round(3.4)); // 3
Math.sqrt()Math.sqrt(数值)返回平方根，案例：console.log(Math.sqrt(9)); // 3; console.log(Math.sqrt(16)); // 4

四、Date对象及其方法

方法语法描述
new Date()new Date()获取当前日期和时间，案例：var date = new Date(); console.log(date); // 输出当前本地时间，如2026-04-10T08:00:00.000Z
new Date(时间戳)new Date(毫秒数)通过时间戳创建日期对象，案例：var date = new Date(1712736000000); console.log(date); // 输出对应时间戳的日期
new Date(日期字符串)new Date("2025-01-01")通过字符串创建日期对象，案例：var date = new Date("2026-04-10"); console.log(date); // 输出2026年4月10日的日期对象
getTime()日期对象.getTime()返回时间戳（1970年至今毫秒数），案例：var date = new Date(); console.log(date.getTime()); // 输出当前时间戳，如1712736000000
getFullYear()日期对象.getFullYear()返回四位年份，案例：var date = new Date(); console.log(date.getFullYear()); // 2026
getMonth()日期对象.getMonth()返回月份（0~11），案例：var date = new Date(); console.log(date.getMonth() + 1); // 4（表示4月）
getDate()日期对象.getDate()返回日期（1~31），案例：var date = new Date(); console.log(date.getDate()); // 10
getDay()日期对象.getDay()返回星期（0~6），案例：var date = new Date(); console.log(date.getDay()); // 5（表示星期五）
getHours()日期对象.getHours()返回小时（0~23），案例：var date = new Date(); console.log(date.getHours()); // 14（表示14点）
getMinutes()日期对象.getMinutes()返回分钟，案例：var date = new Date(); console.log(date.getMinutes()); // 30（表示30分）

五、获取DOM的方式

方法描述
document.getElementById()通过id获取单个DOM元素，案例：
var box = document.getElementById("box"); console.log(box);
document.querySelector()通过CSS选择器获取第一个匹配元素，案例：
var box = document.querySelector(".box"); console.log(box);
document.querySelectorAll()通过CSS选择器获取所有匹配元素，案例：
var boxes = document.querySelectorAll(".box"); console.log(boxes);
document.getElementsByTagName()通过标签名获取元素集合，案例：

测试

测试2

var ps = document.getElementsByTagName("p"); console.log(ps);
document.getElementsByClassName()通过类名获取元素集合，案例：
var boxes = document.getElementsByClassName("box"); console.log(boxes);
document.getElementsByName()通过name属性获取元素集合，案例： var inputs = document.getElementsByName("user"); console.log(inputs);

六、设置/获取HTML内容

方法描述
innerHTML设置/获取元素内的HTML内容，案例：
var box = document.getElementById("box"); box.innerHTML = "

测试

"; console.log(box.innerHTML);
innerText设置/获取元素内的文本内容，案例：
原始文本
var box = document.getElementById("box"); console.log(box.innerText); box.innerText = "新文本";
outerHTML设置/获取元素及其HTML内容，案例：
文本
var box = document.getElementById("box"); console.log(box.outerHTML); //
文本
outerText设置/获取元素文本（不含标签），案例：

文本

var box = document.getElementById("box"); console.log(box.outerText); // 文本
value获取/设置表单元素（input/select）值，案例： var input = document.getElementById("input"); console.log(input.value); input.value = "新值";

七、设置/获取HTML属性

方法描述
obj.hasAttribute()判断元素是否有指定属性，案例：
var box = document.getElementById("box"); console.log(box.hasAttribute("class")); // true
obj.hasAttributes()判断元素是否有任意属性，案例：
var box = document.getElementById("box"); console.log(box.hasAttributes()); // true（有id属性）
obj.setAttribute()设置元素属性，案例：
var box = document.getElementById("box"); box.setAttribute("class", "test");
obj.getAttribute()获取元素属性值，案例：
var box = document.getElementById("box"); console.log(box.getAttribute("class")); // "test"
obj.removeAttribute()删除元素属性，案例：
var box = document.getElementById("box"); box.removeAttribute("class");

八、设置/获取HTML样式

方法描述
元素.style.样式名设置/获取行内样式，案例：
var box = document.getElementById("box"); box.style.color = "red"; console.log(box.style.color); // "red"
元素.style["样式名"]设置/获取带连字符的样式（如font-size），案例：
var box = document.getElementById("box"); box.style["font-size"] = "16px";

九、className与classList操作

方法描述
元素.className获取/设置元素类名，案例：
var box = document.getElementById("box"); box.className = "test"; console.log(box.className); // "test"
元素.classList.add()添加类名，案例：
var box = document.getElementById("box"); box.classList.add("active");
元素.classList.contains()判断是否包含指定类名，案例：
var box = document.getElementById("box"); console.log(box.classList.contains("test")); // true
元素.classList.item()返回指定索引的类名，案例：
var box = document.getElementById("box"); console.log(box.classList.item(0)); // "test"
元素.classList.remove()移除类名，案例：
var box = document.getElementById("box"); box.classList.remove("active");
元素.classList.toggle()切换类名，案例：
var box = document.getElementById("box"); box.classList.toggle("active"); // 添加active

十、标签节点操作方法

方法描述
document.createElement()创建元素节点，案例：var div = document.createElement("div"); div.innerText = "新元素"; document.body.appendChild(div);
document.createTextNode()创建文本节点，案例：var text = document.createTextNode("文本内容"); var div = document.createElement("div"); div.appendChild(text);
元素.appendChild()末尾添加子节点，案例：var div = document.createElement("div"); var p = document.createElement("p"); div.appendChild(p);
父节点.insertBefore()指定子节点前插入新节点，案例：var div = document.createElement("div"); var p1 = document.createElement("p"); var p2 = document.createElement("p"); div.appendChild(p1); div.insertBefore(p2, p1);
元素.replaceChild()替换子节点，案例：var div = document.createElement("div"); var p1 = document.createElement("p"); var p2 = document.createElement("p"); div.appendChild(p1); div.replaceChild(p2, p1);
元素.removeChild()删除子节点，案例：var div = document.createElement("div"); var p = document.createElement("p"); div.appendChild(p); div.removeChild(p);
元素.remove()移除自身节点，案例：var div = document.createElement("div"); div.innerText = "测试元素"; document.body.appendChild(div); div.remove(); // 移除当前div元素

十一、鼠标事件

事件描述
onclick单击触发
ondblclick双击触发
onmousedown鼠标按下触发
onmouseup鼠标松开触发
onmouseenter鼠标移入元素触发
onmouseleave鼠标移出元素触发
onmousemove鼠标移动触发
onmouseover鼠标悬停触发
onmouseout鼠标移出触发
oncontextmenu右键菜单触发

十二、键盘事件

事件描述
onkeydown键盘按键按下
onkeypress键盘按键按下并松开
onkeyup键盘按键松开

十三、表单事件

事件描述
onblur元素失去焦点
onchange元素内容改变
onfocus元素获取焦点
oninput元素接收输入
onreset表单重置
onselect选中文本触发
onsubmit表单提交

十四、Cookie操作

  1. 创建Cookie：document.cookie="键=值; expires=过期时间; path=路径"
  2. 读取Cookie：var x = document.cookie
  3. 修改Cookie：重新赋值覆盖原有Cookie
  4. 删除Cookie：设置过期时间为过去时间

十五、本地存储

// 判断本地存储是否有数据
if(localStorage.自定义键名){
  var 变量 = JSON.parse(localStorage.自定义键名);
}else{
  var 变量 = [];
  localStorage.自定义键名 = JSON.stringify([]);
}
// 数据改动后保存
localStorage.自定义键名 = JSON.stringify(变量);

十六、其他常用知识点

  1. 转为false的数据：空字符串""、0、undefined、null、false、NaN
  2. 三目运算符：条件 ? 成立执行 : 不成立执行
avatar
文章
阅读
粉丝