Javascript数组

1.创建数组

创建数组有以下几种方法：

var arr1 = [1,2,3];
var arr2 = new Array(4,5,6);
var arr3 = Array(7,8,9);
var arr4 = Array.of(10,11,12);

如果要创建一个元素的数组，那么就不能用new Array和Array来创建，只能用字面值(=[])和Array.of，如果在它们(new Array和Array)的括号里写入一个数字，那么这个数字不是元素，而会变为数组的长度。如下图：

var singleArr1 = [1];
console.log(singleArr1);
var singleArr2 = new Array(2);
console.log(singleArr2);
var singleArr3 = Array(3);
console.log(singleArr3);
var singleArr4 = Array.of(4);
console.log(singleArr4);

运行结果：

2.访问数组

访问数组利用[下标索引]来访问，例如：

var arr = [1,2,3];
console.log(arr.length); //返回数组的长度，这里输出3
console.log(arr[0]); //下标从0开始，到length-1结束，这里输出1
console.log(arr[1]); //这里输出2
console.log(arr[2]); //这里输出3

如果[]中的下标索引超出了范围那么就会返回一个undefined。

3.添加元素

添加元素可以在任意位置，如果该位置有元素了那么会进行替换，如果添加的位置没有元素那么就直接添加进去并且数组的长度也会发生对应的变化。

var arr = [1,2,3];
arr[0] = 4; //数组arr第一个元素0被替换掉变成了4
console.log(arr);
arr[3] = 5; //在数组的末尾新增一个元素5，数组的长度由3变成了4
console.log(arr);
arr[8] = 9; //在数组的下标为8的位置新增元素9，下标为4-7的位置仍然为空(undefined)
console.log(arr);
console.log(arr.length); //数组的长度

运行结果如下图：

4.删除元素

删除元素可以通过直接修改数组的长度来实现：

var arr = [1,2,3]; //初始数组函数长度为3
arr.length = 2; //修改长度为2
console.log(arr); //这里输出的数组就为[1,2]，默认删除最后一个元素
arr.length = 0; //修改长度为0，即清空数组
console.log(arr); //这里输出空数组

要想删除指定位置的元素，使用splice()方法，可以实现删除或者是删除+新增，第一个参数为要删除的起始下标，第二个参数为删除的个数(长度)，后面的参数就是要新增进去的元素。

var arr = [1,2,3,4,5,6];
arr.splice(2,1); //调用splice方法删除下标为2，即值为3的元素
console.log(2,1); //输出[1,2,4,5,6]
arr.splice(1,2,3,7,8); //调用splice方法删除从下标为1开始，即值为2和4的两个元素，并在该位置添加3,7,8这三个元素
console.log(2,1); //输出[1,3,7,8,5,6]
arr.splice(1,0,9,10); //这里指定了删除个数为0，就是不删除仅仅是新增加

5.数组遍历

数组遍历有三种方式：

1. for循环

var arr = [1,3,5,7,9];
for(let i = 0;i < arr.length;i++){
	conslole.log(arr[i]); //这里的i仅仅是作为数组下标来循环
}

2. for…of…

var arr = [1,3,5,7,9];
for(let ele of arr){
	conslole.log(ele); //这里的ele就是指arr循环中的每个元素，不用再添加下标
}

3. arr内置的forEach()方法

var arr = [1,3,5,7,9];
arr.forEach((ele,index,self)=>{ //传递三个参数，第一个就是循环的每个元素，index是下标索引，self就是数组arr本身
	console.log(ele,index,self); 
});

运行结果如下所示：

6.栈模式

栈是一种后进先出的数据结构，也就是说先进去的后出来，后进去的先出来。

var stack = [1,2,3];
stack.push(4); //push用于向栈中添加元素
console.log(stack);
stack.push(5,6,7); //也可以同时添加多个元素
console.log(stack);
var last = stack.pop(); //pop从栈中取出元素，从后往前取
console.log(last); //输出结果7
console.log(stack); //取出7后，原来栈就只剩1-6，6个元素了
console.log(stack[stack.length - 1]); //当然获取最后一个元素也可以通过下标直接获取

运行结果：

7.队列模式

和栈相对应，队列是一种先进先出的数据结构。

var queue = [1,2,3];
queue.push(4,5,6); //通过push向队列中添加三个元素4，5，6
console.log(queue);
var first = queue.shift() //shift用于取出队列的第一个元素，并保存在变量first中
console.log(first);
console.log(queue);

queue.unshift(10,11,12); //unshift的作用就是插队，也就是在队列的首部加入元素
console.log(queue);

运行结果：

8.反转数组

反转数组就是将数组逆序(倒序)输出。

var arr = [1,2,3];
console.log(arr);
console.log(arr.reverse()); //reverse()不仅会返回逆序输出后的结果还会直接将原数组改变
console.log(arr); //因此在这里输出的数组已经变成了[3,2,1]

当然reverse()方法也能对字符串分割后的数组进行反转，例如：

console.log("hello".split("").reverse().join("")); //输出olleh

