十天学前端之JS篇(七)

1.数组

1.1数组的概念

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vp9nRW2t-1663486690563)(Typora_image/150.png)]

1.2 数组的创建方式

利用new创建数据
利用数组字面量创建数组

1.2.1 利用new 创建数组

var 数组名  = new Array();
var arr = new Array();    // 创建了一个新的空数组，注意Array()，A要大写
1
2

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lPHIUGaw-1663486690565)(Typora_image/151.png)]

var arr = [];   // 创建了一个空数组
var arr1 = [1,2,3,'字符串型',true]; 
1
2

1.2.3 数组元素的类型

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

var arr1 = [1,2,3,'字符串型',true]; 
1

总结

数组的作用	把多个数据存放在一起
数组的创建方式	1.利用new创建 2.利用数组字面量创建(常用)
数组元素？数组里面类型有限制吗？	存放在数组里面的数据称为数组元素；无限制

1.3 获取数组元素

1.3.1 数组的索引

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yQXbmSlp-1663486690566)(Typora_image/152.png)]

新建.html文件，执行代码如下：

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5XxYzdAO-1663486690567)(Typora_image/153.png)]

1.4 遍历数组

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iXUirqNb-1663486690568)(Typora_image/154.png)]

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

新建.html文件，执行代码如下：

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-su45NVhd-1663486690569)(Typora_image/155.png)]

1.5 数组的长度

使用"数组名.length"可以访问数组元素的数量(数组长度)。

新建.html文件，执行代码如下

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8eIjfHYy-1663486690571)(Typora_image/156.png)]

总结：

什么是遍历	把数组元素从头到尾访问一次
通过什么来遍历数组里面的元素	for循环
for 里面的i是什么？当什么使用？for里面的数组元素怎么写？	i是计数器，当索引号使用，arr[i]是数组元素第i个数组元素
如何获取数组的长度	arr.length
数组索引号和数组长度有什么关系？	索引号从0开始，数组长度是元素个数

1.5.1案例：数组求和及平均值

求数组[2,6,1,7,4] 里面所有元素的和以及平均值。

新建.html文件，执行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
        案例分析
        1.声明一个求和变量 sum
        2.遍历这个数组，把里面每个数组元素加到sum里面
        3.用求和变量sum除以数组的长度就可以得到数组的平均值
        */
       var arr = [2,6,1,7,4];
       var sum = 0;
       var average = 0;
       for (var i = 0; i < arr.length; i++) {
        sum += arr[i]   // 此处加的是数组元素arr[i]，不是计数器i
       }
       average = sum / arr.length;
       console.log('所有元素的和：'+sum);
       console.log('平均值为：'+ average);
    //    想要输出多个变量，用逗号分隔即可
    console.log(sum,average);
    </script>
</head>
<body>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gAFVJO0O-1663486690572)(Typora_image/157.png)]

1.5.2 案例：数组最大值

求数组[2,6,1,77,52,25,7]中的最大值。

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oGpcTp3I-1663486690573)(Typora_image/158.png)]

1.5.3 案例：数组转换为分割字符串

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0MGxlVaQ-1663486690575)(Typora_image/159.png)]

新建.html文件，执行代码如下

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZHYBZTjv-1663486690576)(Typora_image/160.png)]

1.6 数组中新增元素

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o9ujuDUk-1663486690578)(Typora_image/161.png)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uk9yMcDv-1663486690579)(Typora_image/162.png)]

新建.html文件，执行代码如下

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JMDcPj2D-1663486690582)(Typora_image/163.png)]

1.6.3 案例：数组新增元素

新建一个数组，里面存放100个整数(1~100)

案例分析：

1.使用循环来追加数组

2.声明一个空数组arr

3.循环中的计数器i可以作为数组元素存入

4.由于数组的索引号是从0开始的，因此计数器从0开始更合适，存入的数组元素要+1

新建.html文件，执行代码如下

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UJ23bzHF-1663486690584)(Typora_image/164.png)]

