js 常用方法举例说明50个
JavaScript是一门广泛应用于Web开发的编程语言，它提供了丰富的方法来操作数据、处理事件、操作DOM等。以下是50个常用的JavaScript方法，每个方法都附有简单的说明和示例：
-
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');
这仅仅是JavaScript中许多常用方法的冰山一角。通过深入学习这些方法，你可以更好地理解JavaScript的强大之处，并在实际项目中更高效地应用它们。
)
)
)
)