JavaWeb JavaScript ⑤ JS常见对象

某一瞬间，是平静的自我接纳

—— 24.8.27

一、数组

1.创建数组的四种方式

① new Array() 创建空数组

② new Array(5) 创建数组时给定长度

③ new Array(ele1,ele2,…,elen); 创建数组时给定元素值

④ [ele1,ele2,…,elen] 相当于上面写法的简写

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<script>/*1.数组1>数组的创建方式2>数组的API3>JS中的数组更像Java中的集合*/// 1.数组的创建方式// 1.1 方式一var arr = new Array(); // 创建一个空数组console.log(arr); // []console.log(arr.length); // 0// 向数组中添加数据arr[0]="hello"arr[1]="world"arr[7]=10arr[9]=truearr.length=20console.log(arr[5])console.log(arr); // ["hello", "world", undefined × 5, 10, undefined × 15]console.log(arr.length); // 20// 1.2 方式二var arr2 = ["hello", "world", 10, true];console.log(arr2); // ["hello", "world", 10, true]console.log(arr2.length); // 4// 1.3 方式三var arr3 = Array(10); // 创建一个长度为10的数组console.log(arr3); // [undefined × 10]console.log(arr3.length); // 10// 1.4 方式四var arr4 = Array.of(1, 2, 3, 4); // 创建一个包含1，2，3，4的数组console.log(arr4); // [1, 2, 3, 4]console.log(arr4.length); // 4</script>
<body></body>
</html>

2.数组常见API

① push，在数组的末尾添加元素

   // 2.数组的API// 2.1 push()       在数组的末尾添加一个或多个元素var arr5 = [1, 2, 3];arr5.push(4); // 在数组的末尾添加一个元素console.log(arr5); // [1, 2, 3, 4]console.log(arr5.length); // 4var arr6 = [1, 2, 3];arr6.push(4, 5, 6); // 在数组的末尾添加多个元素console.log(arr6); // [1, 2, 3, 4, 5, 6]console.log(arr6.length); // 6

② concat，合并两数组

    // 2.API// 2.2 concat()     合并两个数组var fruits = ["apple", "banana", "orange"];var fruits2 = ["grape", "pear"];var newFruits = fruits.concat(fruits2); // 合并两个数组console.log(newFruits); // ["apple", "banana", "orange", "grape", "pear"]

③ pop，移除并返回最后一个元素

    // 2.3 pop()        删除数组的最后一个元素，并返回该元素的值var arr7 = [1, 2, 3, 4];var last = arr7.pop(); // 删除数组的最后一个元素，并返回该元素的值console.log(last); // 4console.log(arr7); // [1, 2, 3]

④ lastIndexOf() 搜索数组中的元素，并返回它最后出现的位置

    // 2.4 lastIndexOf()    返回指定元素在数组中最后出现的索引，如果不存在则返回-1var arr8 = [1, 2, 3, 2, 8,7,9,1];var index = arr8.lastIndexOf(1); // 返回指定元素在数组中最后出现的索引console.log(index); // 7console.log(arr8.lastIndexOf(5)); // -1

⑤ reverse 反转数组

    // 2.5 reverse()     反转数组var arr9 = [1, 2, 3, 4];arr9.reverse(); // 反转数组 console.log(arr9); // [4, 3, 2, 1]

⑥ 删除数组的第一个元素，并返回值

    // 2.6 shift()       删除数组的第一个元素，并返回该元素的值var arr10 = [1, 2, 3, 4];var first = arr10.shift(); // 删除数组的第一个元素，并返回该元素的值    console.log(first); // 1console.log(arr10); // [2, 3, 4]

⑦ 返回数组的拷贝

    // 2.7 slice()      返回数组的拷贝var arr11 = [1, 2, 3, 4];var copy = arr11.slice(1, 3); // 返回数组的拷贝console.log(copy); // [2, 3]

