Web前端-JavaScript（js数组和函数）

1.数组

1.1 数组的概念

• 数组可以把一组相关的数据一起存放，并提供方便的访问(获取）方式。
• 数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。

1.2 创建数组

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

• 利用 new 创建数组

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

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

  //1. 使用数组字面量方式创建空的数组
  var  数组名 = []；
  //2. 使用数组字面量方式创建带初始值的数组
  var  数组名 = ['小白','小黑','大黄','瑞奇'];
  

• 数组元素的类型

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

  var arr = ['小白',12,true,28.9];
  

1.3 获取数组中的元素

• 索引 (下标) ：用来访问数组元素的序号

• 数组下标从 0 开始

• 数组元素可以通过索引来访问、设置、修改对应的数组元素.

// 定义数组
var arrStus = [1,2,3];
// 获取数组中的第2个元素
alert(arrStus[1]);    

注意：如果访问时数组没有和索引值对应的元素，则得到的值是undefined

1.4 数组中新增元素

数组中可以通过以下方式在数组的末尾插入新元素：

数组[ 数组.length ] = 新数据;

1.5 遍历数组

• 数组遍历

  var arr = ['red','green', 'blue'];
  for(var i = 0; i < 3; i++){
      console.log(arr[i]);
  }
  

• 数组的长度

var arr = [1,2,3];
alert(arr.length);

- 注意：

- 此处数组的长度是数组元素的个数， length - 1 是最大的索引数
  -  当我们数组里面的元素个数发生了变化，这个 length 属性跟着一起变化

  - 如果设置的length属性值大于数组的元素个数，则数组其余元素为undefined；
  
  - 如果设置的length属性值小于数组的元素个数，则会把超过该值的数组元素删除


案例练习：

1. 在数组中存放1 - 10
2. 冒泡排序

```js
var arr1 = [];
for (var i = 0; i <10; i++) {
   arr1[i] = i+1   
}
console.log(arr1)

var array = [4, 3, 1, 5, 2];
for (var i = 0; i < array.length - 1; i++) {
     for (var j = 0; j < array.length - 1 - i; j++) {
         if (array[j] > array[j + 1]) {
             var temp = array[j];
             array[j] = array[j + 1];
             array[j + 1] = temp;
         }
     }
}
console.log(array);

2.函数

2.1 函数的概念

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

2.2 函数的使用

函数声明

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

• function 是声明函数的关键字,必须小写

• 由于函数一般是为了实现某个功能才定义的

调用函数

函数名();

• 调用的时候千万不要忘记添加小括号

• 函数不调用，自己不执行

函数的封装

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

例子：封装计算1-100累加和

function getSum(){
  var sum = 0;// 准备一个变量，保存数字和
  for (var i = 1; i <= 100; i++) {
    sum += i;// 把每个数值 都累加 到变量中
  }
  alert(sumNum);
}

// 调用函数
getSum();

2.3 函数的参数

函数参数语法

• 形参：函数定义时设置接收调用时传入
  • 形式上的参数 函数定义的时候 传递的参数 当时并不知道是什么
• 实参：函数调用时传入小括号内的真实数据
  • 实际上的参数 函数调用的时候 传递的参数 实参是传递给形参的

案例：利用函数求任意两个数之间的和

 function getSum(a, b) {
    console.log(a + b)
 }
getSum(1, 2)

函数形参和实参数量不匹配时

参数个数	说明
实参个数等于形参个数	输出正确结果
实参个数多于形参个数	只取到形参个数
实参个数小于形参个数	多的形参定义为undefined

注意：在JavaScript中，形参的默认值是undefined。

2.4 函数的返回值

function 函数名（）{
    //其它代码
    return  需要返回的值；
}

var result = 函数名();

注意：

• 在使用 return 语句时，函数会停止执行，并返回指定的值
• 如果函数没有 return ，返回的值是 undefined
• return之后的代码不会被执行
• return返回值只能有一个，不可以有多个

2.4.1 案例练习

利用函数返回值求2个数的最大值

function getSum(a, b) {
  return a > b ? a : b;
}
var res = getSum(3, 2)
console.log(res);

2.5 arguments的使用

当不确定有多少个参数传递的时候，可以用 arguments 来获取。arguments展示形式是一个伪数组，因此可以进行遍历。

function max() {
   console.log(arguments);
   for (var i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
      }
}

max(1, 2, 3)

伪数组具有以下特点：

• 具有 length 属性
• 按索引方式储存数据
• 不具有数组的 push , pop 等方法

注意：在函数内部使用该对象，用此对象获取函数调用时传的实参。

2.6 函数的两种声明方式

• 命名函数

  function fn() 
  {
    
  }
  
  fn();  
  

  • 因为有名字，所以也被称为命名函数
  • 调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面

• 匿名函数

var fn = function()
{

}

fn();

- 因为函数没有名字，所以也被称为匿名函数
- 这个fn 里面存储的是一个函数  
- 函数调用的代码必须写到函数体后面