JS常用函数
一、介绍
JavaScript(简称JS)是一种可以与HTML和CSS一起使用的编程语言。它为网页添加交互功能,使网页动态化。在开发中,我们经常使用JavaScript来处理各种逻辑和操作。而在JavaScript中,函数是一种非常重要的概念,可以帮助我们封装代码,实现可重复使用的功能。
在本文中,我们将介绍一些常用的JavaScript函数,包括字符串操作、数学计算、数组处理、日期处理、DOM操作等方面的函数。
二、字符串函数
1. 字符串长度函数
JavaScript中可以使用length属性来获取字符串的长度,示例代码如下:
var str = "Hello World";
console.log(str.length); // 输出 11
2. 字符串拼接函数
在JavaScript中,我们可以使用+运算符将两个或多个字符串进行拼接,示例代码如下:
var str1 = "Hello";
var str2 = "World";
var str = str1 + " " + str2;
console.log(str); // 输出 "Hello World"
3. 字符串查函数
JavaScript中提供了indexOf()函数用于查指定字符串在原字符串中的位置,示例代码如下:
var str = "Hello World";
console.log(str.indexOf("World")); // 输出 6
如果要查指定字符串的最后一次出现位置,可以使用lastIndexOf()函数。
4. 字符串替换函数
使用replace()函数可以将指定字符串替换为新的字符串,示例代码如下:
var str = "Hello World";
var newStr = str.replace("World", "JavaScript");
console.log(newStr); // 输出 "Hello JavaScript"
5. 字符串切割函数
使用split()函数可以将字符串根据指定的分隔符进行切割,返回一个由切割后的子串组成的数组,示例代码如下:
var str = "Hello,World,JavaScript";
var arr = str.split(",");
console.log(arr); // 输出 ["Hello", "World", "JavaScript"]
三、数学函数
1. 四舍五入函数
使用und()函数可以将一个数字四舍五入到最接近的整数,示例代码如下:
console.log(Math.round(3.1415)); // 输出 3
console.log(Math.round(3.7)); // 输出 4
2. 随机数函数
使用Math.random()函数可以生成一个0到1之间的随机数,示例代码如下:
console.log(Math.random()); // 输出 0.12345(示例)
如果需要生成指定范围的随机数,可以使用如下代码:
var min = 1;
var max = 10;
var randomNum = Math.floor(Math.random() * (max - min + 1) + min);
console.log(randomNum); // 输出介于1到10之间的随机整数
3. 绝对值函数
使用Math.abs()函数可以返回一个数的绝对值,示例代码如下:
console.log(Math.abs(-5)); // 输出 5
4. 幂函数
使用Math.pow()函数可以计算一个数的幂,示例代码如下:
console.log(Math.pow(2, 3)); // 输出 8
四、数组函数
1. 数组长度函数
JavaScript中可以使用length属性来获取数组的长度,示例代码如下:
var arr = [1, 2, 3, 4, 5];
console.log(arr.length); // 输出 5
2. 数组遍历函数
JavaScript中可以使用forEach()函数来遍历数组,示例代码如下:
var arr = [1, 2, 3, 4, 5];
arr.forEach(function(item) {
console.log(item);
});
3. 数组查函数
使用indexOf()函数可以查指定元素在数组中的位置,示例代码如下:
var arr = [1, 2, 3, 4, 5];
console.log(arr.indexOf(3)); // 输出 2
如果要查指定元素的最后一次出现位置,可以使用lastIndexOf()函数。
4. 数组排序函数
JavaScript中可以使用sort()函数对数组进行排序,默认按照字母顺序排序,示例代码如下:
var arr = [5, 3, 1, 2, 4];
arr.sort();
console.log(arr); // 输出 [1, 2, 3, 4, 5]
如果要按照数字大小进行排序,可以自定义比较函数,示例代码如下:
var arr = [5, 3, 1, 2, 4];
arr.sort(function(a, b) {
return a - b;
});
console.log(arr); // 输出 [1, 2, 3, 4, 5]
5. 数组拼接函数
使用concat()函数可以将多个数组拼接成一个数组,示例代码如下:
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var newArr = arr1.concat(arr2);
console.log(newArr); // 输出 [1, 2, 3, 4, 5, 6]
五、日期函数
1. 获取当前日期函数
使用Date()函数可以获取当前日期和时间,示例代码如下:
var currentDate = new Date();
console.log(currentDate); // 输出当前日期和时间
2. 获取年、月、日函数
使用getFullYear()函数可以获取当前年份,示例代码如下:
var currentDate = new Date();
console.log(currentDate.getFullYear()); // 输出当前年份
使用getMonth()函数可以获取当前月份(从0开始,0表示一月),示例代码如下:
var currentDate = new Date();
console.log(currentDate.getMonth()); // 输出当前月份
使用getDate()函数可以获取当前日期,示例代码如下:
var currentDate = new Date();
console.log(currentDate.getDate()); // 输出当前日期
3. 格式化日期函数
使用日期对象的方法可以将日期格式化为指定的字符串,示例代码如下:
var currentDate = new Date();
console.log(currentDatesort函数 js.toISOString()); // 输出格式为 "2022-01-01T00:00:00.000Z" 的字符串
使用自定义的格式化函数可以将日期格式化为指定的格式,示例代码如下:
var currentDate = new Date();
var year = currentDate.getFullYear();
var month = ("0" + (currentDate.getMonth() + 1)).slice(-2);
var day = ("0" + currentDate.getDate()).slice(-2);
var formattedDate = year + "-" + month + "-" + day;
console.log(formattedDate); // 输出格式为 "2022-01-01" 的字符串
六、DOM操作函数
1. 获取元素函数
使用getElementById()函数可以通过元素的id属性获取元素,示例代码如下:
var element = document.getElementById("myElement");
使用getElementsByClassName()函数可以通过元素的class属性获取元素,示例代码如下:
var elements = document.getElementsByClassName("myClass");
使用getElementsByTagName()函数可以通过元素的标签名获取元素,示例代码如下:
var elements = document.getElementsByTagName("div");
2. 添加元素函数
使用createElement()函数可以创建一个新元素,示例代码如下:
var newElement = document.createElement("div");
使用appendChild()函数可以将一个元素添加到另一个元素的最后一个子元素位置,示例代码如下:
var parentElement = document.getElementById("parentElement");
var childElement = document.createElement("div");
parentElement.appendChild(childElement);
3. 删除元素函数
使用removeChild()函数可以删除一个元素的子元素,示例代码如下:
var parentElement = document.getElementById("parentElement");
var childElement = document.getElementById("childElement");
parentElement.removeChild(childElement);
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论