Array类型是JavaScript中非常常用的类型。JavaScript的数组有两大特点:
- JavaScript数组的每一项可以保存任何类型的数据。也就是说,可以用数组的第一个位置来保存字符串,用第二位置来保存数值,用第三个位置来保存对象,以此类推。
- JavaScript数组的大小是可以动态调整的,即可以随着数据的添加自动增长以容纳新增数据。
以上两点跟C++数组有相当大的区别,在使用时需要注意。
一、创建数组
创建数组的基本方式有两种。
1、使用Array构造函数
例如:
var colors = new Array();
var colors = new Array(20);
var colors = new Array("red", "blue", "green");
这里需要注意的是,当给构造函数传递一个值的时候,如果传递的是数值,则会按照该数值创建包含给定项数的数组;而如果传递的是其他类型的参数,则会创建包含那个值的只有一项的数组。
另外,在使用Array构造函数时也可以省略new操作符。
2、使用数组字面量表示法
例如:
var colors = ["red", "blue", "green"];
alert(colors[0]); //显示第一项
alert(colors.length); //3
二、常用方法
JavaScript数组提供了很多可供使用的便利的方法。在使用它们的时候,不光要知道它们的作用,还要对它们的返回值以及是否改变原数组有所了解。
- push()
push()方法可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。
例如:
var colors = new Array(); //创建一个数组
var count = colors.push("red", "green"); //推入两项
alert(count); //2
- pop()
pop()方法从数组末尾移除最后一项,减少数组的length值,然后返回移除的项。
例如:
var colors = ["red", "blue"];
var item = colors.pop(); //取得最后一项
alert(item); //"blue"
push()与pop()结合使用可以模仿栈数据结构的LIFO(后进先出)过程。
- shift()
shift()方法能够移除数组中的第一个项并返回该项,同时将数组长度减1。
例如:
var colors = ["red", "blue"];
var item = colors.shift(); //取得第一项
alert(item); //"red"
push()与shift()结合使用可以模仿队列数据结构的FIFO(先进先出)过程。
- unshift()
unshift()方法能在数组前端添加任意个项并返回新数组的长度。
例如:
var colors = new Array(); //创建一个数组
var count = colors.unshift("red", "green"); //推入两项
alert(count); //2
unshift()与pop()结合使用可以从相反的方向来模拟队列。
以上四种方法可以归为一类,用来向数组前端或末尾添加或移除数据。添加数据的方法均返回添加之后新数组的长度,而移除数据的方法则返回被移除的项。以上四种方法均改变原数组。
- reverse()
reverse()方法会反转数组项的顺序,改变原数组。
例如:
var values = [1, 2, 3, 4, 5];
values.reverse();
alert(values); //5,4,3,2,1
- sort()
在使用这个方法时,需要明确的是为了实现排序,sort()方法会调用每个数组项的toString()转型方法,然后比较得到的字符串,以确定如何排序。默认按升序排列数组项。该方法改变原数组。
例如:
var values = [0, 1, 5, 10, 15];
values.sort();
alert(values}; //0,1,10,15,5
可以发现在使用sort()方法对数值排序时存在问题,需要让sort()方法接收一个比较函数作为参数,以便我们指定哪个值位于哪个值的前面。
例如:
function compare(value1, value2)
{
return value1 - value2;
}
var values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values); //0,1,5,10,15
其中比较函数中如果是第一个数减第二个数,最终结果是升序;如果要实现降序,只需要用第二个数减第一个数即可。这里我是这么来记的:如果比较函数返回的是正数,则需要对待比较的两个数执行排序(互换位置)。因此如果要实现升序,value1比value2大的话,比较函数需要返回一个正数来对调两数的位置。
- concat()
concat()方法是用来做数组拼接的,注意!它不改变原数组!使用方法如下:
var colors = ["red", "green", "blue"];
var colors2 = colors.concat("yellow", ["black", "brown"]);
alert(colors); //red,green,blue
alert(colors2); //red,green,blue,yellow,black,brown
在没有给该方法传递参数的情况下,它只是复制当前数组并返回副本。
- slice()
slice()方法能够基于当前数组中的一或多个项目创建一个新数组,注意!它不改变原数组!该方法可以接受一或两个参数,即要返回项的起始和结束位置。在只有一个参数的情况下,slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数,该方法返回起始和结束位置之间的项–但不包括结束位置的项,[ )
例如:
var colors = ["red", "green", "blue", "yellow", "purple"];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1, 4);
alert(colors2); //green,blue,yellow,purple
alert(colors3); //green,blue,yellow
- splice()
最强大的数组方法,有很多种用法。它的作用可以理解为在数组指定位置上删除/添加元素。接收的第一个参数指定删除/添加元素的起始位置,第二个参数指定从该位置开始需要删除的项数,后面的参数为在该位置处添加的新项。该方法返回一个包含从原始数组删除的项的数组(如果没有删除任何项,则返回一个空数组)。
例如:
var colors = ["red", "green", "blue"];
var removed = colors.splice(0,1); // 删除第一项
alert(colors); // green,blue
alert(removed); // red,返回的数组中只包含一项
removed = colors.splice(1, 0, "yellow", "orange"); // 从位置1 开始插入两项
alert(colors); // green,yellow,orange,blue
alert(removed); // 返回的是一个空数组
removed = colors.splice(1, 1, "red", "purple"); // 插入两项,删除一项
alert(colors); // green,red,purple,orange,blue
alert(removed); // yellow,返回的数组中只包含一项
例题(阿里巴巴2017秋招前端笔试题)
不定项选择题
将数组 var a=[1,2,3] 变成数组 [4,3,2,1] 下面的方式正确的是?
A. a.reverse().unshift(4)
B.a.push(4).reverse()
C.a.push(4);a.reverse()
D.a.splice(3, 1, 4).reverse()
解析:
A选项 reverse方法是将数组中的元素的顺序进行反转,在原数组上操作,然后返回原数组。执行a.reverse()之后a变为[3,2,1],且返回值就是a,对其进行.unshift(4)操作,a会变成[4,3,2,1],正确
B选项 push()方法的返回值是新数组的长度,该选项a最终会变成[1,2,3,4],因为最后的翻转是对一个常数(新数组长度4)操作的,没有作用到a身上,所以错误
C选项 第一条语句a变成[1,2,3,4],第二条语句对其翻转,正确
D选项 a.splice(3, 1, 4)让a变成[1,2,3,4],但是splice()函数的返回值是被删除的项组成的数组,由于没有删除项(原数组位置3处不存在项),所以返回的是空数组,最后的翻转是对空数组做的,没有作用到a身上,所以错误
综上,正确答案是AC