1. 流程控制-循环

循环目的： 在实际问题中，有许多具有规律性的重复操作，因此在程序中要完成这类操作就需要重复执行某些语句

Js 中主要有三种类型的循环语句：

1. for 循环
2. while 循环
3. do...while 循环

在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句

1.1 for 循环

for 循环主要用于把某些代码循环若干次，通常跟计数有关系

语法结构：

for(初始化变量; 条件表达式; 操作表达式 ){
//循环体
}

• 初始化变量：通常被用于初始化一个计数器，该表达式可以使用 var 关键字声明新的变量，这个变量帮我们来记录次数
• 条件表达式：用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环
• 操作表达式：每次循环的最后都要执行的表达式。通常被用于更新或者递增计数器变量。当然，递减变量也是可以的

for循环的执行过程：

1. 初始化变量，初始化操作在整个 for 循环只会执行一次
2. 执行条件表达式，如果为true，则执行循环体语句，否则退出循环，循环结束
3. 执行操作表达式，此时第一轮结束
4. 第二轮开始，直接去执行条件表达式（不再初始化变量），如果为 true ，则去执行循环体语句，否则退出循环
5. 继续执行操作表达式，第二轮结束
6. 后续跟第二轮一致，直至条件表达式为假，结束整个 for 循环

例如输出10句“我要好好写代码！”：

for(var i = 1; i <= 10; i++){
console.log('我要好好写代码！');
}

1.2 双重 for 循环

很多情况下，单层 for 循环并不能满足我们的需求，此时就可以通过循环嵌套来实现

循环嵌套： 是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以再嵌套一个 for 循环，这样的 for 循环语句我们称之为双重for循环

语法结构：

for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
    for (内循环的初始; 内循环的条件; 内循环的操作表达式) {
        需执行的代码;
    }
}

• 内层循环可以看做外层循环的语句
• 内层循环执行的顺序也要遵循 for 循环的执行顺序
• 外层循环执行一次，内层循环要执行全部次数

例如打印五行五列星星：

var star = '';
for (var j = 1; j <= 3; j++) {
for (var i = 1; i <= 3; i++) {
star += '☆'
}
// 每次满 5个星星 就 加一次换行
star += '\n'
}
console.log(star);

1.3 while 循环

while 语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环

语法结构：

while (条件表达式) {
// 循环体代码
}

执行过程：

1. 先执行条件表达式，如果结果为 true，则执行循环体代码；如果为 false，则退出循环，执行后面代码
2. 执行循环体代码
3. 循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为 false 时，整个循环过程才会结束

注意：

• 使用 while 循环时一定要注意，它必须要有退出条件，否则会成为死循环
• while 循环和 for 循环的不同之处在于 while 循环可以做较为复杂的条件判断，比如判断用户名和密码

1.4 do while 循环

do... while 语句其实是 while 语句的一个变体。该循环会先执行一次代码块，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环

的语法结构：