1.6.4 案例：筛选数组

要求：将数组[2,0,6,1,77,0,52,0,25,7]中大于等于10的元素选出来，放入新数组。

案例分析

1.声明一个新数组用于存放新数据newArr

2.遍历原来的旧数组，找出大于等于10的元素

3.依次追加给新数组newArr

新建.html文件，执行代码如下：

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fi9RsDCP-1663486690585)(Typora_image/165.png)]

1.7 数组案例

1.7.1 案例：删除指定数组元素(数组去重)

要求：将数组[2,0,6,1,77,0,52,0,25,7]的0去掉后，形成一个不包含0的新数组。

案例分析

1.需要一个新数组用于存放筛选之后的数据

2.遍历原来的数组，把不是0的数据添加到新数组里面(此时要注意采用数组名+索引的格式接收数据)。

3.新数组里面的个数，用length不断累加

新建.html文件，执行代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var arr = [2,0,6,1,77,0,52,0,25,7];
        var newArr = [];
        for (var i = 0; i < arr.length;i++) {
            if (arr[i] != 0) {
                newArr[newArr.length] = arr[i];
            }
        }
        console.log(newArr);
    </script>
</head>
<body>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qaljZWSH-1663486690592)(Typora_image/166.png)]

1.7.2 案例：翻转数组

要求：将数组[‘red’,‘green’,‘blue’,‘pink’,‘purple’]的内容反过来存放。

输出: [‘purple’,‘pink’,‘blue’,‘green’,‘red’]

分析

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JanB3Rc3-1663486690594)(Typora_image/167.png)]

案例分析

1.声明一个新数组newArr

2.把旧数组索引号第4个取过来(arr.length - 1) ,给新数组索引号第0 个元素(newArr.length)

3.采用递减的方式 i–

新建.html文件,执行代码如下

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QXrTP0la-1663486690597)(Typora_image/168.png)]

1.7.3 案例: 数组排序(冒泡排序)

冒泡排序:是一种算法，把一系列的数据按照一定的顺序进行排列显示(从小到大或者从大到小)。

例如：我们可以将数组[5,4,3,2,1]中的元素按照从小到大的顺序排序，输出:1 ,2 ,3 ,4 ,5 。反之亦可。

冒泡排序是一种简单的排序算法。它重复走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。这个算法的名字由来是因为越小的元素会经由交换慢慢"浮"到数列的顶端。

回顾之前交换变量代码，如下

分析原理:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7wkakOfB-1663486690598)(Typora_image/170.png)]

新建.html文件，执行文件如下

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        // 冒泡排序
        // var arr = [4,1,2,3,5]
        var arr = [5,4,3,2,1]
        for (var i = 0; i <= arr.length - 1;i++) {         // 外层循环管趟数
            for (var j = 0; j <= arr.length -i - 1;j++) {   // 里层循环管每一趟的交换次数
                // 内部交换两个变量的值  前一个和后一个数组元素相比较
                if (arr[j] > arr[j + 1]) {
                    var temp = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j+1] = temp;
                }
            }
        }
        console.log(arr);
    script>
head>
<body>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-863wYso6-1663486690601)(Typora_image/169.png)]

2. 函数

2.1 函数的概念

在JS里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。

虽然for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用JS中的函数。

函数:就是封装了一段可被重复调用执行的代码块。通过此代码可以实现大量代码的重复使用。

新建.html文件，执行代码如下：

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w8OrX0Uy-1663486690602)(Typora_image/171.png)]

2.2 函数的使用

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PGSGkHnv-1663486690604)(Typora_image/172.png)]

新建.html文件，执行如下代码

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H8ycUgFb-1663486690606)(Typora_image/173.png)]

2.2.1 函数的封装

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

简单理解：封装类似于将电脑配件整合组装到机箱中(类似于快递打包)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GYS3ghIe-1663486690607)(Typora_image/174.png)]

