某一瞬间,是平静的自我接纳
—— 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>数组的API
3>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]=10
arr[9]=true
arr.length=20
console.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); // 4
var 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); // 4
console.log(arr7); // [1, 2, 3]
④ lastIndexOf() 搜索数组中的元素,并返回它最后出现的位置
// 2.4 lastIndexOf() 返回指定元素在数组中最后出现的索引,如果不存在则返回-1
var arr8 = [1, 2, 3, 2, 8,7,9,1];
var index = arr8.lastIndexOf(1); // 返回指定元素在数组中最后出现的索引
console.log(index); // 7
console.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); // 1
console.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:17
var 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>