JavaScript基础——第八节：数组（数组，冒泡排序）
文章目录
- 学习目标
- 数组
-
- 1. 为什么要数组？
- 2. 数组的基本使用
-
- 2.1 声明语法
- 2.2 取值语法
- 2.3 一些术语：
- 2.4 遍历数组
- 2.5 案例：数组求和
-
- 求数组 [2,6,1,7, 4] 里面所有元素的和以及平均值
- 2.6 案例：数组求最大值和最小值
- 2.7 案例：数组转换为分割字符串
- 3. 操作数组
-
- 3.1 数组增加新的数据
- 3.2 通过修改length长度新增数组元素
- 3.3 新增数组元素，修改索引号，追加数组元素
- 3.4 案例：数组新增元素
- 3.5 总结：
- 3.6 案例：数组筛选
- 3.7 案例：删除指定数组元素
- 3.8 案例：翻转数组
- 4. 数组排序（冒泡排序)
学习目标
- 能够知道为什么要有数组
- 能够创建数组
- 能够获取数组中的元素
- 能够对数组进行遍历
- 能够给数组新增一个元素
- 能够独立完成冒泡排序的案例
数组
数组(Array)是一种可以按顺序保存数据的数据类型。
数组(Array):就是一组数据的集合，存储在单个变量下的优雅方式
1. 为什么要数组？
思考：
- 如果我想保存一个班里5个人的姓名怎么办？
- 如果有多个数据可以用数组保存起来
2. 数组的基本使用
目标：能够声明数组并且能够获取里面的数据
2.1 声明语法
-
数组的字面量是方括号[]
-
声明数组并赋值称为数组的初始化
-
这种字面量方式也是我们以后最多使用的方式
-
数组是按顺序保存，所以每个数据都有自己的编号
-
计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推
-
在数组中，数据的编号也叫索引或下标
-
**索引(下标)**∶用来访问数组元素的序号(数组下标从0开始)。
-
数组可以存储任意类型的数据
2.2 取值语法
-
通过下标取数据
-
取出来是什么类型的，就根据这种类型特点来访问
-
数组可以通过索引来访问、设置、修改对应的数组元素，我们可以通过“数组名[ 索引 ]”的形式来获取数组中的元素。
-
这里的访问就是获取得到的意思
2.3 一些术语：
- 元素：数组中保存的每个数据都叫数组元素
- 下标：数组中数据的编号
- 长度：数组中数据的个数，通过数组的length属性获得
2.4 遍历数组
问:怎么把数组里面的元素全部取出来?
规律:
从代码中我们可以发现，从数组中取出每一个元素时，代码是重复的，有所不一样的是索引值在递增
笞案就是循环
遍历:就是把数组中的每个元素从头到尾都访问一次（类似我们每天早上学生的点名)。
So:用循环把数组中每个元素都访问到,一般会用for循环遍历
1．因为我们的数组索引号从0开始，所以 i 必须从 0 开始 i< 3
2． for里面的 i 是 计数器 ， 当索引号来用；for里面的数组元素是怎么写的？ arr[i] 是数组元素第i个数组元素
3. 使用“数组名.length”可以访问数组元素的数量（数组长度)。
4. 数组的长度是元素个数，不要跟索引号混淆
5. arr.length动态监测数组元素的个数
2.5 案例：数组求和
求数组 [2,6,1,7, 4] 里面所有元素的和以及平均值
分析：
- 声明一个求和变量 sum。
- 遍历这个数组，把里面每个数组元素加到 sum 里面。
- 用求和变量 sum 除以数组的长度就可以得到数组的平均值。
<script>
// 数组求和案例
var arr = [2, 6, 1, 7, 4]
// 求和变量
var sum = 0
// 求平均值变量
var average = 0
// 遍历数组
for (var i = 0; i < arr.length; i++) {
// console.log(arr[i])
// sum = sum + arr[i]
// arr[i] 就是数组里面的每个值 比如 2， 3
sum += arr[i]
}
average = sum / arr.length
document.write(`这个同学的总分是: ${sum}, 平均分是:${average}`)
script>
2.6 案例：数组求最大值和最小值
题目：求数组 [2,6,1,77,52,25,7] 中的最大值
分析：
①：声明一个保存最大元素的变量 max。
②：默认最大值可以取数组中的第一个元素。
③：遍历这个数组，把里面每个数组元素和 max 相比较。
④：如果这个数组元素大于max 就把这个数组元素存到 max 里面，否则继续下一轮比较。
⑤：最后输出这个 max
<script>
var arr = [2, 6, 1, 77, 52, 25, 7]
var max = arr[0]
// console.log(max)
// 循环数组
for (var i = 1; i < arr.length; i++) {
// max 小于后面的值，就需要把值给我，这样保证max里面放的最大值
if (max < arr[i]) {
max = arr[i]
}
}
console.log(max)
script>
2.7 案例：数组转换为分割字符串
要求：将数组[‘red’,‘green’,‘blue’,‘pink’]转换为字符串，并且用|或其他符号分割
输出："red|green|blue|pink|’
案例分析：
- 需要一个新变量，用于存放转换完的字符str。
- 遍历原来的数组，分别把里面数据取出来，加到字符串里面。
- 同时在后面多加一个分隔符。
<script>
var arr =['red','green','blue','pink'];
var str ='';
for (var i =0;i<arr.length;i++){
str +=arr[i] +'|';
}
console.log(str);
script>
3. 操作数组
数组本质是数据集合, 操作数据无非就是 增 删 改 查 语法：
3.1 数组增加新的数据
目标：掌握利用push向数组添加元素(数据)
- 数组.push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度 (重点)
- arr.unshift(新增的内容) 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度
语法：
例如：
3.2 通过修改length长度新增数组元素
- 可以通过修改length长度来实现数组扩容的目的
- length属性是可读写的
- 其中索引号是4，5，6的空间没有给值，就是声明变量未给值，默认值就是undefined。
3.3 新增数组元素，修改索引号，追加数组元素
<script>
var arr =['red','green','blue'];
arr[3]='pink';
console.log(arr);
arr[4]='hot';
console.log(arr);
arr[0]='yellow'; //这里是替换原来的数组元素
console,log(arr);
arr='有点意思';
console.log(arr);//不要直接给 数组名赋值 否则里面的数组元素都没有了
script>
- 可以通过修改数组索引的方式追加数组元素
- 不能直接给数组名赋值，否则会覆盖掉以前的数据
3.4 案例：数组新增元素
新建一个数组，里面存放10个整数( 1~10 )
- 使用循环来追加数组。
- 声明一个空数组arr。
- 循环中的计数器 i 可以作为数组元素存入。
- 由于数组的索引号是从0开始的，因此计数器从0开始更合适，存入的数组元素要+1。
分析：
<script>
var arr=[];
for(var i=0;i<10; i++){
arr[i]=i+1;
}
console.log(arr);
script>
3.5 总结：
- 想要数组末尾增加数据元素利用那个方法？
- arr.push()
- 可以添加一个或者多个数组元素
- 返回的是数组长度
- 想要数组开头增加数据元素利用那个方法？
- arr.unshift()
- 可以添加一个或者多个数组元素
- 返回的是数组长度
- 重点记住那个？
- arr.push()
3.6 案例：数组筛选
题目：
将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组
分析：
①：声明一个新的数组，用于存放新数据newArr
②：遍历原来的旧数组， 找出大于等于 10 的元素
③：依次追加给新数组 newArr
方法一：
<script>
var arr=[2,0,6,1,77,0,52,0,25,7];
var newArr = [];
var j=0;
for(var i=0;i<arr.length; i++){
if(arr[i]>10){
//新数组索引号应该从0开始，依次递增
newArr[j]=arr[i];
j++;
}
}
console.log(newArr);
script>
方法二：
<script>
var arr=[2,0,6,1,77,0,52,0,25,7];
var newArr = [];
//刚开始newArr.length 就是0
for(var i=0;i<arr.length; i++){
if(arr[i]>10){
//新数组索引号应该从0开始，依次递增
newArr[newArr.length]=arr[i];
}
}
console.log(newArr);
script>
3.7 案例：删除指定数组元素
要求∶
将数组[2,0,6,1,77,0,52,0,25,7]中的0去掉后，形成一个不包含0的新数组。
分析：
- 需要一个新数组用于存放筛选之后的数据。
- 遍历原来的数组，把不是0的数据添加到新数组里面(此时要注意采用数组名+索引的格式接收数据)。
- 新数组里面的个数，用length不断累加。
<script>
var arr=[2,0,6,1,77,0,52,0,25,7];
var newArr = [];
//刚开始newArr.length 就是0
for(var i=0;i<arr.length; i++){
if(arr[i]!=10){
//新数组索引号应该从0开始，依次递增
newArr[newArr.length]=arr[i];
}
}
console.log(newArr);
script>
3.8 案例：翻转数组
要求:
将数组[‘red’, ‘green’, ‘blue’, ‘pink’ , ‘purple’]的内容反过来存放。
输出:['purple" , 'pink", ‘blue’, 'green" , ‘red’]
1、声明一个新数组 newArr
2、把旧数组索引号第4个取过来（arr.length - 1)，给新数组索引号第0个元素(newArr.length)
3、我们采取递减的方式 i–
4. 数组排序（冒泡排序)
我们先复习下如何把2个变量交换数据
冒泡排序︰是一种算法，把一系列的数据按照一定的顺序进行排列显示(从小到大或从大到小)。
冒泡排序是一种简单的排序算法。它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序措误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。这个算法的名字由来是因为越小的元素会经由交换慢慢′浮"到数列的顶端。
例如，我们可以将数组[5,4,3,2,1]中的元素按照从小到大的顺序排序，输出:1，2，3，4，5
<script>
var arr = [2, 6, 4, 3, 5, 1]
// 1. 外层循环控制 趟数 循环 4次 arr.length - 1
for (var i = 0; i < arr.length - 1; i++) {
// 2. 里层的循环 控制 一趟交换几次 arr.length - i - 1 次序
for (var j = 0; j < arr.length - i - 1; j++) {
// 交换两个变量
// arr[j] arr[j + 1]
if (arr[j] > arr[j + 1]) {
var temp = arr[j]
arr[j] = arr[j + 1]
arr[j + 1] = temp
}
}
}
console.log(arr)
// 复习变量
// let num1 = 10
// let num2 = 20
// let temp = num1
// num1 = num2
// num2 = temp
script>