JavaScript Array类型

Array类型是JavaScript中非常常用的类型。JavaScript的数组有两大特点:

  1. JavaScript数组的每一项可以保存任何类型的数据。也就是说,可以用数组的第一个位置来保存字符串,用第二位置来保存数值,用第三个位置来保存对象,以此类推。
  2. 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数组提供了很多可供使用的便利的方法。在使用它们的时候,不光要知道它们的作用,还要对它们的返回值以及是否改变原数组有所了解。

  1. push()
    push()方法可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度
    例如:
var colors = new Array();  //创建一个数组
var count = colors.push("red", "green");  //推入两项
alert(count);  //2
  1. pop()
    pop()方法从数组末尾移除最后一项,减少数组的length值,然后返回移除的项
    例如:
var colors = ["red", "blue"];
var item = colors.pop();  //取得最后一项
alert(item);  //"blue"

push()与pop()结合使用可以模仿栈数据结构的LIFO(后进先出)过程。

  1. shift()
    shift()方法能够移除数组中的第一个项并返回该项,同时将数组长度减1。
    例如:
var colors = ["red", "blue"];
var item = colors.shift();  //取得第一项
alert(item);  //"red"

push()与shift()结合使用可以模仿队列数据结构的FIFO(先进先出)过程。

  1. unshift()
    unshift()方法能在数组前端添加任意个项并返回新数组的长度
    例如:
var colors = new Array();  //创建一个数组
var count = colors.unshift("red", "green");  //推入两项
alert(count);  //2

unshift()与pop()结合使用可以从相反的方向来模拟队列。
以上四种方法可以归为一类,用来向数组前端或末尾添加或移除数据。添加数据的方法均返回添加之后新数组的长度,而移除数据的方法则返回被移除的项。以上四种方法均改变原数组。

  1. reverse()
    reverse()方法会反转数组项的顺序,改变原数组。
    例如:
var values = [1, 2, 3, 4, 5];
values.reverse();
alert(values);  //5,4,3,2,1
  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大的话,比较函数需要返回一个正数来对调两数的位置。

  1. 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

在没有给该方法传递参数的情况下,它只是复制当前数组并返回副本。

  1. 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
  1. 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

发布了11 篇原创文章 · 获赞 14 · 访问量 491

猜你喜欢

转载自blog.csdn.net/whuhewei/article/details/104595932