js 常用方法举例说明50个
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的强大之处,并在实际项目中更高效地应用它们。
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!