2.2.2 函数封装案例:计算1~100之间的累加和

新建.html文件，执行代码如下：

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ub588kYK-1663486690610)(Typora_image/175.png)]

小结

函数的作用	大量代码重复使用(封装了一段可以被重复执行的代码块)
声明函数的关键字	function
如何调用函数	函数名();
封装什么意思	打包

2.3 函数的参数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gnVNK8jq-1663486690612)(Typora_image/176.png)]

新建.html文件，执行代码如下

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HCJxIH2i-1663486690613)(Typora_image/177.png)]

2.3.1 案例演示

新建.html文件，执行代码如下

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hQzhkwr1-1663486690615)(Typora_image/178.png)]

2.3.2 函数形参和实参个数不匹配问题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OOhU4th3-1663486690616)(Typora_image/179.png)]

新建.html文件，执行代码如下

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X9MlIg8B-1663486690618)(Typora_image/180.png)]

小结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZVtV1K0z-1663486690620)(Typora_image/181.png)]

2.4 函数的返回值

2.4.1 return语句

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

新建.html文件，执行代码如下

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pzKUg0U0-1663486690622)(Typora_image/182.png)]

2.4.2 案例：利用函数求任意两个数的最大值

新建.html文件，执行代码如下

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qbrk4RYN-1663486690624)(Typora_image/183.png)]

2.4.3 案例：利用函数求任意一个数组中的最大值

利用函数求数组[5,2,99,101,67,77]中的最大数值

新建.html文件，执行代码如下

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QEsjpYHY-1663486690625)(Typora_image/184.png)]

2.4.4 return 终止函数

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LrNVlZfZ-1663486690628)(Typora_image/185.png)]

2.4.5 return 的返回值

return 只能返回一个值。如果用逗号隔开多个值，以最后一个为准。(返回多个值的话可以用数组方式来实现)

2.4.6 函数没有 return 返回undefined

函数都是有返回值的

1.如果有return 则返回return后面的值

2.如果没有return 则返回undefined

新建.html文件，执行代码如下

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-besVJB2u-1663486690632)(Typora_image/186.png)]

2.4.7 break,continue,return的区别

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

2.5 通过榨汁机看透函数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GJ4kvW2e-1663486690634)(Typora_image/187.png)]

2.5.1 小结案例

新建.html文件，执行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1.写一个函数，用户输入任意两个数字的任意算术运算(简单的计算器小功能)，并能弹出运算后的结果
        function getResult1(operator,num1,num2) {
            var operator = prompt("请输入您的运算符('+','-','*','/')");
            var num1 = prompt('请输入您的第一个数字');
            var num2 = prompt('请输入您的第二个数字');
            if (operator == '+') {
                return parseFloat(num1) + parseFloat(num2)           
            } else if (operator == '-') {
                return num1 - num2

            } else if (operator == '*') {
                return num1 * num2
                
            } else if (operator == '/') {
                return num1 / num2
                
            } else {
                return '运算符错误';
            }
        }
        alert(getResult1());
        // 2.写一个函数，用户输入任意两个数字的最大值，并能出弹运算后的结果
            function getMax(num1,num2) {
                var num1 = parseInt(prompt('请输入数字'));
                var num2 = parseInt(prompt('请输入数字'));
                return num1 > num2 ? num1 : num2;
            }
            alert(getMax())
        // 3. 写一个函数，用户输入任意三个不同数字的最大值，并能弹出运算后的结果
            var num1 = parseInt(prompt('输入第一个数字'));
            var num2 = parseInt(prompt('输入第二个数字'));
            var num3 = parseInt(prompt('输入第三个数字'));
            var arr = [num1,num2,num3]
            var max = num1;
            function getMaxValue(num1,num2,num3) {
                
                for (var i = 1; i < arr.length; i++) {
                    if (arr[i] > max) {
                        max = arr[i];
                    } 
                }
                return max;
            }
            alert(getMaxValue())
        // 4.写一个函数，用户输入一个数判断是否是素数，并返弹出回值(又叫质数，只能被1和自身整除的数)
            function judgePrime(num1) {
                var num1 = parseFloat(prompt('请输入数字'));
                for (var i= 2; i < num1;i++) {
                    if (num1 % i == 0) {
                        return num1 + '不是质数';
                    }
                }
                return num1 + '是质数';
            }
            alert(judgePrime())
    </script>
