JS学习笔记（三）-JavaScript的流程控制、数组和函数

2021.1.13

JS学习笔记（三）

JS流程控制

流程控制就是来控制我们的代码按照什么结构顺序来执行。
流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序。

1.顺序流程控制

程序会按照代码的先后顺序，依次执行。

2.分支流程控制

• 由上到下执行代码的过程中，根据不同的条件，执行不同路径的代码，从而得到不同的结果。
• JS语言提供了两种分支结构语句
  • if语句/if-else双分支语句/if - else if-else0多分支语句/三元表达式
  • switch语句
    当要针对变量设置一系列的特定值的选项时，就可以使用switch。

    switch(表达式){
        case value1:
            执行语句1;
            break;
        case value2:
            执行语句2;
            break;
        ……
        default:
            执行语句n;
     }
    
    

    Note:表达式/变量的值和case里面value的值相匹配的时候是全等的关系(===)必须是值和数据类型一致才可以。

3.循环流程控制

循环的目的: 可以重复执行某些代码。
JS中的循环: 在JS中，主要有三种类型的循环语句:

• for循环
• while循环
• do…while循环

for循环

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

• for循环通常跟计数有关。
• for（初始化变量;条件表达式;操作表达式）{
  //循环体
  }
• 操作表达式,是每次循环最后执行的代码,经常用于我们计数器变量进行更新。通常习惯用i，index的缩写，索引号。

断点调试

断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后可以一步一步往下调试，调试过程中，可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。
断点调试可以帮我们观察程序的运行过程

• 浏览器中按F12–>sources–>找到需要调试的文件–>在程序的某一行设置断点。
• Watch:监视，通过watch可以监视变量的值的变化，非常的有用。
• F11:程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。

双重for循环

通过循环嵌套来实现。循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构。

while循环

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

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

while循环里面应该也有计数器，也有操作表达式，完成计时器的更新，防止死循环。

do while循环

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

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

do…while先执行循环体，再判断，因此至少会执行一次循环体代码。

循环中常用的关键字

continue关键字

continue关键字用于立即跳出本次循环，继续下一次循环。
只要遇见continue就退出本次循环，直接跳到下一步循环，继续执行剩余次数循环。

break关键字

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

命名规范

1.标识符命名规范

• 变量、函数的命名必须要有意义
• 变量的名称一般用名词
• 函数的名称一般用动词

2.操作符规范

• 操作符的左右两侧各保留一个空格，如i = 0（不是i=0）

3.单行注释规范

• 单行注释前面注意有个空格

4.其他规范

• 条件语句左括号左边要有空格，右括号右边要有空格

可以下载jss-css-html-format插件//快捷鍵Shift+Alt+F

循环小结

• 如果是用来计数的，三者使用基本相同
• while和do…while可以做更复杂的条件判断，比for循环更灵活一些
• while和do…while执行顺序不一样，wile先判断后执行，do…while先执行后判断
• while和do…while执行次数不一样，do…while至少会执行一次循环体，而while可能一次也不执行
• 实际工作中，我们更经常用for循环。

JS数组

数组的概念

• 可以把一组相关的数据一起存放，并提供方便的访问（获取）方式。
• 数组是指一组数据的集合，其中的每个数据称作元素，在数组中可以存放任意类型的元素（如：字符串，数字，布尔值等）。
• 数组是一种将一组数据存储在单个变量名下的优雅方式。

数组的创建

JS中创建数组有两种方式：

• 利用new创建数组

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

  暂且先了解，等学完对象再回来看。

• 利用数组字面量创建数组（最常用）
  数字是number型的字面量，字符串是字符型的字面量。
  同理，方括号[]是数组的字面量。
  声明数组并赋值称为数组的初始化。

  //1.使用数组字面量方式创建空的数组
  var 数组名 = [];
  //2.使用数组字面量方式创建带有初始值的数组
  var 数组名 = [‘小白’,‘小黑’,‘小黄’,‘小蓝’];//数组里面的元素要用逗号分隔开

获取数组元素

数组的索引

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

• 我们可以通过数组名[索引]的形式来获取数组中的元素。
• 这里的访问就是获取得到的意思。

数组的遍历

遍历：就是把数组中的每个元素从头到尾都访问一次。利用for循环遍历。
数组的长度：使用"数组名.length"可以访问数组元素的数量（数组长度）。

Note:利用console.log()想要输出多个变量，用逗号分隔即可。

数组中新增元素

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

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

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

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

JS函数

函数的概念

函数：就是封装了一段可被重复调用执行的代码块。

函数的使用

函数的使用分为两步:声明函数和调用函数。

1.声明函数

function 函数名(){
  //函数体
}

• function是声明函数的关键字。
• 函数是为了做某件事情,实现某个功能，函数名一般是动词。
• 函数不调用，自己不执行。

2.调用函数

函数名();

3.函数的封装

函数的封装是把一个或者多个功能通过函数的方式封装起来,对外只提供一个简单的函数接口。

函数的参数

1.形参和实参

我们可以利用函数的参数实现执行函数得到不同的结果

function 函数名(形参1,形参2,...){

}
函数名(实参1,实参2,...);

• 在声明函数的小括号里面是形参（形式上的参数）
• 在函数调用的小括号里面是实参（实际的参数）
• 形参类似于一个变量，是用来接受实参的//隐含 形参=实参的赋值代码。
• 参数的作用:在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去。
• 形参可以看作是不用声明的变量。

2.函数形参实参个数不匹配问题

• 如果实参的个数多于形参的个数，会取到形参的个数。
• 如果实参的个数小于形参的个数，多余的形参定义为undefined，最终的结果可能为NaN。
• 建议：我们尽量让实参的个数和形参相匹配。

函数的返回值

return语句

function 函数名(){
  return 需要返回的结果;
}
函数名();

• 函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名()。
• 只要函数遇到return就把后面的结果返回给函数的调用者-函数名()=return后面的结果
• 在实际开发中我们常用一个变量来接受函数返回的结果。

Notes:
1.return中止函数，return后面的代码不会被执行。
2.如果return多个值，用逗号隔开，返回的结果是最后一个值。
3.return的值可以是一个数组。
4.如果函数没有return，则返回undefined。

break，continue，return的区别

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

arguments的使用

当我们不确定有多少个参数传递的时候，可以用arguments来获取。
在JavaScript中，arguments实际上它是当前函数的一个内置对象。
所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。
只有函数才有arguments对象。
可以解决诸如任意个数的数求最大值的问题

//arguments的使用
function fn(){
  console.log(arguments);//里面存储了所有传递过来的实参
}
fn(1,2,3);

arguments展示形式是一个伪数组，因此可以遍历。
伪数组具有一下特点：

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

函数的两种声明方式

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

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

var 变量名=function(){};
//类似于定义变量如：var num=10，只不过这里的数字变成了函数
var fun=function(){
  console.log('我是函数表达式');
}
fun();//fun是变量名，不是函数名，这个函数没有名字。

• fun是变量名，不是函数名
• 函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值，而函数表达式里面存的式函数
• 函数表达式也可以进行传递参数