JavaScript笔记 (13.JavaScript数组)

本文最后更新于：6 个月前

数组

数组介绍

对象可以分为内建对象，宿主对象，自定义对象。数组属于内建对象。

1
2
3
4
5
6
7
8
数组（Array）
		- 数组也是一个对象
		- 它和我们普通对象功能类似，也是用来存储一些值的
		- 不同的是普通对象是使用字符串作为属性名的，
			而数组时使用数字来作为索引操作元素
		- 索引：
			从0开始的整数就是索引
		- 数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据

如何创建数组：

1
2
//创建数组对象
var arr = new Array();//Array()就是数组的构造函数

向数组中添加元素

1
2
3
4
5
6
// 向数组中添加元素
// 语法：数组[索引] = 值			 
arr[0] = 10;
arr[1] = 33;
arr[2] = 22;
arr[3] = 44;

读取数组中的元素

1
2
3
4
5
6
/*
 * 读取数组中的元素
 * 语法：数组[索引]
 * 	如果读取不存在的索引，他不会报错而是返回undefined
 */			
console.log(arr[3]);

获取数组的长度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/*
 * 获取数组的长度
 * 可以使用length属性来获取数组的长度(元素的个数)
 * 	语法：数组.length
 * 
 * 对于连续的数组，使用length可以获取到数组的长度（元素的个数）
 * 对于非连续的数组，使用length会获取到数组的最大的索引+1
 * 		尽量不要创建非连续的数组
 */
console.log(arr.length);

/*
 *  还可以修改length
 * 	如果修改的length大于原长度，则多出部分会空出来
 *  如果修改的length小于原长度，则多出的元素会被删除
 */
//小技巧
//向数组的最后一个位置添加元素
//语法：数组[数组.length] = 值;
arr[arr.length] = 70;
arr[arr.length] = 80;
arr[arr.length] = 90;

数组的字面量

使用字面量来创建数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//使用字面量来创建数组
//语法:[]
var arr = [];

//使用字面量创建数组时，可以在创建时就指定数组中的元素
var arr = [1,2,3,4,5,10];

//使用构造函数创建数组时，也可以同时添加元素，将要添加的元素作文构造函数的参数传递
//元素之间使用,隔开
var arr2 = new Array(10,20,30);

//创建一个数组数组中只有一个元素10
arr = [10];

//创建一个长度为10的数组
arr2 = new Array(10);

//数组中的元素可以是任意的数据类型
arr = ["hello",1,true,null,undefined];

//也可以是对象
var obj = {name:"孙悟空"};
arr[arr.length] = obj;
arr = [{name:"孙悟空"},{name:"沙和尚"},{name:"猪八戒"}];

//也可以是一个函数
arr = [function(){alert(1)},function(){alert(2)}];
//数组中也可以放数组，如下这种数组我们称为二维数组
arr = [[1,2,3],[3,4,5],[5,6,7]];

数组的方法

1
2
//创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚"];
push()
1
2
3
4
5
6
7
8
9
/*
 * push()
 * 	- 该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度
 * 	- 可以将要添加的元素作为方法的参数传递，
 * 		这样这些元素将会自动添加到数组的末尾
 * 	- 该方法会将数组新的长度作为返回值返回
 */

var result = arr.push("唐僧","蜘蛛精","白骨精","玉兔精");
pop()
1
2
3
4
5
/*
 * pop()
 * 	- 该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回
 */
result = arr.pop();
unshift()
1
2
3
4
5
6
/*
 * unshift()
 * 	- 向数组开头添加一个或多个元素，并返回新的数组长度
 * 	- 向前边插入元素以后，其他的元素索引会依次调整
 */		
arr.unshift("牛魔王","二郎神");
shift()
1
2
3
4
5
/*
 * shift()
 * 	- 可以删除数组的第一个元素，并将被删除的元素作为返回值返回
 */
result = arr.shift();
slice()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*
 * slice()
 * 	- 可以用来从数组提取指定元素,相当与python里数组的切片
 * 	- 该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回
 * 	- 参数：
 * 		1.截取开始的位置的索引,包含开始索引
 * 		2.截取结束的位置的索引,不包含结束索引
 * 			- 第二个参数可以省略不写,此时会截取从开始索引往后的所有元素
 * 		- 索引可以传递一个负值，如果传递一个负值，则从后往前计算
 * 			-1 倒数第一个
 * 			-2 倒数第二个
 */

var result = arr.slice(1,4);
splice()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*
 * splice()
 * 	- 可以用于删除数组中的指定元素
 * 	- 使用splice()会影响到原数组，会将指定元素从原数组中删除
 * 		并将被删除的元素作为返回值返回
 * 	- 参数：
 * 		第一个，表示开始位置的索引
 * 		第二个，表示删除的数量
 * 		第三个及以后。。
 * 			可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边
 * 	
 */

arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
var result = arr.splice(3,0,"牛魔王","铁扇公主","红孩儿");
concat()
1
2
3
4
5
6
7
8
9
10
var arr = ["孙悟空","猪八戒","沙和尚"];
var arr2 = ["白骨精","玉兔精","蜘蛛精"];
var arr3 = ["二郎神","太上老君","玉皇大帝"];

/*
 * concat()可以连接两个或多个数组，并将新的数组返回
 * 	- 该方法不会对原数组产生影响
 */
