6-10章-CSDN博客

本文链接：https://blog.csdn.net/qq_60296520/article/details/126707151

第六章 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）函数提升：把所有的函数声明提升到当前作用域的最前面不调用函数