⑧ 对数组进行排序

    // 2.8 sort()       对数组进行排序var arr12 = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];arr12.sort(); // 对数组进行排序console.log(arr12); // [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]

⑨ splice() 修改数组的元素

可以从数组中删除元素，可以向数组中添加元素

    // 2.9 splice()     修改数组的元素，可以从数组中删除元素，可以向数组中添加元素var arr13 = [1, 2, 3, 4];arr13.splice(1, 2, "a", "b"); // 从索引1处删除两个元素，并添加“a”、“b”两个元素console.log(arr13); // [1, "a", "b",  4]

⑩ unshift() 在数组的开头添加一个或多个元素

    // 2.10 unshift()    在数组的开头添加一个或多个元素var arr14 = [1, 2, 3, 4];arr14.unshift("a", "b"); // 在数组的开头添加一个或多个元素console.log(arr14); // ["a", "b", 1, 2, 3, 4]

二、Boolean对象

boolean对象的的方法比较简单

boolean对象常见API

① toString 把布尔值转换为字符串，并返回结果

    // 3.Boolean对象// 3.1 ① toString        把布尔值转换为字符串，并返回结果var bool = new Boolean(true);console.log(bool.toString()); // true

② valueOf 返回Boolean对象的原始值

    // 3.2 ② valueOf        返回Boolean对象的原始值var bool2 = new Boolean(false);console.log(bool2.valueOf()); // false

③ Boolean 转换为布尔值

    // 3.3 ③ Boolean()       转换为布尔值var bool3 = Boolean("hello"); // 字符串"hello"转换为布尔值console.log(bool3.valueOf()); // true

三、JS常用对象API

① date对象 ② math对象 ③ String对象 ④ number对象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 1.Date对象// 创建Date对象var date = new Date();// 获取当前时间戳var timestamp = date.getTime();console.log(timestamp); // 1724721557734// 将时间戳转换为日期格式var dateStr = new Date(timestamp).toLocaleString();console.log(dateStr); // 2024/8/27 09:19:17var data = new Date();data.setFullYear(2002); // 设置年份data.setMonth(11); // 设置月份data.setDate(4); // 设置日期// 2.Math对象// 随机数var randomNum = Math.random();console.log(randomNum); // 0.5590989246003628// 最大值var maxNum = Math.max(1, 2, 3, 4, 5);console.log(maxNum); // 5// 最小值var minNum = Math.min(1, 2, 3, 4, 5);console.log(minNum); // 1// 绝对值var absNum = Math.abs(-5);console.log(absNum); // 5// 向上取整var ceilNum = Math.ceil(3.2);console.log(ceilNum); // 4// 向下取整var floorNum = Math.floor(3.8);console.log(floorNum); // 3// 四舍五入var roundNum = Math.round(3.5);console.log(roundNum); // 4// 平方根var sqrtNum = Math.sqrt(9);console.log(sqrtNum); // 3// 3.number对象// 整数部分var num1 = 123.456;var intPart = Math.floor(num1);console.log(intPart); // 123    // 小数部分var decPart = num1 - intPart;console.log(decPart); // 0.456// 与字符串拼接var str = '27';// number()方法 转换为数字var num = Number(str);console.log(num); // 27// toString()方法 转换为字符串var str = num.toString();console.log(str); // "27"// 4.String对象// 字符串长度var str = "hello world";var strLen = str.length;console.log(strLen); // 11// 字符串拼接var str1 = "hello";var str2 = "world";var str3 = str1 + " " + str2;console.log(str3); // "hello world"// 字符串截取var str4 = "hello world";var subStr = str4.substring(0, 5);console.log(subStr); // "hello"// 字符串查找var str5 = "hello world";var index = str5.indexOf("l");console.log(index); // 2// 字符串替换var str6 = "hello world";var newStr = str6.replace("l", "L");console.log(newStr); // "heLLo world"// 字符串转换为数组var str7 = "hello world";var arr = str7.split(" ");console.log(arr); // ["hello", "world"]</script>
</head>
<body></body>
</html>