第六章 JavaScript流程控制-循环
6.1 循环
6.1.1 循环目的
- 在实际问题中,有许多具有规律性的重复操作,因此在程序中要完成这类操作就需要重复执行某些语句
6.1.2 JavaScript中的循环
在JavaScript中,主要有三种类型的循环语句:
- for循环
- while循环
- do…while循环
6.2 for循环
在程序中,;一组被重复执行的语句被称之为循环体,能否继续重复执行,取决于循环的终止条件。由循环体及循环的终止条件组成的语句,被称之为循环语句
6.2.1 语法结构
for循环主要用于把某些代码循环若干次,通常跟计数有关系。其语法结构如下:
for(初始化变量;条件表达式;操作表达式){
//循环体
}
6.2.2 断点调试
断点调试是指自己在程序中的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的代码行即显示错误,停下。
断点调试可以帮我们观察程序的运行过程
浏览器中按F12–>sources–>找到需要调试的文件–>在程序的某一行设置断点
Watch:监视,通过watch可以监视变量的值的变化,非常的常用
F11:程序单步执行,让程序一行一行的执行,这个时候,观察watch中变量的值的变化。
6.2.3 for循环重复不相同的代码
for循环还可以重复不同的代码,这主要是因为使用了计数器,计数器在每次循环过程中都会有变化。
6.2.4 for循环重复某些相同的操作
for循环因为有了计数器的存在,我们还可以重复的执行某些操作,比如做一些算数运算符。
6.3 双重for循环
6.3.1双重for循环概述
很多情况下,单层for循环并不能满足我们的需求,比如我们要打印一个5行5列的图形、打印一个倒直角三角形等、此时就可以通过循环嵌套来实现。
循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构,例如在for循环语句中,可以在嵌套一个for循环、这样的循环语句我们称为双重for循环。
//1.双重for循环 语法结构
for(外层的初始化变量;外层的条件表达式;外层的操作表达式){
for(里层的初始化变量;里层的条件表达式;里层的操作表达式){
//执行语句;
}
}
//2.外层循环一次,里面循环执行全部
6.4 while循环
while语句可以在条件表达式为真的前提下,循环执行指定的一段代码,直到表达式不为真时结束循环。
while语句的语法结构如下:
while(条件表达式){
//循环体代码
}
执行思路:
- 先执行体条件表达式,如果结果为true,则执行循环体代码;如果为false,则退出循环,执行后面代码
- 执行循环体代码
- 循环体代码执行完毕之后,程序会继续判断执行条件表达式如条件仍未true,则会继续执行循环体,直到循环条件为false时,整个循环过程才会结束
6.5 do while循环
do…while语句其实是while语句的一个变体。该循环会先执行一次代码块,然后对条件表达式进行判断,如果条件为真,就会重复执行循环体,否则退出循环。
do…while语句的语法结构如下:
do{
//循环体代码-条件表达式为true时重复执行循环体代码
}while(条件表达式);
执行思路:
- 先执行一次循环体代码
- 在执行条件表达式,如果结果为true,则继续执行循环体代码,如果为false,则推出循环,继续执行后面代码
注意:先再执行循环体,在判断,会发现do…while循环语句至少会执行一次循环体代码
6.6 continue break
6.6.1 continue关键字
continue关键字用于立即跳出本次循环,继续下一次循环(本次循环体中continue之后的代码就会少执行一次)
6.6.2 break关键字
break关键字用于立即跳出整个循环(循环结束)。
第七章 JavaScript数组
7.1 数组的概念
数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一种将一种数据存储在单个变量名下的优雅方式。
7.2 创建数组
7.2.1 数组的创建方式
JavaScript中创建数组有两种方式:
- 利用new创建数组
- 利用数组字面量创建数组
7.2.2 利用new创建数组
var 数组名 = new Array();
var arr = new Array(); //创建一个新的空数组
7.2.3利用数组字面量创建数组
//1. 使用数组字面量方式创建空的数组
var 数组名=[];
//2. 使用数组字面量方式创建带初始值的数组
var 数组名=['小白','小黑','张三','李四'];
- 数组的字面量时方括号[]
- 声明数组并赋值称为数组的初始化
7.2.4 数组元素的类型
数组中可以存放任意类型的数据,例如 字符串、数字、布尔值等。
var arrStus=['小白',12,true,28.9];
7.3 获取数组中的元素
7.3.1数组的索引
索引(下标):用来访问数组元素的序号(数组下标从0开始)。
var arr=['小白','小黑','大黄','张三']
索引号: 0 1 2 3
数组可以通过索引来访问、设置、修改对应的数组元素、我们可以通过"数组名[索引]"的形式来获取数组中的元素。
这里的访问就是获取得到的意思
// 定义数组
var arrStus=[1,2,3];
//获取数组中的第二个元素
alert(arrStus[1]);
7.4 遍历数组
7.4.1 数组的长度
使用“数组名.length”可以访问数组元素的数量(数组长度)。
注意:
1. 数组的长度是元素的个数 不要跟索引号混淆
2. arr.lengrh动态监测数组元素的个数
7.5 数组中新增元素
7.5.1 通过修改length长度新增数组元素
- 可以通过修改length长度来实现数组扩容的目的
- length属性是可读写的
var arr=['red','green','blue','pink'];
arr.length=7;
console.log(arr[4]);
console.log(arr[5]);
console.log(arr[6]);
其中索引号是4,5,6的空间没有给值,就是声明变量未给值,默认值就是undefined。
7.5.2 通过修改数组索引新增数组元素
- 可以通过修改数组索引的方式追加数组元素
- 不能直接给数组赋值,否则会覆盖掉以前的数据
var arr=['red','green','blue','pink'];
arr[4]='hoatpink';
console.log(arr);
这种方式也是我们最常用的一种方式。
第八章 JavaScript函数
8.1 函数的概念
在JavaScript里面,可能会定义非常多的相同代码或者功能相似的代码,这些代码可能需要大量重复使用。
虽然for循环语句也能实现一些简单的重复操作,但是比较具有局限性,此时我们就可以使用JavaScript中的函数。
函数:就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。
8.2 函数的使用
函数在使用时分为两步:声明函数和调用函数。
8.2.1 声明函数
//声明函数
function 函数名(){
//函数体代码
}
- function是声明函数的关键字,必须小写
- 由于函数一般是为了实现某个功能才定义的,所以通常我们将函数名命名为动词,比如getSum
8.2.2 调用函数
// 调用函数
函数名();//通过调用函数名来执行函数体代码
- 调用的时候千万不要忘记添加小括号
- 口诀:函数不调用,自己不执行。
注意:声明函数本身并不会执行代码,只有调用函数时才会执行函数体代码。
8.2.3 函数的封装
- 函数的封装是把一个或者多个功能通过函数的方式封装起来,对外只提供一个简单的函数接口
- 简单理解:封装类似于将电脑配件整合组装到机箱中(类似快递打包)
8.3 函数的参数
8.3.1 形参和实参
在声明函数时,可以在函数名称后面的小括号中添加一些参数,这些参数被称为形参,而在调用该函数时,同样也需要传递相应的参数,这些参数被称为实参。
参数 | 说明 |
---|---|
形参 | 形式上的参数 函数定义的时候传递的参数 当前并不知道是什么 |
实参 | 实际上的参数 函数调用的时候传递的参数 实参是传递给形参的 |
参数的作用:在函数内部某些值不能固定,我们可以通过参数在调用函数时传递不同的值进去。 |
8.3.2 利用函数求任意两个数的和
//1.利用函数求任意两个数的和
function getSum(num1, num2) {
console.log(num1 + num2);
}
getSum(1, 3);
getSum(3, 8);
//2.利用函数求任意两个数之间的和
function getSum(start, end) {
var sum = 0;
for (var i = start; i <= end; i++) {
sum += i;
}
console.log(sum);
}
getSum(1, 100);
getSum(3, 10);
/*
注意:
1.多个参数之间用逗号隔开
2.形参可以看作是不用声明的变量
*/
8.3.4 函数形参和实参个数不匹配的问题
参数个数 | 说明 |
---|---|
实参个数等于形参个数 | 输出正确结果 |
实参个数多于形参个数 | 只取到形参的个数 |
实参个数小于形参个数 | 多的形参定义为undefined,结果为NaN |
function getSum(num1, num2) {
console.log(num1 + num2);
}
getSum(100,200); //输出正确结果
getSum(100,400,500,700); //只取到形参的个数
getSum(200); //NaN
注意:在JavaScript中,形参的默认值是undefined。
8.4 函数的返回值
8.4.1 return语句
有的时候,我们会希望函数将值返回给调用者,此时通过使用return语句就可以实现。
8.4.2 return终止函数
return语句之后的代码不被执行
8.4.3 return的返回值
return只能返回一个值。如果用逗号隔开多个值,一最后一个为准
8.4.4 函数没有return返回undefined
函数都是有返回值的
- 如果有return则返回return后面的值
- 如果没有return则返回undefined
8.4.5 break,continue,return的区别
- break:结束当前的循环体(如for、while)
- continue:跳出本次循环,继续执行下次循环(如for、while)
- return:不仅可以退出循环,还能够返回return语句中的值,同时话可以结束当前的函数体内的代码
8.5 argument的使用
当我们不确定有多少个参数传递的时候,可以用arguments来获取。在JavaScript中,arguments实际上他是当前函数的一个内置对象。所有函数都内置了一个arguments对象,arguments对象中存储了传递的所有参数。
arguments展示形式是一个伪数组,因此可以进行遍历。为数组具有一下特点:
- 具有length属性
- 按索引方式储存数据
- 不具有数组的push,pop等方法
第九章 JavaScript作用域
9.1 作用域
9.1.1 作用于概述
通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。
9.2 变量的作用域
9.2.1变量作用域的分类
在JavaScript中,根据作用域的不同,变量可以分为两种:
- 全局变量
- 局部变量
9.2.2 全局变量
在全局作用域下声明的变量叫做全局变量(在函数外部定义的变量)
- 全局变量在代码的任何位置都可以使用
- 在全局作用域下var声明的变量是全局变量
- 特殊情况下,在函数内不使用var声明的变量也是全局变量
9.2.3 局部变量
- 局部变量只能在该函数内部使用
- 在函数内部var声明的变量是局部变量
- 函数的形参实际上就是局部变量
9.2.4 全局变量和局部变量的区别
- 全局变量:在任何地方都可以使用,只有在浏览器关闭时才会被销毁,因此比较占内存
- 局部变量:只在函数内部使用,当其所在的代码块被执行时,会被初始化;当代码运行结束后,就会被销毁,因此更节省内存空间
9.3 作用域链
- 只要是代码,就至少有一个作用域
- 写在函数内部的局部作用域
- 如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域
- 根据在内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访问,就称作作用域链
第十章 预解析
10.1预解析
JavaScript代码是由浏览器中的JavaScript解析器来执行的。JavaScript解析器在运行JavaScript代码的时候分为两步:预解析和代码执行。
- JS引擎运行JS分为两步:预解析 代码执行
(1)预解析:JS引擎会把JS里面所有的var还有function提升到当前作用域的最前面
(2)代码执行:按照代码书写顺序从上往下执行 - 预解析分为 变量预解析(变量提升)和函数预解析(函数提升)
(1)变量提升:把所有的变量声明提升到当前作用域的最前面 不提升赋值操作
(2)函数提升:把所有的函数声明提升到当前作用域的最前面 不调用函数