js 常用方法举例说明50个

2023-12-31 23:27:06

js 常用方法举例说明50个

JavaScript是一门广泛应用于Web开发的编程语言,它提供了丰富的方法来操作数据、处理事件、操作DOM等。以下是50个常用的JavaScript方法,每个方法都附有简单的说明和示例:

  1. getElementById 通过元素的ID获取DOM元素。

    var element = document.getElementById('myElement');
    
  2. querySelector 通过CSS选择器选择DOM元素。

    var element = document.querySelector('.myClass');
    
  3. addEventListener 向元素添加事件监听器。

    document.getElementById('myButton').addEventListener('click', function() {
        // 处理点击事件
    });
    
  4. appendChild 将元素追加到父元素中。

    var parent = document.getElementById('parent');
    var child = document.createElement('div');
    parent.appendChild(child);
    
  5. innerHTML 获取或设置元素的HTML内容。js**textContent:** 获取或设置元素的文本内容。

    var text = document.getElementById('myElement').textContent;
    
  6. setAttribute 设置元素的属性。

    document.getElementById('myImage').setAttribute('src', 'newimage.jpg');
    
  7. classList 操作元素的类。

    var element = document.getElementById('myElement');
    element.classList.add('newClass');
    
  8. setTimeout 在一定时间后执行函数。

    setTimeout(function() {
        // 执行某个操作
    }, 1000);
    
  9. setInterval 每隔一定时间重复执行函数。

    setInterval(function() {
        // 执行某个操作
    }, 2000);
    
  10. Array.isArray 检查是否为数组。

    var isArray = Array.isArray(myArray);
    
  11. Array.prototype.map 对数组的每个元素执行函数,并返回新数组。

    var doubledArray = myArray.map(function(item) {
        return item * 2;
    });
    
  12. Array.prototype.filter 过滤数组元素。

    var filteredArray = myArray.filter(function(item) {
        return item > 5;
    });
    
  13. Array.prototype.reduce 对数组元素进行累加或累减操作。

    var sum = myArray.reduce(function(acc, item) {
        return acc + item;
    }, 0);
    
  14. String.prototype.length 获取字符串的长度。

    var length = myString.length;
    
  15. String.prototype.indexOf 查找字符串中子串的位置。

    var index = myString.indexOf('search');
    
  16. String.prototype.toUpperCase 将字符串转换为大写。

    var upperCaseString = myString.toUpperCase();
    
  17. String.prototype.trim 去除字符串两端的空格。

    var trimmedString = myString.trim();
    
  18. Math.random 生成一个0到1之间的随机数。

    var randomNum = Math.random();
    
  19. Math.floor 向下取整。

    var roundedDown = Math.floor(5.9);
    
  20. Math.ceil 向上取整。

    var roundedUp = Math.ceil(5.1);
    
  21. JSON.parse 解析JSON字符串。

    var parsedObject = JSON.parse('{"key": "value"}');
    
  22. JSON.stringify 将对象转换为JSON字符串。

    var jsonString = JSON.stringify({ key: 'value' });
    
  23. Promise 处理异步操作。

    var myPromise = new Promise(function(resolve, reject) {
        // 异步操作完成后调用resolve或reject
    });
    
    myPromise.then(function(result) {
        // 处理成功的情况
    }).catch(function(error) {
        // 处理失败的情况
    });
    
  24. fetch 发送网络请求。

    fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.error('Error:', error));
    
  25. 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();
    
  26. Object.keys 获取对象的所有键。

    var keys = Object.keys(myObject);
    
  27. Object.values 获取对象的所有值。

    var values = Object.values(myObject);
    
  28. Object.assign 合并对象。

    var mergedObject = Object.assign({}, obj1, obj2);
    
  29. Date 处理日期和时间。

    var currentDate = new Date();
    
  30. Map 创建键值对集合。

    var myMap = new Map();
    myMap.set('key', 'value');
    
  31. Set 创建唯一值的集合。

    var mySet = new Set();
    mySet.add('value1');
    mySet.add('value2');
    
  32. localStorage 本地存储。

    localStorage.setItem('key', 'value');
    var storedValue = localStorage.getItem('key');
    
  33. sessionStorage 会话存储。

    sessionStorage.setItem('key', 'value');
    var storedValue = sessionStorage.getItem('key');
    
  34. window.location 获取或设置当前页面的URL。

    var currentURL = window.location.href;
    
  35. confirm 显示带有确定和取消按钮的对话框。

    if (confirm('Are you sure?')) {
        // 用户点击了确定按钮
    } else {
        // 用户点击了取消按钮
    }
    
  36. setTimeoutclearTimeout 延迟执行或取消延迟执行。

    var timeoutId = setTimeout(function() {
        // 执行某个操作
    }, 1000);
    
    // 取消延迟执行
    clearTimeout(timeoutId);
    
  37. setIntervalclearInterval 定时执行或取消定时执行。

    var intervalId = setInterval(function() {
        // 执行某个操作
    }, 2000);
    
    // 取消定时执行
    clearInterval(intervalId);
    
  38. RegExp 正则表达式。

    var pattern = /pattern/;
    var isMatch = pattern.test('test string');
    
  39. String.prototype.split 将字符串分割为数组。

    
    var array = myString.split(' ');
    
  40. String.prototype.replace 替换字符串中的文本。

    var newString = myString.replace('old', 'new');
    
  41. String.prototype.substring 提取字符串的子串。

    var subString = myString.substring(0, 5);
    
  42. String.prototype.slice 切片字符串。

    var slicedString = myString.slice(0, 5);
    
  43. Array.prototype.concat 连接数组。

    var newArray = array1.concat(array2);
    
  44. Array.prototype.reverse 反转数组。

    var reversedArray = myArray.reverse();
    
  45. Array.prototype.join 将数组元素连接为字符串。

    var joinedString = myArray.join(', ');
    
  46. Array.prototype.indexOf 查找数组元素的位置。

    var index = myArray.indexOf('search');
    
  47. Array.prototype.includes 判断数组是否包含某个元素。

    var isIncludes = myArray.includes('element');
    
  48. Array.prototype.sort 对数组进行排序。

    var sortedArray = myArray.sort();
    
  49. Array.prototype.splice 修改数组内容。

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

这仅仅是JavaScript中许多常用方法的冰山一角。通过深入学习这些方法,你可以更好地理解JavaScript的强大之处,并在实际项目中更高效地应用它们。

文章来源:https://blog.csdn.net/wykqh/article/details/135320383
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。