JavaScript入门——基础知识（4）

一、for语句

1.1 for语句的基本使用

1.1.1 for循环语法

作用：重复执行代码

好处：把声明起始值、循环条件、变化值写到一起，让人一目了然，它是最常使用的循环形式

for(变量起始值;终止条件;变量变化量){
    // 循环体
}

 循环练习

1.利用for循环输出1~100岁

2.求1-100之间所有的偶数和

3.页面中打印5个小星星

 4.循环数组

请将数组 ['马超','赵云','张飞','关羽','黄忠'] 依次打印出来

 1.1.2 退出循环

• continue退出本次循环，一般用于排除或者跳过某一个选项的时候，可以使用continue
• break退出整个for循环，一般用于结果已经得到，后续的循环不需要的时候可以使用

了解：

1. while(true)来构造“无限”循环，需要使用break退出循环。
2. for(;;)也可以来构造“无限”循环，同样需要使用break退出循环。

for循环和while循环有什么区别呢：

• 当如果明确了循环的次数时候推荐使用for循环
• 当不明确循环的次数的时候推荐使用while循环

1.2 循环嵌套

for循环嵌套

一个循环里再套一个循环，一般用在for循环里

for(外部声明记录循环次数的变量;循环条件;变化值){
    for(内部声明记录循环次数的变量;循环条件;变化值){
        循环体
    }
}

 练习 打印5行5列的星星

页面中打印出五行五列的星星

分析：

①利用双重for循环来做

②外层循环控制打印行，内层循环控制每行打印几个（列）

1.2.1 倒三角

分析：

①利用双重for循环来做

②外层循环控制打印行，内层循环控制每行打印几个（列）

③内层循环的个数跟第几行是一一对应的

1.2.2 九九乘法表

需求：如图所示

分析：

①：只需要把刚才倒三角形星星做改动

②：★ 换成 1x1=2 格式

二、数组

2.1 数组是什么？

数组：（Array）是一种可以按照顺序保存数据的数据类型

2.2 数组的基本使用

2.2.1 创建数组

let 数组名 = [数据1，数据2，……，数据n]
let arr = new Array(数据1，数据2，…数据n)

 let names = ['小明','小刚','小红','小丽','小米']

• 数组是按顺序保存，所以每个数据都有自己的编号
• 计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推
• 在数组中，数据的编号也叫索引和下标
• 数组可以存储任意类型的数据

// 取值语法
数组名[下标]

let names = ['小明','小刚','小红','小丽','小米']

names[0] // 小明

names[1] // 小刚

• 通过下标取数据
• 取出来是什么类型的，就根据这种类型特点来访问

• 元素：数组中保存的每个数据都叫数组元素
• 下标：数组中数据的编号
• 长度：数据中数据的个数，通过数组的length属性获得

 2.2.2 遍历数组（重点）

用循环把数组中每个元素都访问到，一般会用for循环遍历

语法：

for(let i = 0; i < 数组名.length; i++){
    数组名[i]
}

例： 

2.2.3 数据单元值类型

数组做为数据的集合，它的单元值可以是任意数据类型

2.2.4 数组长度属性

2.2.5 数组求和 

需求：求数组[2,6,1,7,4]里面所有元素的和以及平均值

分析：

①：声明一个求和变量sum

②：遍历这个数组，把里面每个数组元素加到sum里面

③：用求和变量sum除以数组的长度就可以得到数组的平均值

 2.2.6 数组求最大值和最小值

需求：求数组[2,6,1,77,52,25,7]中的最大值

分析：

①：声明一个保存最大元素的变量max。

②：默认最大值可以取数组中的第一个元素。

③：遍历这个数组，把里面每个数组元素和max相比较。

④：如果这个数组元素大于max就把这个数组元素存到max里面，否则继续下一轮比较。

⑤：最后输出这个max

2.3 操作数组

查看数组：数组[下标]

更改数组：数组[下标] = 新值

数组做为对象数据类型，不但有length属性可以使用，还提供了许多方法：

1. 数组.push()方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度
2. 数组.unshift()方法将一个或多个元素添加到数组的开头，并返回该数组的新长度
3. 数组.pop()删除最后一个元素，并返回该元素的值，每次只能删除一个
4. 数组.shift()删除第一个元素，每次只能删除一个
5. 数组.splice()动态删除任意元素
   1. 语法：arr.splice(start,deleteCount)
   2. start起始位置：指定修改的开始位置（从0计数）
   3. deleteCount：表示要移除的数组元素的个数，可选的。如果省略则默认从指定的起始位置删除到最后

使用以上方法时，都是直接在原数组上进行操作，即成功调任何一个方法，原数组都跟着发生相应的改变。并且在添加或删除单元时length并不会发生错乱。

2.4 数组筛选

需求：将数组[2,0,6,1,77,0,52,0,25,7]中大于等于10的元素选出来，放入新数组

分析：

①：声明一个新的数组用于存放新数据newArr

②：遍历原来的旧数组，找出大于等于10的元素

③：依次追加给新数组newArr

需求：将数组[2,0,6,1,77,0,52,0,25,7]中的0去掉后，形成一个不包含0的新数组

分析：

①：声明一个新的数组用于存放新数据newArr

②：遍历原来的旧数组，找出不等于0的元素

③：依次追加给新数组newArr

三、综合案例

根据数据生成柱形图

需求：用户输入四个季度的数据，可以生成柱形图

分析：

①：需要输入4次，所以可以把4个数据放到一个数组里面

        利用循环，弹出4次框，同时存到数组里面

②：遍历该数组，根据数据生成4个柱形图，渲染打印到页面中

        柱形图就是div盒子，设置宽度固定，高度是用户输入的数据

        div里面包含显示的数字和第n季度

DOCTYPE html>
    
    
    
    
    

 四、冒泡排序

冒泡排序是一种简单的排序算法。

它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。

这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。

比如数组[2,3,1,4,5]经过排序成为了[1,2,3,4,5]或者[5,4,3,2,1]

 五、数组排序

数组.sort()方法可以排序