ES5入门 — 数组和函数-CSDN博客

ES5入门系列

本篇文章带大家了解一下JS当中的数组和函数。

数组

如何定义？

// 1. 利用关键字 new
var arr = new Array();
// 2. 直接创建数组
var arr1 = [];
复制代码

如何赋值？

数组中的每一个元素都有它对应的下标，下标从0开始。通过下标，我们能够查找，修改数组当中的元素

// 查找
var nameArr = ['张三','john','李四'];
console.log(nameArr[1]) // 打印 'john'
// 添加
nameArr[3] = '王五';
console.log(nameArr); //['张三','john','李四','王五'];
// 修改
nameArr[3] = '赵六';
console.log(nameArr); //['张三','john','李四','赵六'];
复制代码

数组属性

length

var nameArr = ['张三','john','李四','王五'];
console.log(nameArr.length) // 获取数组当中元素个数,即数组长度
复制代码

如何遍历数组元素？

var arr = ['张三','john','李四','王五'];
// 1. for循环
for(var i = 0; i < arr.length; i++){
    console.log(arr[i])
}
// 2. for in
for(var key in arr){
    console.log(arr[key])
}
复制代码

数组部分方法

数组合并

var nameArr1 = ['张三','李四'];
var nameArr2 = ['王五','赵六'];
var nameArr = nameArr1.concat(nameArr2);
console.log(nameArr); // ['张三','李四','王五','赵六']
console.log(nameArr1); // ['张三','李四']
console.log(nameArr2); // ['王五','赵六']
// 并未改变原数组，所以我要用一个新数组nameArr去接收合并后的数组，以便后续使用。
复制代码

数组==>字符串

语法： 数组名.join(分隔符)

分隔符可选，如果省略，默认用逗号做分隔符

var arr = [1,2,3];
var arrStr = arr.join('-');
console.log(arrStr); // 1-2-3
console.log(arr); // [1,2,3]
// 并未改变原数组
复制代码

字符串==>数组

语法： 数组名.split(分隔符,数组长度)

通过指定分隔符，如果省略，默认以逗号分隔，将字符串分割为字符串数组。

第二个参数，制定返回数组的最大长度。

var email = 'abc@163.com;cc@126.com;frg@qq.com';
var emailArr = email.split(';');
console.log(emailArr); // ["abc@163.com", "cc@126.com", "frg@qq.com"]
var emailArr2 = email.split(';',2);
var emailArr = email.split(';'); // ["abc@163.com", "cc@126.com"]
复制代码

数组添加元素

语法： 数组名.push(元素) / 数组名.unshift(元素)

var arr = [1,2,3];
arr.push(7); // 将 7 插入到数组最后(从后推入)
console.log(arr); // [1, 2, 3, 7]
arr.unshift(6); // 将 6 插入到数组最前边(从前插入)
console.log(arr); // [6, 1, 2, 3, 7]
// 也就是说,每一次 调用 push() 或者 unshift() 都改变了原数组，所以当我想使用修改后的添加过元素后的数组时，直接使用arr即可
// 所以没有必要用一个新数组去接收。
复制代码

数组删除元素 语法： 数组名.pop(元素) / 数组名.shift(元素)

var arr = [1,2,3];
arr.pop(); // 删除数组最后一个元素
console.log(arr); // [1,2]
arr.shift(); // 删除数组最前边的一个元素
console.log(arr); // [2]
// 也就是说,每一次 调用 pop() 或者 shift() 都改变了原数组。
复制代码

数组使用案例

求数组平均值

var arr = [32,41,1,40,12,5];
// 计算数组元素的和,获取数组元素个数,求平均值
var sum = 0;
for (var i = 0; i < arr.length; i++) {
	// sum = sum + arr[i]
	sum += arr[i];
}
var avg = sum / arr.length;
console.log(avg); // 21.833333333333332
复制代码

数组排序

冒泡排序

比较相邻的元素。如果第一个比第二个大，就交换他们两个。
对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数。
针对所有的元素重复以上的步骤，除了最后一个。
持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。
之所以叫冒泡排序，每一轮两辆比较之后，都会冒出一个本轮最大的数，将其移动到本轮尾部。

