目录
🌈 数组的概念
➢ 数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的方式。
// 普通变量一次只能存储一个值
var num = 10;
// 数组一次可以存储多个值
var arr = [1,2,3,4,5];
🌈 创建数组
1、数组的创建方式
➢ JS 中创建数组有两种方式:
- 利用 new 创建数组
- 利用数组字面量创建数组
2、利用 new 创建数组
var 数组名 = new Array() ;
var arr = new Array(); // 创建一个新的空数组
- 注意 Array () ,A 要大写
3、利用数组字面量创建数组
//1. 使用数组字面量方式创建空的数组
var 数组名 = [];
//2. 使用数组字面量方式创建带初始值的数组
var 数组名 = [1,2,3,4,5];
- 数组的字面量是方括号 [ ]
- 声明数组并赋值称为数组的初始化
- 这种字面量方式也是使用的最多的方式
4、数组元素的类型
➢ 数组中可以存放任意类型的数据,例如字符串,数字,布尔值等。
var arrStus = ['JJ',22,true,28.8];
🌈 获取数组元素
1、数组的索引
➢ 索引 (下标) :用来访问数组元素的序号(数组下标从 0 开始)。
例子:
<!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>
<script>
var arr = ['苹果','香蕉','榴莲','橙子'];
console.log(arr);
</script>
</head>
<body>
</body>
</html>
结果展示:
➢ 数组可以通过索引来访问、设置、修改对应的数组元素,我们可以通过“数组名[索引]”的形式来获取数组中的元素。(这里的访问就是获取得到的意思)
例子:
<!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>
<script>
var arr = ['苹果','香蕉','榴莲','橙子'];
console.log(arr[1]);
</script>
</head>
<body>
</body>
</html>
结果展示:
🌈 遍历数组
➢ 通过“数组名[索引号]”的方式获取数组中的每一项
var arr = ['苹果','香蕉','榴莲','橙子'];
console.log(arr[0]) // 苹果
console.log(arr[1]) // 香蕉
console.log(arr[2]) // 榴莲
console.log(arr[2]) // 橙子
➢ 从代码中我们可以发现,从数组中取出每一个元素时,代码是重复的,有所不一样的是索引值在递增
遍历: 就是把数组中的每个元素从头到尾都访问一次
我们可以通过 for 循环索引遍历数组中的每一项
<!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>
<script>
var arr = ['苹果','香蕉','榴莲','橙子'];
for (var i=0;i<=3;i++) {
console.log(arr[i]);
}
</script>
</head>
<body>
</body>
</html>
结果展示:
1、数组的长度
➢ 使用“数组名.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>
<script>
var arr=['A','B','C','D'];
console.log(arr.length);
</script>
</head>
<body>
</body>
</html>
结果展示:
➢ 注意:
① 此处数组的长度是数组元素的个数 ,不要和数组的索引号混淆。
② 当数组里面的元素个数发生了变化,这个 length 属性跟着一起变化。
2、案例
(1)数组求和及平均值
➢ 求数组 [1,2,3,4,5,6,7,8,9,10] 里面所有元素的和以及平均值。
<!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>
<script>
var arr=[1,2,3,4,5,6,7,8,9,10];
var sum=0;
for (var i=0;i<arr.length;i++) {
sum=sum+arr[i];
}
console.log('该数组的和是:'+sum);
console.log('该数组的平均值是:'+sum/arr.length);
</script>
</head>
<body>
</body>
</html>
结果展示:
(2)数组最大值
➢ 求数组 [2,5,66,99,33,88] 中的最大值。
<!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>
<script>
var arr = [2,5,66,99,33,88];
var max = arr[0]; // 将数组的第一位元素赋值给max
for (var i=1;i<arr.length;i++) {
if (arr[i]>max) {
max=arr[i];
}
}
console.log('该数组的最大值是:'+max);
</script>
</head>
<body>
</body>
</html>
结果展示:
(3)数组转换为字符串
➢ 要求:将数组 [‘one’,‘two’,‘three’,‘four’,‘five’] 里面的元素转换为字符串
➢ 输出: ‘onetwothreefourfive’
<!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>
<script>
var arr = ['one','two','three','four','five'];
var str = '';
for (var i=0;i<arr.length;i++) {
str = str + arr[i];
}
console.log(str);
</script>
</head>
<body>
</body>
</html>
结果展示:
(4)数组转换为分割字符串
➢ 要求:将数组 [‘one’,‘two’,‘three’,‘four’,‘five’] 转换为字符串,并且用 | 或其他符号分割
➢ 输出: ‘one|two|three|four|five’
<!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>
<script>
var arr = ['one','two','three','four','five'];
var str = arr[0];
var sep = '|'
for (var i=1;i<arr.length;i++) {
str = str + sep + arr[i];
}
console.log(str);
</script>
</head>
<body>
</body>
</html>
结果展示:
🌈 数组中新增元素
1、通过修改 length 长度新增数组元素
- 可以通过修改 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>
<script>
var arr = ['one','two','three']; // 此时arr.length = 3
arr.length = 5;
console.log(arr[3]);
console.log(arr[4]);
</script>
</head>
<body>
</body>
</html>
结果展示:
➢ 其中索引号是 3,4 的空间没有给值,就是声明变量未给值,默认值就是 undefined。
2、通过修改数组索引新增数组元素
- 可以通过修改数组索引的方式追加数组元素
- 不能直接给数组名赋值,否则会覆盖掉以前的数据
➢ 追加数组元素:
<!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>
<script>
var arr = ['one','two','three'];
arr[3] = 'four';
console.log(arr);
</script>
</head>
<body>
</body>
</html>
结果展示:
➢ 替换数组元素:
<!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>
<script>
// 如果给数组中已经被占用的索引号赋值,原有元素会被替换
var arr = ['one','two','three'];
arr[0] = 'six';
console.log(arr);
</script>
</head>
<body>
</body>
</html>
结果展示:
➢ 千万不要直接给数组名赋值,不然数组里的元素都没有了,对数组元素进行追加或者替换要记得要带上索引号
错误例子:
<!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>
<script>
var arr = [1,2,3,4,5];
arr = '啊这这这';
console.log(arr);
</script>
</head>
<body>
</body>
</html>
结果展示:
3、案例
(1)数组新增元素
➢ 新建一个数组,里面存放10个整数( 1~10), 要求使用循环追加的方式输出: [1,2,3,4,5,6,7,8,9,10]
<!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>
<script>
var arr = [];
for (var i=0;i<10;i++) {
arr[i] = i+1;
}
console.log(arr);
</script>
</head>
<body>
</body>
</html>
结果展示:
(2)筛选数组
➢ 要求:将数组 [1,3,22,11,66,5,0,9,66] 中大于等于 10 的元素选出来,放入新数组。
- 方法一:
<!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>
<script>
var arr1 = [1,3,22,11,66,5,0,9,66];
var arr2 = [];
var j = 0;
for (var i=0;i<arr1.length;i++) {
if (arr1[i] >= 10) {
arr2[j] = arr1[i];
j++;
}
}
console.log(arr2);
</script>
</head>
<body>
</body>
</html>
- 方法二
<!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>
<script>
var arr1 = [1,3,22,11,66,5,0,9,88];
var arr2 = [];
for (var i=0;i<arr1.length;i++) {
if (arr1[i] >= 10) {
arr2[arr2.length] = arr1[i];
/* 一开始时,arr2是空数组,此时的arr2.length=0,
把arr2.length=0当作arr2数组的索引号,刚好是数组的首位索引号,
当arr2存了一个元素时,此时arr2.length=1,1就是arr2的第二个索引号啦 */
}
}
console.log(arr2);
</script>
</head>
<body>
</body>
</html>
两种方法得到的结果都一样:
🌈 数组案例
1、删除指定数组元素
➢ 要求:将数组 [2,60,0,89,0,65,36,0,99] 中的 0 去掉后,形成一个不包含 0 的新数组。
<!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>
<script>
var arr1 = [2,60,0,89,0,65,36,0,99];
var arr2 = [];
for (var i=1;i<arr1.length;i++) {
if (arr1[i]!=0) {
arr2[arr2.length] = arr1[i];
}
}
console.log(arr2);
</script>
</head>
<body>
</body>
</html>
结果展示:
2、翻转数组
➢ 要求: 将数组[‘one’,‘two’,‘three’,‘four’,‘five’] 的内容反过来存放。
➢ 输出: [‘five’, ‘four’, ‘three’, ‘two’, ‘one’]
<!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>
<script>
var arr1 = ['one','two','three','four','five'];
var arr2 = [];
for (var i=arr1.length-1;i>=0;i--) {
arr2[arr2.length] = arr1[i];
}
console.log(arr2);
</script>
</head>
<body>
</body>
</html>
结果展示:
3、数组排序(冒泡排序)
➢ 冒泡排序:是一种算法,把一系列的数据按照一定的顺序进行排列显示(从小到大或从大到小)。
➢ 例如,我们可以将数组 [5, 4, 3, 2, 1]中的元素按照从小到大的顺序排序,输出: 1,2,3,4,5
<!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>
<script>
// 冒泡排序
var arr = [5,4,3,2,1];
for (var i=0;i<arr.length-1;i++) {
for (var j=1;j<=arr.length-i-1;j++) {
// 内部交换两变量的值
if (arr[j]>arr[j+1]) {
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}
console.log(arr);
</script>
</head>
<body>
</body>
</html>
结果展示: