[TOC]
✊总有人要成为第一，为什么不是你。
2021年08月03日
工作重点
| 1 | 工作重点事项 | 进度 | 已完成 |
|---|---|---|---|
| 2 | 上午讲数组的基础 | 已完成 | - [x] |
|
| 3 | 下午讲排序 | 已完成 |
- [x]
|
| 4 | 晚上做练习 | 已完成 |
- [x]
|
遇到的问题和解决思路
遇到的问题
if (arr[i] > oneMaxNum) {
twoMaxNum = oneMaxNum;
oneMaxNum = arr[i];
}
else if (arr[i] > twoMaxNum) {
twoMaxNum = arr[i];
}
}
今日总结
(1)数组
(2)数组的相关属性
(3)数组长度相关操作
(4)数组的删除
(5)数组的遍历
(6)冒泡排序
(7)选择排序
<!DOCTYPE html>
JavaScript-数组（重点）
思考：如何保存一个班级的所有学生的相关信息，如姓名、学号、年龄？
回答：一种方法利用前面学习过的知识，则每一条信息都需要一个变量去保存，缺点是这样做很麻烦，而且容易出错，又不合理；另一种方法就是利用数组。
概念：数组是存储一系列值的变量集合，可以存储多个值。
1.1 语法
数组构成：数组由一个或多个数组元素组成的，各元素之间使用逗号“,”分割。
数组元素：每个数组元素由“索引下标”和“值”构成。
索引下标：简称下标，以数字表示，默认从0开始依次递增，用于识别元素。
值：元素的内容，可以是任意类型的数据，如数值型、字符型、数组、对象等。
数组还可以根据维数划分为一维数组、二维数组、三维数组等多维数组。
解决开始提出的问题：保存一个班级学生信息，每个数组元素都代表一个学生，而每个学生都使用一个一维数组分别表示其姓名、学号、年龄等信息，这样通过一个变量即可有规律的保存一个班级的所有学生信息，方便开发时进行处理。
二维数组：是指数组元素的“值”是一个一维数组，如下图。
1.2 创建数组
两种方式创建数组：直接使用“[]”的方式和实例化Array对象的方式
使用数组直接量是创建数组最简单、最直观的方法，在方括号中将数组元素用逗号隔开即可
例如：
var empty = []; // 没有元素的空数组
var num = [1, 3, 5, 7, 9]; // 有 5 个数值的数组
var mixin = ['Bob', 20, true]; // 3 种不同元素的数组
调用构造函数 Array() 是创建数组的另一种方法。
// 元素值类型为字符串
var area = new Array('Beijing', 'Shanghai', 'Shenzhen');
// 元素值类型为数值型
var score = new Array(56, 68, 98, 44);
// 元素值类型为混合型
var mix = new Array(123, 'abc', null, true, undefined);
// 空数组
var arr1 = new Array(); 或 var arr2 = new Array; //等同于数组直接量 [ ]
// 指定长度的数组
var len = new Array(5); //这种方式用来创建指定长度的数组。当预先知道所需元素个数时，这种方式可以用来预先分配一个数组空间。注意，数组中没有存储值，不能认为它是包含 5个值为 undefined 元素的数组
//含有3个空储存位置
var emptyPlace1 = ['abc', , , ,'123'];
//会报语法错误
var emptyPlace2 = new Array(56, 68, , , ,98);
注意：
1.在创建数组时，最后一个元素后的逗号可以省略，也可以存在。
2.直接法“[]”与Array()对象在创建数组时的区别在于，前者可以创建含有空存储位置的数组，而后者不可以。
1.3 数组长度
每个数组都有一个 length 属性，length 属性值代表数组中元素的个数。
var empty = []; // 数组没有元素
var letters = ['a', 'b', 'c', 'd']; // 数组有 5 个元素
var arr = ['a', , , , 'b', 'c'];
console.log(empty.length); // 0
console.log(letters.length); // 5
console.log(arr.length); // 6
- 修改数组长度
- 大于数组长度
var arr1 = [];
arr1.length = 5;
console.log(arr1); // 输出结果：(5) [empty × 5]
var arr2 = [1, 2, 3];
arr2.length = 4;
console.log(arr2); // 输出结果：(4) [1, 2, 3, empty]
- 小于数组长度
var arr4 = ['hehe', 'xixi', 'gugu', 'jiujiu'];
arr4.length = 3;
console.log(arr4); // 输出结果：(3) ["hehe", "xixi", "gugu"]
1.4 访问和修改数组元素
数组创建完成后，我们可以 [ ] 操作符访问数组中的元素，数组的引用位于方括号左边。
方括号中是一个返回非负整数的任意表达式。使用该语法即可以访问数组中的元素，又可以修改数组中的元素。
var letters = ['a', 'b', 'c', 'd'];
console.log(letters[0]); // 访问索引为 0 的元素 'a'
console.log(letters[4 - 2]); // 访问索引为 2 的元素 'c'
letters[1] = 1; // 修改索引为 1 的元素 ['a', 1, 'c', 'd']
letters[1 + 2] = 3; // 修改索引为 3 的元素 ['a', 1, 'c', 3]
- 根据下标添加和修改
var arr = ['Asa','Taylor'];
arr[2] = 'Tom';
arr[3] = 'Jack';
console.log(arr);
- delete关键字只能删除数组中指定下标的元素值，删除后该元素依然会占用一个空的存储位置。
var stu = ['Tom', 'Jimmy', 'Lucy'];
console.log(stu); // 输出结果：(3) ["Tom", "Jimmy", "Lucy"]
delete stu[1]; // 删除数组中第2个元素
console.log(stu); // 输出结果：(3) ["Tom", empty, "Lucy"]
1.5 数组遍历数组
在创建完二维数组后，如何遍历二维数组中的元素，对其进行操作呢？
一维数组可以利用for、forEach、for…of进行遍历,目前先介绍for,之后我们再学习其他.
二维数组只需在遍历数组后，再次遍历数组的元素即可。
- 使用 for 循环遍历数组
var heroes = ['刘邦', '张良', '韩信', '萧何','刘备'];
var len = heroes.length;
for (var i = 0; i < len; i++) {
console.log(heroes[i])
}
1.6 二维数组
- 创建
/// 使用Array对象创建数组
var info = new Array(new Array('Tom', 13, 155), new Array('Lucy', 11, 152));
var arr = new Array(new Array, new Array);// 空二维数组
// 使用“[]”创建数组
var num = [[1, 3], [2, 4]];
var empty = [[], []]; // 空二维数组
if (arr[i] > max) { // 当前元素比最大值max大，则修改最大值
max = arr[i];
}
if (arr[i] < min) { // 当前元素比最小值min小，则修改最小值
min = arr[i];
}
1.7.2 冒泡排序
实现原理：在冒泡排序的过程中，按照要求从小到大排序或从大到小排序，不断比较数组中相邻两个元素的值，将值大的元素或最小的元素交换至右端。
1. 算法步骤
比较相邻的元素。如果第一个比第二个大，就交换他们两个。
对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对。这步做完后，最后的元素会是最大的数。
针对所有的元素重复以上的步骤，除了最后一个。
持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。
2. 动图演示
var arr = [10, 2, 5, 27, 98, 31];
console.log('待排序数组：' + arr);
for (var i = 0; i < arr.length-1; i++) { // 控制需要比较的轮数
for (var j = 0; j < arr.length - i-1; j++) { // 控制参与比较的元素
if (arr[j] > arr[j + 1]) { // 比较相邻的两个元素
[arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];//解构交换
}
}
}
console.log('排序后的数组：' + arr);
//1、两个变量值的交换---》面试题
var num1=10;
var num2=100
var temp=null; //定义一个第三方的变量
temp=num1 //temp=10
num1=num2 //num1=100
num2=temp //num2=10
//2、不使用第三方变量
num1=num1+num2; //110
num2=num1-num2; //10
num1=num1-num2; //100
//排序函数的原理？
//数组的每两项进行比较，a和b
//1、a和b比较a小于b，a和b的位置不变
//2、a和b比较a大于b，a和b的位置交换一下
//3、如果a和b相等，位置不变
1.7.3 选择排序
1. 算法步骤
首先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置。
再从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾。
重复第二步，直到所有元素均排序完毕。
2. 动图演示
//选择排序
var arr= [10, 2, 5, 27, 98, 31];
var len = arr.length;
var minIndex, temp;
for (var i = 0; i < len - 1; i++) {
minIndex = i;
for (var j = i + 1; j < len; j++) {
if (arr[j] < arr[minIndex]) { // 寻找最小的数
minIndex = j; // 将最小数的索引保存
}
}
temp = arr[i];
arr[i] = arr[minIndex];
arr[minIndex] = temp;
}
console.log('排序后的数组:'+arr);
自己总结
求最大值和次大值
<script><br /> ** // 求数组中最大值和第二大值(次大值)。**<br /> var arr = [2, 53, 12, 521, 21];<br /> var oneMaxNum = -Infinity;<br /> var twoMaxNum = -Infinity;<br /> for (var i = 0; i < arr.length; i++) {<br /> if (arr[i] > oneMaxNum) {<br /> twoMaxNum = oneMaxNum;<br /> oneMaxNum = arr[i];<br /> }<br /> else if (arr[i] > twoMaxNum) {<br /> twoMaxNum = arr[i];<br /> }<br /> }<br /> document.write("数组为" + arr + "<br>其中最大值为" + oneMaxNum + "<br>第二大值为" + twoMaxNum);<br /> </script>
冒泡排序
<script><br /> var arr = [23, 54, 12, 32, 15];<br /> for (var i = 0; i < arr.length - 1; i++) {<br /> for (var j = 0; j < arr.length - 1 - i; j++) {<br /> if (arr[j] > arr[j + 1]) {<br /> [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];<br /> }<br /> }<br /> }<br /> /* <br /> ** i = 0 i < 4 **<br />** j = 0 j < 4**<br />** arr[j] 23 < arr[j+1] 54**<br />** 23, 54, 12, 32, 15**<br />** j = 1 j < 4**<br />** arr[j] 54 > arr[j+1] 12**<br />** 23, 12, 54, 32, 15**<br />** j = 2 j < 4**<br />** arr[j] 54 > arr[j+1] 32**<br />** 23, 12, 32, 54, 15**<br />** j = 3 j < 4**<br />** arr[j] 54 > arr[j+1] 15**<br />** 23, 12, 32, 15, 54**<br />** i = 1 i < 4 **<br />** j = 0 j < 3**<br />** arr[j] 23 > arr[j+1] 12**<br />** 12, 23, 32, 15, 54**<br />** j = 1 j < 3**<br />** arr[j] 23 < arr[j+1] 32**<br />** 12, 23, 32, 15, 54**<br />** j = 2 j<3**<br />** arr[j] 32 > arr[j+1] 15**<br />** 12, 23, 15, 32, 54**<br />** **<br />** i = 2 i < 4**<br />** j = 0 j < 2**<br />** arr[j] 12 < arr[j+1] 23**<br />** 12, 23, 15, 32, 54**<br />** j = 1 j < 2**<br />** arr[j] 23 > arr[j+1] 15**<br />** 12, 15, 23, 32, 54**<br />** i = 3 i < 4**<br />** j = 0 j < 1**<br />** **<br />** arr[j] 12 < arr[j+1] 15**<br />** 12, 15, 23, 32, 54**<br /> <br /> */<br /> console.log(arr);<br /> </script>
选择排序
<script><br /> var arr = [23, 54, 12, 32, 15];<br /> for (var i = 0; i < arr.length - 1; i++) {<br /> var minIndex = i;<br /> for (var j = i + 1; j < arr.length; j++) {<br /> if (arr[j] < arr[minIndex]) {<br /> minIndex = j;<br /> }<br /> }<br /> [arr[i], arr[minIndex]] = [arr[minIndex], arr[i]];<br /> }<br /> ** /* **<br />** i = 0 i < 4**<br />** minIndex = 0**<br />** j = 1 j < 5**<br />** arr[j] 54 > arr[minIndex] 23**<br />** **<br />** j = 2 j < 5**<br />** arr[j] 12 < arr[minIndex] 23**<br />** minIndex = j 2**<br />** j = 3 j < 5**<br />** arr[j] 32 > arr[minIndex] 12**<br />** j = 4 j < 5**<br />** arr[j] 15 > arr[minIndex] 12**<br />** arr[i] 23 = arr[minIndex] 12**<br />** arr[minIndex] 12 = arr[i] 23**<br />** 12, 54, 23, 32, 15**<br />** i = 1 i < 4**<br />** minIndex = 1**<br />** j = 2 j < 5**<br />** arr[j] 23 < arr[minIndex] 54**<br />** minIndex = j 2**<br />** j = 3 j < 5**<br />** arr[j] 32 > arr[minIndex] 23**<br />** j = 4 j < 5**<br />** arr[j] 15 < arr[minIndex]23**<br />** minIndex = j 4**<br />** arr[i] 54 = arr[minIndex] 15**<br />** arr[minIndex] 15 = arr[i] 54**<br />** 12, 15, 23, 32, 54**<br />** i = 2 i < 4**<br />** minIndex = 2**<br />** j = 3 j < 5**<br />** arr[j] 32 > arr[minIndex] 23**<br />** j = 4 j < 5**<br />** arr[j] 54 > arr[minIndex] 23**<br />** arr[i] 23 = arr[minIndex] 15**<br />** arr[minIndex] 23 = arr[i] 23**<br />** 12, 15, 23, 32, 54**<br />** i = 3 i < 4**<br />** minIndex = 3**<br />** j = 4 j < 5**<br />** arr[4] 54 > arr[minIndex] 32**<br />** arr[i] 32 = arr[minIndex] 32**<br />** arr[minIndex] 32 = arr[i] 32**<br />** 12, 15, 23, 32, 54 **<br />** **<br />** */**<br /> console.log(arr);<br /> </script>
delete删除
<script><br /> var arr = [1, 2, 3, 4, 5, 6];<br /> console.log(arr);//[1, 2, 3, 4, 5, 6]<br /> **//删除元素的值，保留位置**<br /> delete arr[2];<br /> console.log(arr);//[1, 2, 空, 4, 5, 6]<br /> </script>
数组长度
<script><br /> var arr = [];<br /> arr.length = 5;<br /> console.log(arr);//5<br /> arr = [1, 2, 3, 4, 5, 6, 7];<br /> ** // 如果是空数组创建五个空元素**<br />** // 如果数组长度大于指定值，则截取掉后面的元素**<br />** // 如果数组长度小于指定值，则以空补全**<br />** // 值为0则清空数组**<br /> arr.length = 5;<br /> console.log(arr);//1,2,3,4,5<br /> // arr.length = 0;<br /> var num = 2;<br /> console.log(arr[num]);//3<br /> console.log(arr[2]);//3<br /> console.log(arr[1 > 2 ? 1 : 2]);<br /> console.log(arr);<br /> </script>
若有收获，就点个赞吧
0 人点赞