do {
// 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);

执行过程：

1. 先执行一次循环体代码
2. 再执行条件表达式，如果结果为 true，则继续执行循环体代码，如果为 false，则退出循环，继续执行后面代码

注意： 先再执行循环体，再判断，我们会发现 do…while 循环语句至少会执行一次循环体代码

1.5 continue关键字 与 break关键字

continue 关键字： continue 关键字用于立即跳出本次循环，继续下一次循环（本次循环体中 continue 之后的代码就会少执行一次）

例如，吃5个包子，第3个有虫子，就扔掉第3个，继续吃第4个第5个包子

代码实现如下：

for (var i = 1; i <= 5; i++) {
if (i == 3) {
console.log('这个包子有虫子，扔掉');
continue; // 跳出本次循环，跳出的是第3次循环
}
console.log('我正在吃第' + i + '个包子呢');
}

break 关键字： break 关键字用于立即跳出整个循环（循环结束）

例如，吃5个包子，吃到第3个发现里面有半个虫子，其余的不吃了

其代码实现如下：

for (var i = 1; i <= 5; i++) {
if (i == 3) {
break; // 直接退出整个for 循环，跳到整个for下面的语句
}
console.log('我正在吃第' + i + '个包子呢');
}

2. JavaScript 数组

数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的方式

// 普通变量一次只能存储一个值
var num = 10;
// 数组一次可以存储多个值
var arr = [1,2,3,4,5];

2.1 创建数组

创建数组有两种方式：

• 利用 new 创建数组
• 利用数组字面量创建数组

利用 new 创建数组：

var 数组名 = new Array() ；
var arr = new Array(); // 创建一个新的空数组

注意： Array () ，A 要大写

利用数组字面量创建数组：

//1. 使用数组字面量方式创建空的数组
var 数组名 = []；
//2. 使用数组字面量方式创建带初始值的数组
var 数组名 = ['小白','小黑','大黄','瑞奇'];

• 数组的字面量是方括号 [ ]
• 声明数组并赋值称为数组的初始化
• 这种字面量方式也是我们以后使用最多的方式

数组中可以存放任意类型的数据，例如字符串，数字，布尔值等

2.2 获取数组元素

数组可以通过索引来访问、设置、修改对应的数组元素，我们可以通过“数组名[索引]”的形式来获取数组中的元素

索引 (下标) ：用来访问数组元素的序号（数组下标从 0 开始）

var arr = ['小白','小黑','大黄','瑞奇'];
索引号分别是： 0     1      2     3

例如： 获取数组中的第2个元素

// 定义数组
var arrStus = [1,2,3];
// 获取数组中的第2个元素
alert(arrStus[1]); // 2

2.3 循环遍历数组

从代码中我们可以发现，从数组中取出每一个元素时，代码是重复的，有所不一样的是索引值在递增

可以通过 for 循环索引遍历数组中的每一项

var arr = ['red','green', 'blue'];
for(var i = 0; i < arr.length; i++){
 console.log(arrStus[i]);
}

数组的长度： 使用“数组名.length”可以访问数组元素的数量（数组长度）

注意：

• 此处数组的长度是数组元素的个数 ，不要和数组的索引号混淆
• 当我们数组里面的元素个数发生了变化，这个 length 属性跟着一起变化

2.4 数组中新增元素

1. 通过修改 length 长度新增数组元素：

• 可以通过修改 length 长度来实现数组扩容的目的
• length 属性是可读写的

var arr = ['red', 'green', 'blue'];
arr.length = 5;
console.log(arr);
console.log(arr[3]);
console.log(arr[4]);

注意： 其中索引号是 3，4 的空间中只是声明了变量未给值，所以默认值就是 undefined。

2. 通过修改数组索引新增数组元素：

• 可以通过修改数组索引的方式追加数组元素
• 不能直接给数组名赋值，否则会覆盖掉以前的数据

var arr = ['red', 'green', 'blue'];
arr[3] = 'hot';
console.log(arr);

这种方式也是我们最常用的一种方式

3. JavaScript 函数

函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用

3.1 函数声明方式

1. 自定义函数方式(命名函数)： 利用函数关键字 function 自定义函数方式

// 声明定义方式
function fn() {...}
// 调用
fn(); 

• 因为有名字，所以也被称为命名函数
• 调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面

2. 函数表达式方式(匿名函数）：

// 这是函数表达式写法，匿名函数后面跟分号结束
var fn = function(){...}；
// 调用的方式，函数调用必须写到函数体下面
fn();

• 因为函数没有名字，所以也被称为匿名函数
• 这个fn 里面存储的是一个函数
• 函数表达式方式原理跟声明变量方式是一致的
• 函数调用的代码必须写到函数体后面

3.2 函数的使用

函数在使用时分为两步： 声明函数 和 调用函数

声明函数：

// 声明函数
function 函数名() {
 //函数体代码
}

function 是声明函数的关键字,必须小写

调用函数：

// 调用函数
函数名(); // 通过调用函数名来执行函数体代码

• 调用的时候一定要添加小括号
• 函数不调用，自己不执行

注意：声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码

3.3 函数的参数

形参 和 实参：

在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参，而在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参

参数的作用： 在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去

// 带参数的函数声明
function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数，用逗号分隔
 // 函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3...); 

函数形参和实参个数不匹配问题：

function sum(num1, num2) {
 console.log(num1 + num2);
}
sum(100, 200); // 形参和实参个数相等，输出正确结果
sum(100, 400, 500, 700); // 实参个数多于形参，只取到形参的个数
sum(200);

注意：在JavaScript中，形参的默认值是undefined

3.4 函数的返回值 return 语句

有的时候，我们会希望函数将值返回给调用者，此时通过使用 return 语句就可以实现

例如：声明了一个sum()函数，该函数的返回值为666

// 声明函数
function sum（）{
 ...
 return 666；
}
// 调用函数
sum(); // 此时 sum 的值就等于666，因为 return 语句会把自身后面的值返回给调用者

注意:

• 添加 return 语句之后的代码不被执行
• return 只能返回一个值。如果用逗号隔开多个值，以最后一个为准

函数都是有返回值的，如果有return 则返回 return 后面的值，如果没有return 则返回 undefined

3.5 arguments的使用

当我们不确定有多少个参数传递的时候，可以用 arguments 来获取。在 JavaScript 中，arguments 实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参

arguments展示的形式是一个伪数组，因此可以进行遍历

伪数组具有以下特点：

• 具有 length 属性
• 按索引方式储存数据
• 不具有数组的 push , pop 等方法