var result = arr.concat(arr2,arr3,"牛魔王","铁扇公主");
join()
1
2
3
4
5
6
7
8
9
/*
 * join()
 * 	- 该方法可以将数组转换为一个字符串
 * 	- 该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回
 * 	- 在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符
 * 		如果不指定连接符，则默认使用,作为连接符
 */
arr = ["孙悟空","猪八戒","沙和尚","唐僧"];
result = arr.join("-");
sort()
1
2
3
4
5
6
7
arr = ["b","d","e","a","c"];
/*
 * sort()
 * 	- 可以用来对数组中的元素进行排序
 * 	- 也会影响原数组，默认会按照Unicode编码进行排序
 */
arr.sort();

注意：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*
 * 即使对于纯数字的数组，使用sort()排序时，也会按照Unicode编码来排序，
 * 	所以对数字进排序时，可能会得到错误的结果。
 * 
 * 我们可以自己来指定排序的规则
 * 	我们可以在sort()添加一个回调函数，来指定排序规则，
 * 		回调函数中需要定义两个形参,
 * 		浏览器将会分别使用数组中的元素作为实参去调用回调函数
 * 		使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边
 * 	- 浏览器会根据回调函数的返回值来决定元素的顺序，
 * 		如果返回一个大于0的值，则元素会交换位置
 * 		如果返回一个小于0的值，则元素位置不变
 * 		如果返回一个0，则认为两个元素相等，也不交换位置
 * 
 * 	- 如果需要升序排列，则返回 a-b
 * 		如果需要降序排列，则返回b-a
 */

所以有：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
arr = [5,4,2,1,3,6,8,7];

arr.sort(function(a,b){
	
	//前边的大(这样写太过于麻烦)
	/*if(a > b){
		return -1;
	}else if(a < b){
		return 1;
	}else{
		return 0;
	}*/
	
	//升序排列
	//return a - b;
	
	//降序排列
	return b - a;
});
reverse()
1
2
3
4
5
6
7
/*
 * reverse()
 * 	- 该方法用来反转数组（前边的去后边，后边的去前边）
 * 	- 该方法会直接修改原数组
 */

arr.reverse();

数组的遍历

利用for循环遍历
1
2
3
4
5
6
7
//创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];

//所谓的遍历数组，就是将数组中所有的元素都取出来
for(var i=0 ; i<arr.length ; i++){
	console.log(arr[i]);
}
forEach()遍历

一般我们都是使用for循环去遍历数组，JS中还为我们提供了一个方法，用来遍历数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 /*forEach()
 * 		- 这个方法只支持IE8以上的浏览器
 * 			IE8及以下的浏览器均不支持该方法，所以如果需要兼容IE8，则不要使用forEach
 * 			还是使用for循环来遍历
 */
//创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];

/*
 * forEach()方法需要一个函数作为参数
 * 	- 像这种函数，由我们创建但是不由我们调用的，我们称为回调函数
 * 	- 数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素
 * 		以实参的形式传递进来，我们可以来定义形参，来读取这些内容
 * 	- 浏览器会在回调函数中传递三个参数：
 * 		第一个参数，就是当前正在遍历的元素
 * 		第二个参数，就是当前正在遍历的元素的索引
 * 		第三个参数，就是正在遍历的数组
 * 		
 */
arr.forEach(function(value , index , obj){
	console.log(value);
});

练习

练习1

条件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function Person(name , age , gender){
	this.name = name;
	this.age = age;
}
//创建一个Person对象
var per = new Person("孙悟空",18);
var per2 = new Person("猪八戒",28);
var per3 = new Person("红孩儿",8);
var per4 = new Person("蜘蛛精",16);
var per5 = new Person("二郎神",38);
/*
 * 将这些person对象放入到一个数组中
 */
var perArr = [per,per2,per3,per4,per5];

要求：创建一个函数，可以将perArr中的满18岁的Person提取出来，然后封装到一个新的数组中并返回
arr:形参，要提取信息的数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function getAdult(arr){
	//创建一个新的数组
	var newArr = [];
	
	//遍历arr，获取arr中Person对象
	for(var i=0 ; i<arr.length ; i++){
		var p = arr[i];
		//判断Person对象的age是否大于等于18
		if(p.age >= 18){
			//如果大于等于18，则将这个对象添加到newArr中
			//将对象放入到新数组中
			newArr.push(p);
		}
	}
	//将新的数组返回
	return newArr;
	
}

var result = getAdult(perArr);
练习2
1
2
3
4
//创建一个数组
var arr = [1,2,3,2,2,1,3,4,2,5];

//去除数组中重复的数字

利用嵌套循环去重

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//去除数组中重复的数字
//获取数组中的每一个元素
for(var i=0 ; i<arr.length ; i++){
	//console.log(arr[i]);
	/*获取当前元素后的所有元素*/
	for(var j=i+1 ; j<arr.length ; j++){
		//console.log("---->"+arr[j]);
		//判断两个元素的值是否相等
		if(arr[i] == arr[j]){
			//如果相等则证明出现了重复的元素，则删除j对应的元素
			arr.splice(j,1);
			//当删除了当前j所在的元素以后，后边的元素会自动补位
			//此时将不会在比较这个元素吧，我需要在比较一次j所在位置的元素
			//使j自减
			j--;
		}
	}
}
计算机及嵌入式软件 > 编程语言 > JavaScript
#JavaScript
JavaScript笔记 (13.JavaScript数组)
https://www.duruofu.xyz/2023/06/05/3.软件相关/编程语言/JS/2.15 数组/
作者
DuRuofu
发布于
2023年6月5日
更新于
2024年1月5日
许可协议