split()方法用于将字符串按照指定字符分隔成数组，join()方法刚好相反，就是将数组中的元素放入同一个字符串中，并以指定的字符分隔。

9.数组排序

数组排序用到sort()方法：

var arr = [1,3,5,4,2];
arr.sort(); //sort()方法也和reverse()方法类似，都会直接改变原数组
console.log(arr);
arr.sort((a,b)=>{ //实现降序排列
	if (a>b) {
		return -1; 
	} else if (a<b) {
		return 1;
	} else {
		return 0;
	}
})
//arr.sort((a,b)=> b-a); //上面的代码也可以简写成b-a
console.log(arr);

运行结果：

10.数组连接

两个数组的连接可以用concat()方法：

var arr1 = [1,2,3];
var arr2 = [4,5,6];
console.log(arr1.concat(arr2)); //输出结果就为1,2,3,4,5,6，如果要连接多个数组在括号中传递多个参数即可

11.数组裁切(切片)

数组的裁切就是获取到数组的一部分，用到slice()方法，第一个参数就是开始位置的索引*，第二个参数(可以没有)是结束位置的索引(注意是取不到的)。-1表示最后一个元素的索引，-2表示倒数第二个元素的索引，…以此类推。

var arr = [1,2,3,4,5];
console.log(arr.slice(1)); //输出2,3,4,5
console.log(arr.slice(1,3)); //输出2,3
console.log(arr.slice(1,-1)); //输出2,3,4

12.map数组

map()方法与forEach()方法类似，同样都是可以传递三个参数(ele,index,self)，用于处理数组中的每个元素。

var arr = [1,2,3,4];
var maparr = arr.map(ele => ele *2); //将数组的每个元素*2
console.log(maparr);

13.reduce数组

reduce函数的回调函数中接收四个参数：第一个参数是上一次计算的结果，第二个参数是当前遍历的数组元素，第三个是当前遍历的数组元素的索引，第四个是元素所属的数组。

var arr = [1,2,3,4];
var result = arr.reduce((previous,current)=>previous+current,0); //第一个参数就是一个回调函数，第二个参数是初始值，即一开始的previous为0，current为1，等到第二次调用时previous为1(0+1)，current为2...输出结果为10
console.log(result);
var result2 = arr.reduce((previous,current)=>previous+current); //这里没有写一开始的previous，那么previous就是1，currnet为2。最终结果还是10
console.log(result2);

14.数组过滤

数组过滤用于将数据进行筛选。

var arr = [1,2,3,4,5,6];
var filteredArr = arr.filter(item => item > 4); //参数时一个回调函数，item是遍历到的元素，如果是true会将元素保存到结果中
console.log(filteredArr); //输出结果5,6

15.数组测试

数组测试可以判断数组当中是否每个元素都符合条件或者是是否存在某个元素符合条件。用到的方法有：全部元素every()，某个元素some()

var arr = [1,2,3,4,5,6];
var result = arr.every(item => item > 0); //判断数组中的每个元素是否都大于0
console.log(result); //输出结果true
var resultSome = arr.some(item => item > 5); //判断数组中是否存在元素大于5
console.log(resultSome); //输出结果true

16.destructuring解构操作符

所谓的解构操作符就是将数组中的元素拿出来

var arr = [1,2,3];
var [a,b,c] = arr; //将arr中的三个元素分别赋值给a，b，c三个变量，对应顺序赋值
console.log(a,b,c); //输出结果1,2,3

var [d,e] = arr;
console.log(d,e); //输出结果1,2

var [,f,] = arr; //只需要取到中间的元素2，但是仍然需要写逗号留出第一个元素的位置，下面这种也是可以的
//var [,f] = arr;
console.log(f); //输出结果2

当然还能够直接解构函数中的返回值：

function jiegou() {
	let name = "小明";
	let age = 18;
	return [name,age];
}

var [myname,myage] = jiegou();
console.log(myname,myage); //输出结果

17.rest操作符

rest操作符一般都和解构操作符一起使用，用于获取到解构之后剩下的元素。当然也能够作为函数的参数，用于接收多个参数来使用：

var arr = [1,2,3,4,5,6,7,8];
var [a,b,...rest] = arr; //a变量取到元素1，b变量取到元素2，剩余元素存放在rest变量中
console.log(a,b); //输出结果1,2
console.log(rest); //输出结果3,4,5,6,7,8
var [a,,b,...rest] = arr; //a变量取到元素1，b变量取到元素3，后面剩余元素存放在rest变量中
//但是...rest只能放在末尾使用不能放在中间
console.log(a,b); //输出结果1,3
console.log(rest); //输出结果4,5,6,7,8
function variousArgs(...args){
	console.log(args);
}
variousArgs(1,2,3); //输出结果1,2,3

18.多维数组

多维数组就是一个数组中的元素又是一个数组*，即数组的嵌套。

var arr = [];
for(let i = 0;i < 5;i++) {
	arr[i] = [];
	for(let j = 0;j < 4;j++) {
		arr[i][j] = i+j;
	}
}
console.log(arr);

运行结果：