JavaScript第二天

加蓓努力我先飞

已于 2022-04-18 10:19:47 修改

阅读量301

点赞数 1

分类专栏： 6.JavaScript基础语法和高级语法文章标签： javascript

于 2020-08-18 13:57:47 首次发布

本文链接：https://blog.csdn.net/ingenuou_/article/details/108054100

版权

6.JavaScript基础语法和高级语法专栏收录该内容

6 篇文章 0 订阅

订阅专栏

数组、函数、作用域

1 JavaScript数组
2 JavaScript函数
3 JavaScript作用域

1 JavaScript数组

1.1 数组的概念

数组（Array）是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。

//普通变量一次只能存储一个值var num = 10;

//数组一次可以存储多个值var arr = [1,2,3,4,5];

1.2 创建数组

1.2.1 数组的创建方式

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

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

1.2.2 利用new创建数组

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

学完对象再看
注意 Array()，A要大写

1.2.3 利用数组字面量创建数组[]

var arr=[];//创建了一个空的数组
var arr1 = [1,2,3,'老师',true];//使用数组字面量方式创建带初始值的数组
//我们数组里面的数据一定用逗号分隔
//数组里面的数据，称为数组元素

数组的字面量是方括号[]
声明数组并赋值称为数组的初始化
这种字面量方式也是我们以后最多使用的方式

1.2.4 数组元素的类型

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

var arrStus = ['小白',12,true,28.9]

1.3 获取数组中的元素

数组的索引

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

数组可以通过索引来访问、设置、修改对应的数组元素，我们可以通过数组名[索引]的形式来获取数组中的元素。

这里的访问就是获取得到的意思

格式：数组名[索引号] //索引号从0开始
如果没有这个数组元素，所以输出的结果是undefined

1.4 遍历数组

1.4.1 遍历

遍历：就是把数组中的每个元素从头到尾都访问一次

    <script>
        //遍历数组:就是把数组的元素从头到尾访问一次
        var arr=['red','green',' blue'];
        for (var i = 0; i < 3; i++) {
            console.log(arr[i]);
        }
        // 1.因为我们的数组索引号从0开始，所以i必须从0开始  i < 3
        // 2.输出的时候arr[i] i计数器当索引号来用
    </script>

1.4.2 数组的长度

使用数组名.length可以访问数组元素的数量（数组的长度）
比如：arr.length(相当于python中的len(arr))

数组长度是索引的个数，不要跟索引号混淆
arr.length 动态监测数组元素的个数

案例

数组转换为字符串

    <script>
        //将数组['red', 'green', 'blue', 'pink'] 转换为字符串，并且用|或其他符号分割// 1.需要一个新变量用于存放转换完的字符串str。
        //2.遍历原来的数组，分别把里面数据取出来，加到字符串里面。
        //3.同时在后面多加一个分隔符
        var arr = ['red', ' green', 'blue', ' pink'];
        var str = '';
        var sep = '*';
        for (var i = 0; i < arr.length; i++) {
            str += arr[i] + sep;
        }
        console.log(str);
    </script>

1.5 数组中新增元素

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

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

可以通过修改 length长度来实现数组扩容的目的

length属性是可读写的

 var arr = ['red', 'green', 'blue', 'pink'];
 arr. length = 7;
 console. log(arr) ;
 console. log(arr[4]);
 console. log(arr[5]);
 console. log(arr[6]);

其中索引号是4, 5, 6的空间没有给值,就是声明变量未给值,默认值就是undefined

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

新增数组元素，修改索引号，追加数组元素

如果索引号没有占用，则会追加到数组
如果里面有了，就会修改数组元素。（替换元素）

不要直接给数组名赋值，否则里面的数组元素就没有了

可以通过修改数组索引的方式追加数组元素

不能直接给数组名赋值,否则会覆盖掉以前的数据

 var arr = ['red' ,'green', 'blue', 'pink'];
 arr[4] = 'hotpink' ;
 console. log(arr) ;

这种方式也是我们最常用的一种方式。

2 JavaScript函数

2.1 函数的概念

函数：就是封装了一段可以被重复执行调用的的代码块
目的：就是让大量代码重复使用

2.2 函数的使用

函数在使用时分为两步：声明函数和调用函数
注意：声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码

2.2.1 声明函数

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

function声明函数的关键字，全部小写
函数是做某件事情，函数名一般是动词
函数不调用，自己不执行

2.2.2 调用函数

//调用函数
函数名();//通过调用函数名来执行函数体代码

调用时，千万不要忘记添加小括号
函数不调用，自己不执行

2.2.3 函数的封装

函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口
简单理解：封装类似于将电脑配件整合组装到机箱中

2.3 函数的参数

我们可以利用函数的参数实现函数重复不同的代码

2.3.1 形参和实参

function 函数名 (形参1,形参2...) {//在声明函数的小括号里面是  形参（形式上的参数）
}
函数名(实参1,实参2...);//在函数调用的小括号里面是实参（实际的参数）

函数的参数可以有，也可以没有，个数不限
参数的作用：在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去
多个参数之间用逗号隔开
形参可以看做是不用声明的变量

在这里插入图片描述

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

如果实参的个数和形参的个数一致，则正常输出结果
如果实参的个数多于形参的个数，会取到形参的个数
如果实参的个数小于形参的个数，NaN
建议，我们尽量让实参的个数和形参相匹配
在JS中，形参的默认值是undefined

2.4 函数的返回值

1、

函数的返回值格式：
function 函数名() {
	函数体；
	return 需要返回的结果;
}
函数名();

我们函数只是实现某种功能，最终的结果需要返回给函数的调用者 函数名(); 通过return来实现的
只要函数遇到return 就会把后面的结果返回给函数的调用者 函数名() = return 后面的结果

2、return终止函数

