03-JavaScript基础③（数组、函数）

1. 数组

1.1 数组的概念

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

1.2 创建数组

• 利用 new 创建数组

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

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

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

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

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

1.3 获取数组中的元素

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

数组可以通过索引来访问、设置、修改对应的数组元素，可以通过“数组名[索引]”的形式来获取数组中的元素。注意：如果访问时数组没有和索引值对应的元素，则得到的值是undefined

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

1.4 遍历数组

• 数组的长度

数组的长度：默认情况下表示数组中元素的个数
使用“数组名.length”可以访问数组元素的数量（数组长度）。

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

当数组里面的元素个数发生了变化，这个 length 属性跟着一起变化

数组的length属性可以被修改：如果设置的length属性值大于数组的元素个数，则会在数组末尾出现空白元素；如果设置的length属性值小于数组的元素个数，则会把超过该值的数组元素删除

• 数组遍历

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

1.5 数组中新增元素

• 方法一：直接修改length属性，改变数组长度

数组.length = n;

• 方法二：（追加）在数组的末尾插入新元素：

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

1.6 数组排序

• 冒泡排序

// 冒泡排序
// 从大到小
var arr = [4, 1, 2, 3, 5];
for (var i = 0; i < arr.length; i++) { // 外层循环管趟数 
	for (var j = 0; j < arr.length - i; j++) { // 里面的循环管 每一趟的交换次数
		// 内部交换2个变量的值 前一个和后面一个数组元素相比较
		if (arr[j] < arr[j + 1]) {
		var temp = arr[j];
		arr[j] = arr[j + 1];
		arr[j + 1] = temp;
		}
	}
}

• 方法二

// 从大到小
var arr = [4, 1, 2, 3, 5];
for (var i = 0; i < arr.length; i++) {  
    for (var j = i + 1; j < arr.length; j++) { 
        if (arr[i] < arr[j]) {
            var temp = arr[i];
            arr[i] = arr[j];
            arr[j] = temp;
        }
    }
}
console.log(arr);

2. 函数

2.1 函数的概念

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

2.2 函数的使用

声明函数

// 声明函数
function 函数名() {
    //函数体代码
}

调用函数

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

2.3 函数的参数

函数参数语法

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

• 形参：函数定义时设置接收调用时传入
• 实参：函数调用时传入小括号内的真实数据

// 带参数的函数声明
function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数，用逗号分隔
  // 函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3...); 

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

参数个数	说明
实参个数=形参个数	输出正确结果
实参个数>形参个数	只取到形参个数
实参个数< 形参个数	多的形参定义为undefined，结果为NaN

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

2.4 函数的返回值

return 语句

返回值：函数调用整体代表的数据；函数执行完成后可以通过return语句将指定数据返回

// 声明函数
function 函数名（）{
    ...
    return  需要返回的值；
}
// 调用函数
函数名();    // 此时调用函数就可以得到函数体内return 后面的值

• 在使用 return 语句时，函数会停止执行，并返回指定的值
• 如果函数没有 return ，返回的值是 undefined

break ,continue ,return 的区别

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

2.5 arguments的使用

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

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

function fn() {
	// console.log(arguments); // 里面存储了所有传递过来的实参  arguments = [1,2,3]
	// console.log(arguments.length);
	// console.log(arguments[2]);
	for (var i = 0; i < arguments.length; i++) {
		console.log(arguments[i]);
	}
}

2.6 函数的两种声明方式

• 自定义函数方式(命名函数)

// 声明定义方式
function 函数名() {...}
// 调用  
函数名();  

调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面

• 函数表达式方式(匿名函数）

// 这是函数表达式写法，匿名函数后面跟分号结束
var 变量名 = function(){...};
// 调用的方式，函数调用必须写到函数体下面
变量名();

函数调用的代码必须写到声明函数的后面