js中常用方法有哪些方法

JavaScript 中有许多常用的方法，这些方法可以帮助开发者进行数据处理、DOM 操作、事件处理等。以下是一些常见的 JavaScript 方法及其用途：

1. 字符串方法

charAt(index): 返回指定位置的字符。
concat(string2, string3, ..., stringX): 连接两个或多个字符串。
includes(searchvalue, start): 检查字符串是否包含指定的子字符串。
indexOf(searchvalue, start): 返回某个指定的字符串值在字符串中首次出现的位置。
lastIndexOf(searchvalue, start): 返回某个指定的字符串值在字符串中最后出现的位置。
replace(searchvalue, newvalue): 替换字符串中的某些字符。
slice(start, end): 提取字符串的一部分，并在新的字符串中返回被提取的部分。
split(separator, limit): 把字符串分割为字符串数组。
substring(indexStart, indexEnd): 提取字符串中两个指定的索引号之间的字符。
toLowerCase() 和 toUpperCase(): 分别将字符串转换为小写和大写。

2. 数组方法

push(element1, ..., elementN): 向数组末尾添加一个或多个元素。
pop(): 删除数组的最后一个元素并返回它。
shift(): 删除数组的第一个元素并返回它。
unshift(element1, ..., elementN): 向数组开头添加一个或多个元素。
slice(start, end): 返回一个新的数组对象，这个对象包含了从 start 到 end（不包括 end）的 arrayObject 中的元素。
splice(start, deleteCount, item1, ..., itemX): 通过删除或替换现有元素或者添加新元素来修改数组。
reverse(): 颠倒数组中元素的顺序。
sort(compareFunction): 对数组的元素进行排序。
filter(callback(element[, index[, array]])[, thisArg]): 创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
map(callback(element[, index[, array]])[, thisArg]): 创建一个新数组, 其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue]): 对数组中的每个元素执行一个由您提供的 reducer 函数（升序执行），将其结果汇总为单个返回值。

3. 对象方法

Object.assign(target, ...sources): 将所有可枚举属性的值从一个或多个源对象复制到目标对象。
Object.keys(obj): 返回一个包含所有给定对象自身可枚举属性名称的数组。
Object.values(obj): 返回一个包含所有给定对象自身可枚举属性值的数组。
Object.entries(obj): 返回一个给定对象自身可枚举属性的键值对数组。

4. 函数方法

call(thisArg, arg1, arg2, ...): 调用一个具有给定 this 值和参数的函数。
apply(thisArg, [argsArray]): 调用一个具有给定 this 值和参数数组的函数。
bind(thisArg, arg1, arg2, ...): 创建一个新的函数，当被调用时，将其 this 关键字设置为提供的值。

5. DOM 操作方法

document.getElementById(id): 返回具有指定 ID 的元素。
document.getElementsByTagName(name): 返回具有指定标签名的所有元素的 NodeList。
document.getElementsByClassName(name): 返回具有指定类名的所有元素的 NodeList。
document.querySelector(selector): 返回文档中匹配指定 CSS 选择器的第一个元素。
document.querySelectorAll(selector): 返回文档中匹配指定 CSS 选择器的所有元素的 NodeList。

6. 事件处理方法

addEventListener(event, function, useCapture): 给指定元素添加事件监听器。
removeEventListener(event, function, useCapture): 移除由 addEventListener 添加的事件监听器。

示例代码

// 字符串方法示例
let str = "Hello, World!";
console.log(str.charAt(7)); // 输出: W

// 数组方法示例
let arr = [1, 2, 3, 4, 5];
arr.push(6); // arr 现在是 [1, 2, 3, 4, 5, 6]
console.log(arr.pop()); // 输出: 6

// 对象方法示例
let obj = { a: 1, b: 2, c: 3 };
console.log(Object.keys(obj)); // 输出: ["a", "b", "c"]

// 函数方法示例
function greet(greeting, punctuation) {
    return greeting + ', ' + this.name + punctuation;
}
let person = { name: 'Alice' };
console.log(greet.call(person, 'Hello', '!')); // 输出: Hello, Alice!

// DOM 操作方法示例
let element = document.getElementById('myElement');
element.style.color = 'red';

// 事件处理方法示例
document.getElementById('myButton').addEventListener('click', function() {
    alert('Button was clicked!');
});

这些方法和函数构成了 JavaScript 开发的基础，掌握它们对于进行有效的前端开发至关重要。