1.数组的语法
- 数组构成:数组由一个或多个数组元素组成的,各元素之间使用逗号“,”分割。
- 数组元素:每个数组元素由“索引下标”和“值”构成。
- 索引下标:简称下标,以数字表示,默认从0开始依次递增,用于识别元素。
- 值:元素的内容,可以是任意类型的数据,如数值型、字符型、数组、对象等。
2.创建数组
两种方式创建数组:直接使用“[]”的方式和实例化Array对象的方式
使用数组直接量是创建数组最简单、最直观的方法,在方括号中将数组元素用逗号隔开即可
<!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>
<body>
<script>
// 数组构成:数组由一个或多个数组元素组成的,各元素之间使用逗号“,”分割。
// 数组元素:每个数组元素由“索引下标”和“值”构成。
// Array创建数组 1.字面量
var arr = [1, "今日起儿童乘火车须带本人身份证件", true, null, undefined];
console.log(arr)
// 2.使用new 实例化数组
var arr2 = new Array(1, 2, 3, 4, 5, 5, 6);
console.log(arr2);
</script>
</body>
</html>
3.访问和修改数组元素
数组创建完成后,我们可以 [ ] 操作符访问数组中的元素,数组的引用位于方括号左边。
方括号中是一个返回非负整数的任意表达式。使用该语法即可以访问数组中的元素,又可以修改数组中的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = [1,2,3,4,5,6,7];
// 访问数组元素,通过数组的索引下标进行访问 注意:索引下标从0开始
console.log(arr[0]);
// 修改数组元素,对应索引进行重新赋值
arr[0] = 10;
console.log(arr);
// 删除数组元素,通过 delete 关键字进行删除,删除之后该位置变为 empty,数组长度不变
delete arr[6];
console.log(arr);
</script>
</body>
</html>
3.1数组的下标
<!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>
<body>
<script>
// 1.创建数组
var arr = [5, 6, 7, 7, 8, 8, 9];
console.log(arr);
// 使用下标访问数组当中的某个元素
// 使用下标可以访问到 某个对应的元素
console.log(arr[0])
console.log(arr[6])
console.log(arr[7])//undefined
// 如果访问的下标 大于数组里面的下标 那么就会是undefined
console.log(arr[-1]);//undefined
// 下标可以使用运算符
console.log(arr[1 + 2])
console.log(arr[2 - 1])
</script>
</body>
</html>
3.2访问并且修改
<!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>
<body>
<script>
var arr = [1, 2, 3, 4, 5, 5, 6, 6, 7];
arr[3] = "kangkang";
console.log(arr[3]);
console.log(arr);
// 如果访问数组当中的最后一个元素
// arr.length代表数组的长度
console.log(arr.length);
console.log(arr[arr.length - 1]);
var arr2 = [2, 3, 5, 56, 6,];
console.log(arr2[arr2.length - 1]);
// 扩展 注意
// 数组也是复杂数据类型
// 只要是引用数据类型(复杂)
// 都可以通过 . 来访问下面的属性和方法
</script>
</body>
</html>
4.数组的长度
每个数组都有一个 length 属性,length 属性值代表数组中元素的个数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = [1,2,3,4,5,6,7];
console.log(arr);
// 访问数组长度
console.log(arr.length);
// 清空数组
arr.length = 0;
console.log(arr);
// [,,,,]
var arr1 = [];
arr1.length = 6;
console.log(arr1);
</script>
</body>
</html>
5.遍历数组
在创建完数组后,如何遍历数组中的元素,对其进行操作呢?
5.1如何遍历数组
<!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>
<body>
<script>
// 遍历:对数组当中的每一个元素进行一次访问
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// 使用for循环对数组进行遍历操作
// 因为数组的下标是从0开始递增
// arr.length 代表数组当中元素的个数
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
console.log(arr[i] * 10);
// 如果想要让数组的元素改变 必须要赋值
// arr[i] = arr[i] * 10
}
console.log(arr);
</script>
</body>
</html>
5.2二维数组
数组还可以根据维数划分为一维数组、二维数组、三维数组等多维数组。
<!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>
<body>
<script>
// 二维数组
// 创建二维数组
var arr = [
[1, 2, 3, 4],
[5, 6, 7, 8]
];
console.log(arr);
// 如何遍历二维数组
// 第一层循环所有的数组
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
// 第二层循环里面的数组
for (var k = 0; k < arr[i].length; k++) {
console.log(arr[i][k]);
}
}
</script>
</body>
</html>
5.3数组排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = [11, 23, 99, 4, 51, 33, 28, 1];
// 第三者
var temp;
// 外层for循环控制比较几趟
for (var j = 0; j < arr.length; j++) {
// 每一趟都会把最大(最小)的数放在最后面;每放一个之后,下一趟就会少比较一个(length-j)
for (var i = 0; i < arr.length; i++) {
if (arr[i] < arr[i + 1]) {
// 两者进行交换
// temp = arr[i];
// arr[i] = arr[i + 1];
// arr[i + 1] = temp;
// 解构交换
[arr[i], arr[i + 1]] = [arr[i + 1], arr[i]];
}
}
}
console.log(arr);
// 冒泡排序
// 实现原理:在冒泡排序的过程中,按照要求从小到大排序或从大到
// 小排序,不断比较数组中相邻两个元素的值,将值大的元素
// 或最小的元素交换至右端。
// 对以上步骤进行循环
// 从小到大
// 外层for循环规定比较轮数
for (var i = 0; i < arr.length - 1; i++) {
// 内层for循环控制比较次数
for (var k = 0; k < arr.length - 1 - i; k++) {
if (arr[k] > arr[k + 1]) {
[arr[k], arr[k + 1]] = [arr[k + 1], arr[k]]
}
}
}
console.log(arr);
</script>
</body>
</html>
6.数组的操作方法
学习数组的方法要关注以下3个重点:
-
方法参数
-
返回值
-
改变不改变原数组
6.1数组的操作方法-尾部的添加和删除
<!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>
<body>
<script>
var arr = [1, 2, 3, 4, 5, 6, 7];
console.log(arr);
// 学习数组的操作方法需要注意:
// - 方法参数
// - 返回值
// - 改变不改变原数组
// 1. arr.push()
// -将一个或多个元素添加到数组的尾部
// -参数是一个或多个元素
// -返回值是数组的新长度
// -改变原数组
console.log(arr.push(8, "123"))
console.log(arr);
// 2. arr.pop()
// -从数组的末尾删除一个元素
// -没有参数
// -返回值是被删除的元素
// -改变原数组
console.log(arr.pop());
console.log(arr);
</script>
</body>
</html>
6.2数组的操作方法-头部的添加和删除
<!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>
<body>
<script>
var arr = [1, 2, 3, 4, 5, 6, 7];
console.log(arr);
// 1. arr.unshift()
// -从数组的头部添加一个或多个元素
// -参数是一个或多个元素
// -返回值是数组的新长度
// -改变原数组
console.log(arr.unshift("abc","def"));
console.log(arr);
// 2. arr.shift();
// -从数组的头部删除一个元素
// -没有参数
// -返回值是被删除的元素
// -改变原数组
console.log(arr.shift());
console.log(arr);
</script>
</body>
</html>
6.3数组的检索方法
<!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>
<body>
<script>
var arr = [1, 2, 3, 4, 5, 6, 7];
console.log(arr);
// 1. arr.unshift()
// -从数组的头部添加一个或多个元素
// -参数是一个或多个元素
// -返回值是数组的新长度
// -改变原数组
console.log(arr.unshift("abc","def"));
console.log(arr);
// 2. arr.shift();
// -从数组的头部删除一个元素
// -没有参数
// -返回值是被删除的元素
// -改变原数组
console.log(arr.shift());
console.log(arr);
</script>
</body>
</html>
6.4数组的操作方法-转换字符串
<!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>
<body>
<script>
var arr = [2, 3, 4, 5, 6, 7];
console.log(arr);
// arr.join();
// 将数组转换成字符串
// 参数是指定一个字符来连接 数组的元素
// 不改变原数组
console.log(arr.join());
console.log(arr.join(''));
console.log(arr.join('-'));
console.log(arr.join('&'));
console.log(arr.join('!@#$%^&*()'));
console.log(arr.join(':'));
// arr.toString();
// 将数组转换成字符串
console.log(arr.toString());
console.log(arr.toString(10));
console.log(arr.toString(2));
</script>
</body>
</html>
6.5数组其他操作方法
<!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>
<body>
<script>
// 使用new 创建数组
var arr = new Array(1, 2, 3, 4, 54, 5, 6, 6);
// 首字母大写的方法 - 构造函数 只要是构造函数就能使用new操作符 实例化
// String() Boolean() Number()
console.log(arr);
// Array.isArray() 判断传入的参数是否是一个数组
// 返回值:是一个布尔值
console.log(Array.isArray(arr));
console.log(Array.isArray(123));
console.log(Array.isArray(678));
console.log(Array.isArray("123456789"));
console.log(Array.isArray([]));
// 颠倒数组 arr.reverse
console.log(arr.reverse());
</script>
</body>
</html>
6.6复制数组与合并数组
<!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>
<body>
<script>
// var arr = [1, 2, 3, 4, 5, 6, 7, 8];
// // arr.slice();
// // 复制原数组的部分内容。
// // start, end
// // 从start 开始 复制到 end结束 不包含end
// // 不改变原数组
// var arr2 = arr.slice(0, 5);
// console.log(arr2);
// console.log(arr.slice(1, 5));
// arr.concat 合并多个数组
// 参数:多个数组以逗号分割
// 返回值是合并后的新数组
// 不改变元素组
var arr3 = [5, 6, 7]
var arr4 = [8, 9, 10]
var arr5 = [11, 12, 13]
var arrConcat = arr4.concat(arr3, arr5);
console.log(arrConcat);
console.log(arr3);
</script>
</body>
</html>
6.7数组的增删改操作方法
<!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>
<body>
<script>
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// arr.splice();
// 数组的增删改
// 改变**原数组
// 增
// arr.splice(index, 0, item)
// - 从索引index开始, deleteCount(可选):0
// - 把item或者更多的内容插入到索引index的前面
// - 返回值:返回空数组
console.log(arr.splice(0, 0, "a", "b", "c"))
// console.log(arr.splice(0,0,"a","b","c"))
arr.splice(4, 0, 'to', 'day', 'is', '有点热');
console.log(arr);
// 删
// arr.splice(index, 0)
// 从索引 index开始
// 删除几个
arr.splice(0, 3)
// 如果只写一个参数 那就是从索引index开始 删除到数组末尾
// arr.splice(0)
console.log(arr);
// 改
// arr.splice(index,xx,'','','');
// - 从索引index开始
// 删除几个
// 插入几个
arr.splice(0, 3, '1', '2', '3')
console.log(arr);
// 清空数组
var arr2 = [1, 2, 3, 5, 5, 6];
console.log(arr2);
// 1.length = 0
// arr2.length = 0;
// console.log(arr2);
// 2. splice(0)
arr2.splice(0);
console.log(arr2);
// 3. = [];
</script>
</body>
</html>