// 需要几个轮次 6个数排序 最大需要5轮
// 外层循环控制轮次
for (var i = 1; i < arr.length; i++) {
	for (var j = 0; j < arr.length-i; j++) {
		// 经过这样for循环,我们能找到本轮最大的数,并排在本轮尾部
		if(arr[j]>arr[j+1]){
			// 交换位置
			var temp = arr[j];
			arr[j] = arr[j+1];
			arr[j+1] = temp;
		}
	}
}
console.log(arr); // [1, 5, 12, 32, 40, 41]
复制代码

选择排序

选择排序是一种简单直观的排序算法。它的工作原理是每一次从待排序的数据元素中选出最小（或最大）的一个元素，存放在序列的起始位置，然后，再从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾。以此类推，直到全部待排序的数据元素排完。选择排序是不稳定的排序方法。

for (var i = 0; i < arr.length; i++) {
	var minIndex = i;
	for (var j = i+1; j < arr.length; j++) {
		if (arr[minIndex]>arr[j]) {
			minIndex = j;
		}
	}
	if (minIndex!==i) {
		// 交换位置
		var temp = arr[i];
		arr[i] = arr[minIndex];
		arr[minIndex] = temp;
	}
}
console.log(arr)
复制代码

函数

函数声明，调用

函数，是一种封装。就是将一些语句，封装到函数里面。通过调用的形式，执行这些语句。

函数的定义：

function 函数名字(){

}
复制代码

函数的调用：

函数名字();
复制代码

// var 是声明变量的
//function 关键字声明了一个函数,不调用是不会执行的
// 1.具名函数
function say(){
	alert('Hi,你好!');
}
say(); // 调用函数

// xx.xx()==>调用对象方法的
// xx.xx ==> 获取对象的属性

// 匿名函数表达式
var sing = function () {
	alert('Hi,你好!');
}
sing();
复制代码

定义函数，可以在调用的后面，这是JS的语法特性，函数声明提升。

函数的功能、好处：

将会被大量重复的语句写在函数里面，这样以后需要这些语句的时候，直接调用函数，不用重写那些语句。
简化编程，让编程变的模块化。

函数的参数

参数是函数和外界进行沟通的桥梁。

形参：形式上参与运算的变量，无实际值，为实参占位置。（可以理解为函数的内部变量外部无法访问）

实参：实际参与运算的变量。形参为他占位置，真实参与运算的变量。

function add (x,y) {
	 console.log(y);
	 alert(x+y);
}
add(3,5);
// 这里边 参数 x 和 y 就是add函数的形参(占位用)
// 执行add(3,5)时,相当于将add函数里的x用3换掉,y用5换掉,所以此时3和5是 实参.
// 和方程未知数类似
复制代码

如果实参个数比形参个数多，可以运算，但是多余实参不参与运算。

如果实参个数小于形参个数，计算错误。通常形参个数和实参个数保持一致。

函数的返回值

函数程序运行后的结果外部需要使用的时候，我们不能拿到，需要通过return返回。
函数使用return语句后，这个函数会在执行完 return 语句之后停止并立即退出，也就是说return后面的所有其他代码都不会再执行。
函数里面可以没有return。

function add (x,y) {
    var sum = x +y;
    // 我想在外部使用计算的结果 sum ,那么就需要return返回
    return sum;
}
add(3,5); // 执行add方法,并将计算结果 8 返回。
var sum = add(3,5); // 声明变量sum 接收返回值,以便后续使用
复制代码

参数的数据类型

基本数据类型作为参数

基本数据类型作为参数传递，函数内部会创建该数据的副本，一切修改不会影响传进来的数据本身。

var num = 2；
function ins (x) {
	x++;
}
// 调用ins方法
ins(num); 
console.log(num); // 2
复制代码

复杂数据类型作为参数

复杂数据类型作为参数传递,在函数内部对该参数的修改，会直接影响到函数外部的该参数，因为本质上他们是同一个对象。

function add (arr,n) {
	arr.push(n);
}
var arr = [2,3];
// 调用add方法
add(arr,4);
console.log(arr); // [2,3,4]
复制代码

函数封装案例

排序方法封装

封装一次，多处调用，就问爽不爽！

function sort (arr) {
    for (var i = 1; i < arr.length; i++) {
    	for (var j = 0; j < arr.length-i; j++) {
    		if(arr[j]>arr[j+1]){
    			// 交换位置
    			var temp = arr[j];
    			arr[j] = arr[j+1];
    			arr[j+1] = temp;
    		}
    	}
    }
    return arr
}
复制代码