Blog Details

js 常用方法举例说明50个

getElementById: 通过元素的ID获取DOM元素。

var element = document.getElementById('myElement');

querySelector: 通过CSS选择器选择DOM元素。

var element = document.querySelector('.myClass');

addEventListener: 向元素添加事件监听器。

document.getElementById('myButton').addEventListener('click', function() {

// 处理点击事件

});

appendChild: 将元素追加到父元素中。

var parent = document.getElementById('parent');

var child = document.createElement('div');

parent.appendChild(child);

innerHTML: 获取或设置元素的HTML内容。js**textContent:** 获取或设置元素的文本内容。

var text = document.getElementById('myElement').textContent;

setAttribute: 设置元素的属性。

document.getElementById('myImage').setAttribute('src', 'newimage.jpg');

classList: 操作元素的类。

var element = document.getElementById('myElement');

element.classList.add('newClass');

setTimeout: 在一定时间后执行函数。

setTimeout(function() {

// 执行某个操作

}, 1000);

setInterval: 每隔一定时间重复执行函数。

setInterval(function() {

// 执行某个操作

}, 2000);

Array.isArray: 检查是否为数组。

var isArray = Array.isArray(myArray);

Array.prototype.map: 对数组的每个元素执行函数,并返回新数组。

var doubledArray = myArray.map(function(item) {

return item * 2;

});

Array.prototype.filter: 过滤数组元素。

var filteredArray = myArray.filter(function(item) {

return item > 5;

});

Array.prototype.reduce: 对数组元素进行累加或累减操作。

var sum = myArray.reduce(function(acc, item) {

return acc + item;

}, 0);

String.prototype.length: 获取字符串的长度。

var length = myString.length;

String.prototype.indexOf: 查找字符串中子串的位置。

var index = myString.indexOf('search');

String.prototype.toUpperCase: 将字符串转换为大写。

var upperCaseString = myString.toUpperCase();

String.prototype.trim: 去除字符串两端的空格。

var trimmedString = myString.trim();

Math.random: 生成一个0到1之间的随机数。

var randomNum = Math.random();

Math.floor: 向下取整。

var roundedDown = Math.floor(5.9);

Math.ceil: 向上取整。

var roundedUp = Math.ceil(5.1);

JSON.parse: 解析JSON字符串。

var parsedObject = JSON.parse('{"key": "value"}');

JSON.stringify: 将对象转换为JSON字符串。

var jsonString = JSON.stringify({ key: 'value' });

Promise: 处理异步操作。

var myPromise = new Promise(function(resolve, reject) {

// 异步操作完成后调用resolve或reject

});

myPromise.then(function(result) {

// 处理成功的情况

}).catch(function(error) {

// 处理失败的情况

});

fetch: 发送网络请求。

fetch('https://api.example.com/data')

.then(response => response.json())

.then(data => console.log(data))

.catch(error => console.error('Error:', error));

async/await: 简化异步代码的书写。

async function fetchData() {

try {

var response = await fetch('https://api.example.com/data');

var data = await response.json();

console.log(data);

} catch (error) {

console.error('Error:', error);

}

}

fetchData();

Object.keys: 获取对象的所有键。

var keys = Object.keys(myObject);

Object.values: 获取对象的所有值。

var values = Object.values(myObject);

Object.assign: 合并对象。

var mergedObject = Object.assign({}, obj1, obj2);

Date: 处理日期和时间。

var currentDate = new Date();

Map: 创建键值对集合。

var myMap = new Map();

myMap.set('key', 'value');

Set: 创建唯一值的集合。

var mySet = new Set();

mySet.add('value1');

mySet.add('value2');

localStorage: 本地存储。

localStorage.setItem('key', 'value');

var storedValue = localStorage.getItem('key');

sessionStorage: 会话存储。

sessionStorage.setItem('key', 'value');

var storedValue = sessionStorage.getItem('key');

window.location: 获取或设置当前页面的URL。

var currentURL = window.location.href;

confirm: 显示带有确定和取消按钮的对话框。

if (confirm('Are you sure?')) {

// 用户点击了确定按钮

} else {

// 用户点击了取消按钮

}

setTimeout和clearTimeout: 延迟执行或取消延迟执行。

var timeoutId = setTimeout(function() {

// 执行某个操作

}, 1000);

// 取消延迟执行

clearTimeout(timeoutId);

setInterval和clearInterval: 定时执行或取消定时执行。

var intervalId = setInterval(function() {

// 执行某个操作

}, 2000);

// 取消定时执行

clearInterval(intervalId);

RegExp: 正则表达式。

var pattern = /pattern/;

var isMatch = pattern.test('test string');

String.prototype.split: 将字符串分割为数组。

var array = myString.split(' ');

String.prototype.replace: 替换字符串中的文本。

var newString = myString.replace('old', 'new');

String.prototype.substring: 提取字符串的子串。

var subString = myString.substring(0, 5);

String.prototype.slice: 切片字符串。

var slicedString = myString.slice(0, 5);

Array.prototype.concat: 连接数组。

var newArray = array1.concat(array2);

Array.prototype.reverse: 反转数组。

var reversedArray = myArray.reverse();

Array.prototype.join: 将数组元素连接为字符串。

var joinedString = myArray.join(', ');

Array.prototype.indexOf: 查找数组元素的位置。

var index = myArray.indexOf('search');

Array.prototype.includes: 判断数组是否包含某个元素。

var isIncludes = myArray.includes('element');

Array.prototype.sort: 对数组进行排序。

var sortedArray = myArray.sort();

Array.prototype.splice: 修改数组内容。

myArray.splice(1, 2, 'newElement1', 'newElement2');