javascript常用功能汇总

2023年5月18日上午12:08 • JavaScript

JavaScript常用功能汇总

JavaScript (简写为JS) 是一种轻量级的编程语言。它是Web前端开发的三大基石之一（HTML、CSS、JavaScript）。本文将介绍一些常用的JavaScript功能，包括字符串操作、数组操作、函数定义等。

字符串处理

JavaScript中的字符串是用单引号或双引号括起来的文本。常用的字符串操作包括：查找子字符串、替换子字符串、分割字符串等。

查找子字符串

JavaScript提供了两个方法用于查找子字符串：indexOf()和lastIndexOf()。

indexOf()方法用于查找一个子串在另一个字符串中第一次出现的位置，找到则返回子串的下标，否则返回-1。

let str = "hello world";
let index = str.indexOf("world");
console.log(index); // 6

lastIndexOf()方法用于查找一个子串在另一个字符串中最后一次出现的位置，找到则返回子串的下标，否则返回-1。

let str = "hello world";
let index = str.lastIndexOf("o");
console.log(index); // 7

替换子字符串

JavaScript提供了replace()方法用于替换子字符串。

let str = "hello world";
let newStr = str.replace("world", "JavaScript");
console.log(newStr); // hello JavaScript

分割字符串

JavaScript提供了split()方法用于将一个字符串分割成多个子串。

let str = "apple,banana,orange";
let arr = str.split(",");
console.log(arr); // ["apple", "banana", "orange"]

数组操作

JavaScript中的数组是一种有序的对象集合。常用的数组操作包括：遍历数组、添加元素、删除元素、筛选元素等。

遍历数组

JavaScript提供了两种遍历数组的方法：for循环和forEach()方法。

for循环：

let arr = ["apple", "banana", "orange"];
for(let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

forEach()方法：

let arr = ["apple", "banana", "orange"];
arr.forEach(function(item, index) {
    console.log(index + ":" + item);
});

添加元素

JavaScript提供了两个方法用于添加元素：push()和unshift()。

push()方法用于在数组的末尾添加一个或多个元素。

let arr = ["apple", "banana"];
arr.push("orange");
console.log(arr); // ["apple", "banana", "orange"]

unshift()方法用于在数组的开头添加一个或多个元素。

let arr = ["apple", "banana"];
arr.unshift("orange");
console.log(arr); // ["orange", "apple", "banana"]

删除元素

JavaScript提供了两个方法用于删除元素：pop()和shift()。

pop()方法用于删除数组的最后一个元素。

let arr = ["apple", "banana", "orange"];
arr.pop();
console.log(arr); // ["apple", "banana"]

shift()方法用于删除数组的第一个元素。

let arr = ["apple", "banana", "orange"];
arr.shift();
console.log(arr); // ["banana", "orange"]

筛选元素

JavaScript提供了filter()方法用于筛选元素。

let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter(function(item) {
    return item > 3;
});
console.log(newArr); // [4, 5]

函数定义

函数是一段可重复执行的代码块。JavaScript中的函数有两种定义方式：函数声明和函数表达式。

函数声明

函数声明是指用function关键字定义一个函数，可以在任何地方调用该函数。

function add(a, b) {
    return a + b;
}
console.log(add(1, 2)); // 3

函数表达式

函数表达式是指用一个变量来存储一个函数，只能在该变量声明之后调用该函数。

let add = function(a, b) {
    return a + b;
};
console.log(add(1, 2)); // 3

示例说明

示例1：倒计时

以下代码实现了一个倒计时功能，通过setInterval()方法每秒更新时间，当倒计时结束时清除定时器。

<!DOCTYPE html>
<html>
<head>
    <title>倒计时</title>
</head>
<body>
    <h1 id="countdown"></h1>
    <script>
        let time = 60;
        let timer = setInterval(function() {
            document.getElementById("countdown").innerText = time;
            time--;
            if(time < 0) {
                clearInterval(timer);
                document.getElementById("countdown").innerText = "倒计时结束";
            }
        }, 1000);
    </script>
</body>
</html>

示例2：随机数生成

以下代码实现了一个生成随机数的功能，通过Math.random()方法生成0到1之间的随机数，乘以范围后加上起始值得到一个随机数。

<!DOCTYPE html>
<html>
<head>
    <title>随机数生成</title>
</head>
<body>
    <button onclick="generateRandom()">生成随机数</button>
    <p id="random"></p>
    <script>
        function generateRandom() {
            let start = 1;
            let end = 100;
            let random = Math.floor(Math.random() * (end - start + 1) + start);
            document.getElementById("random").innerText = random;
        }
    </script>
</body>
</html>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript常用功能汇总 - Python技术站