return之后的代码不被执行
return只能返回一个值。如果用逗号隔开多个值，以最后一个为准

函数返回值注意事项：

    <script>
        // 1. return终止函数I
        function getSum(num1, num2) {
            return num1 + num2; // return 后面的代码不会被执行
            alert('我是不会被执行的哦! ' )
        }
        console.log(getSum(1, 2));
        // 2. return 只能返回一个值
        function fn(num1, num2) {
            return num1, num2; // 返回的结果是最后一个值
        }
        console.log(fn(1, 2));
        // 3.我们求任意两个数的加减乘数结果
        function getResult(num1, num2) {
            return [num1 + num2, num1 - num2, num1*num2, num1 / num2];
        }
        var re = getResult(1, 2); //返回的是一个数组
        console.log(re);
    </script>

3、函数没有return返回undefined

函数都是有返回值的

如果有return，则返回return后面的值
如果没有return，则返回undefined

4、 break ,continue ,return 的区别

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

2.5 arguments的使用

    <script>
        // arguments的使用 只有函数才有arguments对象 而且是每个函数都内置好了这个arguments
        function fn() {
        //     console.log(arguments); //里面存储了所有传递过来的实参arguments = [1,2,3]// console . log( arguments . length);
        //     console.log( arguments.length);
        //     console.log( arguments[2]);
        // // 我们可以按照数组的方式遍历arguments
        // }
            for (var i = 0; i < arguments.length; i++) {
                console.log(arguments[i]);
            }
        }
        fn(1, 2, 3);
        fn(1, 2, 3, 4, 5);
        //伪数组并不是真正意义上的数组
        // 1.具有数组的length 属性
        //2.按照索引的方式进行存储的
        // 3.它没有真正数组的一些方法pop() push() 等等
    </script>

2.6 函数可以相互调用

在这里插入图片描述

    <script>
        //用户输入年份，输出当前年份2月份的天数
        function backDay() {
            var year = prompt('请您输入年份:');
            if (isRunYear(year)) { //调用函数需要加小括号
                alert('当前年份是闰年2月份有29天');
            } else {
                alert('当前年份是平年2月份有28天');
            }
        }
        backDay();
        //判断是否为闰年的函数
        function isRunYear(year) {
            //如果是闰年我们返回true 否则返回false
            var flag = false;
            if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                flag = true;
            }
            return flag;
        }
    </script>

2.7 函数的两种声明方式

    <script>
        //函数的2中声明方式
        // 1.利用函数关键字自定义函数(命名函数)
        function fn() {
            // 函数体;
        }
        fn();
        // 2.函数表达式(匿名函数)
        // var 变量名= funttion() {};
        var fun = function (aru) {
            console.log('我是函数表达式');
            console.log(aru);
        }
        fun('pink老师');
        // (1) fun是变量名不是函数名
        // (2) 函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值而函数表达式里面存的是函数
        // (3)函数表达式也可以进行传递参数
    </script>

3 JavaScript作用域

3.1 作用域

    <script>
        // 1. JavaScript作用域:就是代码名字 (变量)在某个范围内起作用和效果目的是为了提高程序的可靠性更重要的是减少命名冲突
        // 2. js的作用域(es6)之前:全局作用域局部作用域
        // 3.全局作用域: 整个script标签 或者是一个单独的js文件
        var num = 10;
        var num = 30;
        console.log(num);
        //4.局部作用域(函数作用域)在函数内部就是局部作用域这个代码的名字只在函数内部起效果和作用
        function fn() {
            // 局部作用域
            var num = 20;
            console.log(num);
        }
        fn();
    </script>

结果：30 20

3.2 变量作用域

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

全局变量
局部变量

        //变量的作用域: 根据作用域的不同我们变量分为全局变量和局部变量
        // 1.全局变量: 在全局作用域下的变量在全局下都可以使用
        //注意如果在函数内部没有声明直接赋值的变量也属于全局变量
        var num = 10; // num就是一个全局变量
        console.log(num);
        function fn() {
            console.log(num);
        }
        fn();
        // console. log(aru);
        // 2.局部变量在局部作用域下的变量后 者在函数内部的变量就是局部变量
        function fun1(aru) {//注意:函数的形参也可以看做是局部变量
            var num1 = 30;//num1就是局部变量只能在函数内部使用
            num2 = 20; //没有声明直接赋值，全局变量
        }
        fun1();

3.2.1 全局变量

在全局作用域下声明的变量叫做全局变量(在函数外部定义的变量)。

全局变量在代码的任何位置都可以使用
在全局作用域下，var声明的变量是全局变量
特殊情况下,在函数内不使用var声明的变量也是全局变量(不建议使用)

3.2.2 局部变量

在局部作用域下声明的变量叫做局部变量(在函数内部定义的变量)

局部变量只能在该函数内部使用
在函数内部var声明的变量是局部变量
函数的形参实际上就是局部变量

3.2.3全局变量和局部变量的区别

全局变量:在任何一个地方都可以使用,只有在浏览器关闭时才会被销毁,因此比较占内存
局部变量:只在函数内部使用,当其所在的代码块被执行时,会被初始化;当代码块运行结束后,就会被销毁,因此更节省内存空间

3.2.4 现阶段JS没有块级作用域

3.3 作用域链

只要是代码,就至少有一个作用域
写在函数内部的局部作用域
如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域
根据在内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访问,就称作作用域链（就近原则）
站在目标出发，一层一层的往外查找

    <script>
        //作用域链:内部函数访问外部函数的变量，采取的是 链式查找 的方式来决定取那个值,这种结构我们称为作用域链
        //就近原则
        var num = 10;
        function fn() {//外部函数
            var num = 20;
            function fun() {
                console.log(num);
            }
            fun();
        }
        fn();
    </script>