</head>
<body>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

2.6 arguments的使用

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

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

1.具有length属性

2.安索引方式储存数据

3.不具有数组的push,pop等方式

新建.html文件，执行代码如下

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-evxuznGm-1663486690638)(Typora_image/188.png)]

2.6.1 案例：利用函数求任意个数的最大值

新建.html文件，执行代码如下：

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aYGDpaKG-1663486690639)(Typora_image/189.png)]

2.7 函数案例

2.7.1 案例：利用函数封装方式，翻转任意一个数组

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j6oRsaUr-1663486690647)(Typora_image/167.png)]

新建.html文件，执行代码如下

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M5O42jWv-1663486690650)(Typora_image/190.png)]

2.7.3 案例：利用函数封装的方式，对数组排序—冒泡排序

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hhbTEid1-1663486690653)(Typora_image/170.png)]

新建.html文件，执行代码如下

Python的冒泡写法

def sort(items):
      for i in range(len(items) - 1):
          for j in range(len(items) - 1 - i):
              if items[j] > items[j + 1]:
                  items[j], items[j + 1] = items[j + 1], items[j]
    return items
1
2
3
4
5
6

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8ffH2lqK-1663486690653)(Typora_image/191.png)]

2.7.4 案例：利用函数判断闰年

要求：输入一个年份，判断是否是闰年(闰年：能被4整除并且不能被100整除，或者能被400整除)

新建.html文件，执行代码如下

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lclMffYz-1663486690655)(Typora_image/192.png)]

2.7.5 案例：函数可以调用另外一个函数

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

新建.html文件，执行代码如下

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3frsdiNf-1663486690658)(Typora_image/193.png)]

2.7.6 案例：用户输入年份，输出当前年2月份的天数

要点：如果是闰年，则2月份是29天，如果是平年，则2月份是28天

新建.html文件，执行代码如下

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7UOY2EY8-1663486690659)(Typora_image/194.png)]

2.8 函数的两种声明方式

新建.html文件

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DmRP9eNV-1663486690660)(Typora_image/195.png)]

3.作用域

3.1 作用域的概述

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字的冲突。

新建.html文件，执行代码如下

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m2ilQhwW-1663486690662)(Typora_image/196.png)]

3.2 变量作用域的分类

在JavaScript中，根据作用域不同，变量可以分为两种：

全局变量

局部变量

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ESUINIWe-1663486690664)(Typora_image/197.png)]

新建.html文件，执行代码如下

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-abNOGpxg-1663486690665)(Typora_image/198.png)]

3.3 JavaScript没有块级作用域

ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

另外，一些情况下ES6也泛指ES2015及之后的新增特性，虽然之后的版本应当称为ES7、ES8等。

新建.html文件，代码如下

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N9h6yh3N-1663486690667)(Typora_image/199.png)]

3.3 作用域链

新建.html文件，执行代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 作用域链：内部函数访问外部函数的变量，采用的是链式查找的方法来决定取哪个值，这种结构我们称为作用域链
        //  也就是从内到外，一级一级的查找，就近原则
        var num = 10;
        var year = 2022;
        function fn() {      // 外部函数
            var num = 20;
            function fun() {          // 内部函数
                console.log(num);     // 20
                console.log(year);    // 2022
            }
            fun();
        }
        fn();   
    </script>
</head>
<body>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3VkjXF83-1663486690668)(Typora_image/200.png)]

3.3.1 案例：结果是几？

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UysniWTw-1663486690676)(Typora_image/201.png)]

