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是变量名,不是函数名
- 函数表达式声明方式跟声明变量差不多,只不过变量里面存的是值,而函数表达式里面存的式函数
- 函数表达式也可以进行传递参数