js 常用方法举例说明50个

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. setTimeout和clearTimeout： 延迟执行或取消延迟执行。

    var timeoutId = setTimeout(function() {
        // 执行某个操作
    }, 1000);
    
    // 取消延迟执行
    clearTimeout(timeoutId);
    

37. setInterval和clearInterval： 定时执行或取消定时执行。

    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的强大之处，并在实际项目中更高效地应用它们。