Skip to content

数组

数组介绍

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

数组(Array)
		- 数组也是一个对象
		- 它和我们普通对象功能类似,也是用来存储一些值的
		- 不同的是普通对象是使用字符串作为属性名的,
			而数组时使用数字来作为索引操作元素
		- 索引:
			从0开始的整数就是索引
		- 数组的存储性能比普通对象要好,在开发中我们经常使用数组来存储一些数据

如何创建数组:

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

向数组中添加元素

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

读取数组中的元素

js
			/*
			 * 读取数组中的元素
			 * 语法:数组[索引]
			 * 	如果读取不存在的索引,他不会报错而是返回undefined
			 */			
			console.log(arr[3]);

获取数组的长度

js
			/*
			 * 获取数组的长度
			 * 可以使用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;

数组的字面量

使用字面量来创建数组

js
			//使用字面量来创建数组
			//语法:[]
			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]];

数组的方法

js
			//创建一个数组
			var arr = ["孙悟空","猪八戒","沙和尚"];
push()
js
			/*
			 * push()
			 * 	- 该方法可以向数组的末尾添加一个或多个元素,并返回数组的新的长度
			 * 	- 可以将要添加的元素作为方法的参数传递,
			 * 		这样这些元素将会自动添加到数组的末尾
			 * 	- 该方法会将数组新的长度作为返回值返回
			 */
			
			var result = arr.push("唐僧","蜘蛛精","白骨精","玉兔精");
pop()
js
			/*
			 * pop()
			 * 	- 该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回
			 */
			result = arr.pop();
unshift()
js
			/*
			 * unshift()
			 * 	- 向数组开头添加一个或多个元素,并返回新的数组长度
			 * 	- 向前边插入元素以后,其他的元素索引会依次调整
			 */		
			arr.unshift("牛魔王","二郎神");
shift()
js
			/*
			 * shift()
			 * 	- 可以删除数组的第一个元素,并将被删除的元素作为返回值返回
			 */
			result = arr.shift();
slice()
js
			/*
			 * slice()
			 * 	- 可以用来从数组提取指定元素,相当与python里数组的切片
			 * 	- 该方法不会改变元素数组,而是将截取到的元素封装到一个新数组中返回
			 * 	- 参数:
			 * 		1.截取开始的位置的索引,包含开始索引
			 * 		2.截取结束的位置的索引,不包含结束索引
			 * 			- 第二个参数可以省略不写,此时会截取从开始索引往后的所有元素
			 * 		- 索引可以传递一个负值,如果传递一个负值,则从后往前计算
			 * 			-1 倒数第一个
			 * 			-2 倒数第二个
			 */
			
			var result = arr.slice(1,4);
splice()
js
			/*
			 * splice()
			 * 	- 可以用于删除数组中的指定元素
			 * 	- 使用splice()会影响到原数组,会将指定元素从原数组中删除
			 * 		并将被删除的元素作为返回值返回
			 * 	- 参数:
			 * 		第一个,表示开始位置的索引
			 * 		第二个,表示删除的数量
			 * 		第三个及以后。。
			 * 			可以传递一些新的元素,这些元素将会自动插入到开始位置索引前边
			 * 	
			 */
			
			arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
			var result = arr.splice(3,0,"牛魔王","铁扇公主","红孩儿");
concat()
js
			var arr = ["孙悟空","猪八戒","沙和尚"];
			var arr2 = ["白骨精","玉兔精","蜘蛛精"];
			var arr3 = ["二郎神","太上老君","玉皇大帝"];
			
			/*
			 * concat()可以连接两个或多个数组,并将新的数组返回
			 * 	- 该方法不会对原数组产生影响
			 */
			var result = arr.concat(arr2,arr3,"牛魔王","铁扇公主");
join()
js
/*
 * join()
 * 	- 该方法可以将数组转换为一个字符串
 * 	- 该方法不会对原数组产生影响,而是将转换后的字符串作为结果返回
 * 	- 在join()中可以指定一个字符串作为参数,这个字符串将会成为数组中元素的连接符
 * 		如果不指定连接符,则默认使用,作为连接符
 */
arr = ["孙悟空","猪八戒","沙和尚","唐僧"];
result = arr.join("-");
sort()
js
			arr = ["b","d","e","a","c"];
			/*
			 * sort()
			 * 	- 可以用来对数组中的元素进行排序
			 * 	- 也会影响原数组,默认会按照Unicode编码进行排序
			 */
			arr.sort();

注意:

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

所以有:

js
			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()
js
			/*
			 * reverse()
			 * 	- 该方法用来反转数组(前边的去后边,后边的去前边)
			 * 	- 该方法会直接修改原数组
			 */
			
			arr.reverse();

数组的遍历

利用for循环遍历
js
			//创建一个数组
			var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
			
			//所谓的遍历数组,就是将数组中所有的元素都取出来
			for(var i=0 ; i<arr.length ; i++){
				console.log(arr[i]);
			}
forEach()遍历

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

js
			 /*forEach()
			 * 		- 这个方法只支持IE8以上的浏览器
			 * 			IE8及以下的浏览器均不支持该方法,所以如果需要兼容IE8,则不要使用forEach
			 * 			还是使用for循环来遍历
			 */
			//创建一个数组
			var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
			
			/*
			 * forEach()方法需要一个函数作为参数
			 * 	- 像这种函数,由我们创建但是不由我们调用的,我们称为回调函数
			 * 	- 数组中有几个元素函数就会执行几次,每次执行时,浏览器会将遍历到的元素
			 * 		以实参的形式传递进来,我们可以来定义形参,来读取这些内容
			 * 	- 浏览器会在回调函数中传递三个参数:
			 * 		第一个参数,就是当前正在遍历的元素
			 * 		第二个参数,就是当前正在遍历的元素的索引
			 * 		第三个参数,就是正在遍历的数组
			 * 		
			 */
			arr.forEach(function(value , index , obj){
				console.log(value);
			});

练习

练习1

条件:

js
			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:形参,要提取信息的数组

js
			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
js
			//创建一个数组
			var arr = [1,2,3,2,2,1,3,4,2,5];
			
			//去除数组中重复的数字

利用嵌套循环去重

js
			//去除数组中重复的数字
			//获取数组中的每一个元素
			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--;
					}
				}
			}