Javascript（三）：循环、数组

循环

循环目的

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

for循环

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

1.语法结构

for循环主要用于把某些代码循环若干次，通常跟计数有关系。其语法结构如下：

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

2.断点调试

断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试

过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。

断点调试可以帮我们观察程序的运行过程

浏览器中按F12–>sources–>找到需要调试的文件–>在程序的某一行设置断点

Watch:监视，通过watch可以监视变量的值的变化，非常的常用。

F11:程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。

代码调试的能力非常重要，只有学会了代码调试，才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试，

知识点花点功夫肯定学的会，但是代码调试这个东西，自己不去练，永远都学不会。

今天学的代码调试非常的简单，只要求同学们记住代码调试的这几个按钮的作用即可，后面还会学到很多的代码调试技巧。

3.循环嵌套（双重for）

很多情况下，单层for循环并不能满足我们的需求，比如我们要打印一个5行5列的图形、打印一个倒
直角三角形等，此时就可以通过循环嵌套来实现。

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

4.for循环小结

①for循环可以重复执行某些相同代码
②for循环可以重复执行些许不同的代码，因为我们有计数器
③for循环可以重复执行某些操作，比如算术运算符加法操作
④随着需求增加，双重for循环可以做更多、更好看的效果
⑤双重for循环，外层循环一次，内层for循环全部执行
⑥for循环是循环条件和数字直接相关的循环
⑦分析要比写代码更重要
⑧一些核心算法想不到，但是要学会，分析它执行过程
⑨举一反三，自己经常总结，做一些相似的案例

while循环

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

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

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

do while循环

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

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

执行思路：
①先执行一次循环体代码
②再执行条件表达式，如果结果为true,则继续执行循环体代码，如果为false,则退出循环，继续执行后面代码
注意：先再执行循环体，再判断，我们会发现do…while循环语句至少会执行一次循环体代码

循环小结

·JS中循环有for、while、do while
·三个循环很多情况下都可以相互替代使用
·如果是用来计次数，跟数字相关的，三者使用基本相同，但是我们更喜欢用for
·while和do…while可以做更复杂的判断条件，比for循环灵活一些
·while和do…while执行顺序不一样，while先判断后执行，do…while先执行一次，再判断执行
·while和do…while执行次数不一样，do…while至少会执行一次循环体，而while可能一次也不执行
实际工作中，我们更常用for循环语句，它写法更简洁直观，所以这个要重点学习

数组

1.数组概念

问：什么是数组呢？

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

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

2. 创建数组

JS中创建数组有两种方式：
①利用new创建数组
②利用数组字面量创建数组

2.1利用new创建数组

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

·这种方式暂且了解，等学完对象再看
·注意Array0,A要大写

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

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

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

2.3数组里面的元素类型

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

var arrstus=['小白',12,true,28.9];

3.获取数组元素

3.1数组的索引

索引（下标）:用来访问数组元素的序号（数组下标从0开始）。
var arr = [‘小白’,‘小黑’,‘大黄’,‘瑞奇’];
索引号： 0 1 2 3
数组可以通过索引来访问、设置、修改对应的数组元素，我们可以通过**“数组名[索引]”的形式来获取数组中的
元素。
这里的访问**就是获取得到的意思

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

3.2遍历数组

问：数组中的每一项我们怎么取出来？

答：可以通过**“数组名[索引号]”**的方式一项项的取出来。

var arr = ['red','green','blue'];
console.log(arr[0])//red
console.log(arr[1])//green
console.log(arr[2])//blue

问：怎么把数组里面的元素全部取出来？

规律：

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

答案就是循环

**遍历：**就是把数组中的每个元素从头到尾都访问一次（类似我们每天早上学生的点名）。

3.3数组的长度

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

4.新增数组中的元素

可以通过修改length长度以及索引号增加数组元素

4.1通过修改length长度新增数组元素

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

var arr = ['red','green','blue','pink'];
arr.length = 7 ;
console . log ( arr ) ; A
console.log(arr[4]);
console.log(arr[5]);
console.log(arr[6]);

其中索引号是4,5,6的空间没有给值，就是声明变量未给值，默认值就是undefined。

5.2通过修改数组索引新增数组元素

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

var arr = ['red','green','blue','pink'];
arr[4]='hotpink';
console.log(arr);

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

函数

1.函数的概念

在JS里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。
虽然for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用JS中的函数。
函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

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

2.调用函数

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

①调用的时候千万不要忘记添加小括号

②口诀：函数不调用，自己不执行。

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

3.函数的封装

·函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口
·简单理解：封装类似于将电脑配件整合组装到机箱中（类似快递打包）

4.函数的参数

4.1形参和实参

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

4.2形参和实参个数匹配的问题

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

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

4.3小结

①函数可以带参数也可以不带参数
②声明函数的时候，函数名括号里面的是形参，形参的默认值为undefined
③调用函数的时候，函数名括号里面的是实参
④多个参数中间用逗号分隔
⑤形参的个数可以和实参个数不匹配，但是结果不可预计，我们尽量要匹配

5.函数的返回值

5.1 return 语句

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

5.2 return 终止函数

return语句之后的代码不被执行。

function add (num1, num2){
    //函数体
    return num1+num2;//注意：return后的代码不执行
    alert('我不会被执行，因为前面有return');
}
var resNum=add(21,6);//调用函数，传入两个实参，并通过resNum接收函数返回值
alert(resNum);//27

5.3 return的返回值

return只能返回一个值。如果用逗号隔开多个值，以最后一个为准。

5.4函数没有return 返回undefined

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

5.5break，continue，return的区别

·break:结束当前的循环体（如for、while)
·continue:跳出本次循环，继续执行下次循环（如for、while)
·return:不仅可以退出循环，还能够返回return语句中的值，同时还可以结束当前的函数体内的代码

6.arguments的使用

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

arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：
①具有length属性
②按索引方式储存数据
③不具有数组的push,pop等方法

7.函数可以调用另外一个函数

因为每个函数都是独立的代码块，用于完成特殊任务，因此经常会用到函数相互调用的情况。

8.函数的两种声明方式

1.利用函数关键字自定义函数（命名函数）

function fn(){

}
fn()

2.函数表达式（匿名函数）

//var变量名=function(){};
var fun=function(aru){
    console.log('我是函数表达式');
    console.log(aru);
}
fun('pink老师');
//(1)fun是变量名 不是函数名
//(2)函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值而函数表达式里面存的是函数
//(3)函数表达式也可以进行传递参数