新建.html文件，执行代码如下：

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LwsE38Jj-1663486690678)(Typora_image/202.png)]

4.JavaScript预解析

JavaScript代码是由浏览器中的JavaScript解析器来执行的。JavaScript解析器在运行JavaScript代码的时候分为两步：预解析和代码执行。

问题背景：

新建.html文件，执行代码如下

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3GzVMU7b-1663486690679)(Typora_image/203.png)]

基础背景回顾：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IvLolEwz-1663486690680)(Typora_image/031.png)]

上面问题1的报错和问题4的报错是什么原因呢?

新建.html文件，执行代码如下

4.1 预解析案例：结果是几?

案例一，新建.html文件，执行代码如下

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s4Jgd6Lf-1663486690684)(Typora_image/204.png)]

案例二，新建.html文件，执行代码如下

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0LpMcEt6-1663486690706)(Typora_image/205.png)]

案例三，新建.html文件，执行代码如下

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ifrbhBTz-1663486690708)(Typora_image/206.png)]

案例四，新建.html文件，执行代码如下

效果如下
在这里插入图片描述

相关阅读:
ESP8266-Arduino编程实例-MLX90614红外测温传感器驱动
 Qt 条件等待
 一不小心晋级“CCF国际AIOps挑战赛”决赛？
Windows端通过Vscode或PowerShell连接linux服务器，打开图形界面的程序
 个人博客系列-后端项目-RBAC角色管理（6）
链表——移除链表元素
 Python------学生管理（文件txt处理）
C#学习相关系列之匿名方法和Lambda表达式
 第十四届蓝桥杯模拟赛第二期部分题答案（C++代码）
linux如何重置root密码
原文地址：https://blog.csdn.net/m0_57021623/article/details/126918438

十天学前端之JS篇(七)

1.数组

1.1数组的概念

1.2 数组的创建方式

1.2.1 利用new 创建数组

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

1.2.3 数组元素的类型

1.3 获取数组元素

1.3.1 数组的索引

1.4 遍历数组

1.5 数组的长度

1.5.1案例：数组求和及平均值

1.5.2 案例：数组最大值

1.5.3 案例：数组转换为分割字符串

1.6 数组中新增元素

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

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

1.6.3 案例 ：数组新增元素

1.6.4 案例：筛选数组

1.7 数组案例

1.7.1 案例：删除指定数组元素(数组去重)

1.7.2 案例：翻转数组

1.7.3 案例: 数组排序(冒泡排序)

2. 函数

2.1 函数的概念

2.2 函数的使用

2.2.1 函数的封装

2.2.2 函数封装案例:计算1~100之间的累加和

2.3 函数的参数

2.3.1 案例演示

2.3.2 函数形参和实参个数不匹配问题

2.4 函数的返回值

2.4.1 return语句

2.4.2 案例：利用函数求任意两个数的最大值

2.4.3 案例：利用函数求任意一个数组中的最大值

2.4.4 return 终止函数

2.4.5 return 的返回值

2.4.6 函数没有 return 返回undefined

2.4.7 break,continue,return的区别

2.5 通过榨汁机看透函数

2.5.1 小结案例

2.6 arguments的使用

2.6.1 案例：利用函数求任意个数的最大值

2.7 函数案例

2.7.1 案例：利用函数封装方式，翻转任意一个数组

2.7.3 案例：利用函数封装的方式，对数组排序—冒泡排序

2.7.4 案例：利用函数判断闰年

2.7.5 案例：函数可以调用另外一个函数

2.7.6 案例：用户输入年份，输出当前年2月份的天数

2.8 函数的两种声明方式

3.作用域

3.1 作用域的概述

3.2 变量作用域的分类

3.3 JavaScript没有块级作用域

3.3 作用域链

3.3.1 案例：结果是几？

4.JavaScript预解析

4.1 预解析案例：结果是几?

1.6.3 案例：数组新增元素