Web前端基础—JavaScript基础（数组和函数）

数组

1. 数组的概念

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

1. 数组的创建

2.1数组的创建方式

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

1. 利用new创建数组
2. 利用数组字面量创建数组

2.2利用new创建数组

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

注意：  Array();  A要大写

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

var arr = []; //创建了一个空的数组

        var arr1 = [1, 2, 3, 'pig', true]; //数组里面的数据要用逗号隔开

2.1数组元素的类型

1. 数组里面的数据，称为数组元素；
2. 数组元素可以是任意类型数据。

1. 获取数组元素

3.1数组的索引

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

var arr = [‘小白’,’小黑’,’大黄’,’小红’];

索引号：  0    1    2    3

格式： 数组名[索引号]

1. 遍历数组

怎样把数组里面的元素全都取出来？

规律：

从代码中我们可以发现，从数组中每取出每一个元素时，代码时重复的，有所不一样的是索引值在递增。

答案就是  循环。

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

1.如何遍历数组

         var arr = ['red', 'green', 'blue']; 

          for (var i = 0; i < arr.length; i++) {

             console.log(arr[i]);

        }

注意：

因为我们的数组索引号从0开始，所以 i 必须从0开始；

输出的时候  arr[i]

1. 数组中新增元素

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

手动修改length长度 ：  arr.length=5;

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

追加数组元素  ： arr[ 4 ] = ‘pink’;

如果原先的位置有元素，那么  追加索引号  会替换原来的元素。

1. 数组中的冒泡排序

冒泡排序：是一种算法，把一系列的数据按照一定的顺序进行排列显示（从大到小或者从小到大）。一次比较两个元素，如果他们顺序错误，就把他们交换过来。

案例：

  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);

函数

1. 函数的概念

在JS里面，可能会定义非常多的相同的代码或者功能相近的代码，这些代码可能需要大量重复使用，虽然for循环语句也能实现一些简单的重复操作，但是比较局限性，此刻我们就可以使用JS中的函数。

函数就是封装了一段可以被重复执行调用的代码块。

1. 函数的使用

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

2.1声明函数

function 函数名 () {

//函数体

}

// 函数不调用，自己不会执行

2.2调用函数

函数名（）;

2.3函数的封装

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

简单理解：封装类似于将电脑配件整合组装到机箱中。

1. 函数的参数

3.1形参和实参

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

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

         }

        函数名(实参1,实参2...); // 在函数调用的小括号里面是实参（实际的参数）

形参实际上就是：定义出来的，广泛性的参数，是假的，不是真正意义上的数值；

实参实际上就是：在每个变量使用过程中，他自己需要的参数，是真实存在 的参数，是使用函数时会使用到。

参数的作用：在函数内部某些值不固定时，我们可以通过参数在调用函数时传递不同的值进去。

注意：

1. 多个参数之间用逗号隔开；
2. 形参是不用声明的变量。

3.2形参和实参个数不匹配的问题

1. 如果实参的个数和形参的个数一致，则正常输出结果。
2. 如果实参的个数多余形参的个数，多余的实参会被忽略。
3. 如果实参的个数小于形参的个数，会显示NaN(这是因为  多余的形参会被定义为undefind )

1. 函数的返回值（return语句）

4.1return语句

return语句能够将函数值返回给调用者。

只要函数遇到return 就把后面的结果 返回给函数的调用者

4.2return终止函数

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

4.3return返回值

return只能返回一个值。返回的结果是最后一个值。

如果想要返回多个值，那么可以将结果放到数组中，然后再从数组中取值。（遍历数组）

4.3函数没有return返回undefined

函数都是有返回值的

1. 如果有return，则返回return后面的值；
2. 如果没有return，则返回undefined。

4.3break、continue、return的区别

break：结束当前的循环体（如for、while）

continue：跳出本次循环，继续执行下次循环（如for、while）

return：不仅可以退出循环，还能够返回return语句中的值，同时还可以结束当前的函数体内的代码。

1. arguments的使用

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

只有函数才有arguments对象，而且是每个函数都内置好了这个arguments对象。

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

1. 具有length属性
2. 按索引方式存储数据
3. 不具有数组的push、pop等方法

1. 函数调用

函数可以调用另外一个函数

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

1. 函数的两种声明方式
   1. 利用函数关键字自定义函数（命名函数）

function  fn() {

}

fn();

1. 1. 函数表达式（匿名函数）      也可以传参

var  变量名 = function (){};

var  fun = function (){

console.log(‘我是函数表达式’)

}

fn();