|
目录
目标
数组的概念
创建数组
利用 new 创建数组
利用数组字面量创建数组
获取数组中的元素
数组的索引
遍历数组
数组长度
案例1：数组求和、平均值
案例2：数组最大值
案例3：数组转换为分割字符串
数组中新增元素
修改 length 长度新增数组元素
修改索引号追加数组元素
案例：数组新增元素
案例：筛选数组
数组案例
案例1：删除指定数组元素
案例2：翻转数组
案例3：数组排序（冒泡排序）
?
目标
- 能够知道为什么要有数组
- 能够创建数组
- 能够获取数组中的元素
- 能够对数组进行遍历
- 能够给数组新增一个元素
- 能够独立完成冒泡排序的案例
数组的概念
- 数组（Array）可以把一组相关的数据一起存放，并提供方便的询问（获取）方式
- 数组指一组数据的集合，其中的每个数据项被称为元素，数组中可以存放任意类型的元素
- 数组就是将一组数据存储在单个变量名下
创建数组
JS 中创建数组有两种方式：
利用 new 创建数组
<script>
// 利用 new 创建数组
// var 数组名 = new Array();
var arr = new Array(); // 创建一个新的空数组
</script>
利用数组字面量创建数组
<script>
// 利用数组字面量创建数组
var 数组名 = [];
// 使用数组字面量方式创建带初始值的数组
// '青龙', 1, true, 1.1 都被称为数组元素
// 用逗号分隔
var 数组名 = ['青龙', 1, true, 1.1];
</script>
- ?数组的字面量是方括号 [ ]
- 声明数组并赋值称为数组的初始化
- 字面量方式是我们使用最多的方式
- 数组中可以存放任意类型的数据，例如字符串、数字、布尔值等
获取数组中的元素
数组的索引
索引（下标）：用来访问数组元素的序号（数组下标从 0 开始）
- 数组可以通过索引来访问、设置、修改对应的数组元素
- 可以通过 "数组名【索引】" 的形式来获取数组中的元素
- 访问即获取、得到的意思
<script>
var arr = ['青龙', 1, true, 1.1];
console.log(arr[1]);
console.log(arr[3]);
console.log(arr[0]);
console.log(arr[2]);
</script>
<script>
var week = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'];
var num = prompt('请输入您最喜欢的星期：');
alert(week[num]);
</script>
遍历数组
- 遍历：把数组中的每个元素从头到尾都访问一次
- 规律：遍历数组，即从数组中取出每一个元素时，代码是重复的，唯一不同的是索引值在递增
<script>
var week = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'];
for (var i = 0; i < week.length; i++) {
// 此处计数器 i 被当作数组的索引号使用
console.log(week[i]);
}
</script>
数组长度
- 数组名.length；
- 数组的长度是元素的个数，不要和索引号混淆
- 数组名.length 动态监测数组元素的个数
<script>
var shuhan = ['刘备', '诸葛亮', '关羽', '张飞', '赵云', '马超', '黄忠', '刘禅', '姜维'];
for (var i = 0; i < shuhan.length; i++) {
// 此处计数器 i 被当作数组的索引号使用
console.log(shuhan[i]);
}
</script>
案例1：数组求和、平均值
<script>
var sum = 0;
var average = 0;
var num = [2, 6, 4, 3, 8, 7, 5];
for (var i = 0; i < num.length; i++) {
// 此处计数器 i 被当作数组的索引号使用
sum += num[i];
}
average = sum / num.length;
console.log('数组和为' + sum, '\n数组的平均值为' + average);
</script>
案例2：数组最大值
<script>
var num = [2, 6, 4, 3, 8, 7, 5];
var max = num[0];
for (var i = 1; i < num.length; i++) {
if (num[i] > max) {
max = num[i];
}
}
console.log('该数组中的最大值为' + max);
</script>
案例3：数组转换为分割字符串
<script>
var num = ['王朝', '马汉', '张龙', '赵虎'];
var str = '';
var separator = prompt('请输入您想要的分隔符：');
for (var i = 0; i < num.length; i++) {
str += num[i] + separator;
}
console.log(str);
</script>
数组中新增元素
- 可以通过修改 length 长度以及索引号增加数组元素
修改 length 长度新增数组元素
- 可以通过修改 length 长度来实现数组扩容的目的
- length 属性是可读写的
<script>
// 修改 length 长度新增数组元素
var arr = ['王朝', '马汉', '张龙', '赵虎'];
console.log(arr.length);
arr.length = 5; // 将数组长度修改为 5，里面将新增一个元素
console.log(arr);
console.log(arr[4]); // 由于没有给新增元素定义并赋值，所以新增的元素为 undefined
</script>
修改索引号追加数组元素
- 可以通过修改数组索引的方式追加数组是数组元素
- 不能直接给数组名赋值，否则会覆盖原先的整个数组
- 最常用的方式
<script>
// 修改索引号追加数组元素
var arr = ['王朝', '马汉', '张龙', '赵虎'];
arr[4] = '展昭'; // 索引号未被使用，追加元素
arr[5] = '公孙策';
arr[0] = '包拯'; // 索引号已被使用，替换元素
console.log(arr);
</script>
案例：数组新增元素
<script>
// 新建一个空数组，将 1~10 添加到数组中
var arr = [];
for (var i = 0; i < 10; i++) {
arr[i] = i + 1;
}
console.log(arr);
</script>
案例：筛选数组
<script>
// 将数组 arr 中大于等于 10 的元素选出来存入新的数组 newArr
var arr = [15, 25, 7, 5, 3, 22, 10];
// 方法1：newArr.length
var newArr1 = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] >= 10) {
newArr1[newArr1.length] = arr[i];
}
}
console.log(newArr1);
// 方法2：添加新的计数器 j
var newArr2 = [];
var j = 0;
for (var i = 0; i < arr.length; i++) {
if (arr[i] >= 10) {
newArr2[j] = arr[i];
j++;
}
}
console.log(newArr2);
// 方法3：push()
var newArr3 = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] >= 10) {
newArr3.push(arr[i]);
}
}
console.log(newArr3);
</script>
数组案例
案例1：删除指定数组元素
<script>
// 删除指定元素
var arr = [11, 8, 2, 31, 8, 43, 10, 8];
// 方法1：newArr.length
var newArr1 = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] != 8) {
newArr1[newArr1.length] = arr[i];
}
}
console.log(newArr1);
// 方法2：添加新的计数器 j
var newArr2 = [];
var j = 0;
for (var i = 0; i < arr.length; i++) {
if (arr[i] != 8) {
newArr2[j] = arr[i];
j++;
}
}
console.log(newArr2);
// 方法3：push()
var newArr3 = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] != 8) {
newArr3.push(arr[i]);
}
}
console.log(newArr3);
</script>
案例2：翻转数组
<script>
// 翻转数组
var arr = ['王朝', '马汉', '张龙', '赵虎', '展昭', '公孙策', '包拯'];
// 方法1：newArr.length
var newArr1 = [];
for (var i = arr.length - 1; i >= 0; i--) {
newArr1[newArr1.length] = arr[i];
}
console.log(newArr1);
// 方法2：push();
var newArr2 = []
for (var i = arr.length - 1; i >= 0; i--) {
newArr2.push(arr[i]);
}
console.log(newArr2);
</script>
案例3：数组排序（冒泡排序）
<script>
// 冒泡排序
var arr = [9, 3, 5, 2, 4, 7, 6, 8, 1];
var temp = 0;
for (var i = 0; i < arr.length - 1; i++) { // 外层循环
for (var j = 0; j < arr.length - 1; j++) { // 内层循环
if (arr[j] > arr[j + 1]) {
temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr);
</script>
|