JavaScript数组（Array）核心用法与操作详解

JavaScript数组基础与创建方式

ECMAScript数组与其他语言中的数组存在显著差异。尽管同为有序列表，其元素可存储任意类型的数据，且大小支持动态调整。 创建数组主要采用两种方式。其一为利用Array构造函数，示例如下：

var colors = new Array();

若明确数组需保存的项目数量，可直接向构造函数传递该数值，此时该参数将自动成为length属性的值，示例如下：

var colors = new Array(20);

此外，也可向Array构造函数中传递数组应包含的具体项，代码如下所示：

var colors = new Array("red","blue");

在使用Array构造函数时，new操作符并非必须，如下所示：

var colors = Array(20);

创建数组的第二种方式是使用数组字面量表示法。该表示法由一对包含数组项的方括号构成，多个项之间以逗号分隔，示例如下：

var color = ["red","blue"];
var names = [];
var values = [1,2,]//IE8及之前3项，其他2项，不建议使用

与对象类似，使用数字字面量表示法创建数组时，不会调用Array的构造函数。

读取或设置数组值时，需使用方括号并提供基于0的数字索引，示例如下：

var colors = ["red","blue"]; //定义数组
alert(colors[0]); //red
colors[1] = "black" //修改第2项
colors[2] = "brown" //新增第3

数组的项数保存在其length属性中，该属性始终返回0或更大的数字，示例如下：

var colors = ["red","blue"]; //定义数组
var names=[];
alert(colors.length); //3
alert(names.length) //0

值得注意的是，数组的length值并非只读。通过设置此值，可从数组末尾移除项或向数组添加项，示例如下：

var colors = ["red","blue"];
colors.length = 1;
alert(colors[1]); //undefined

利用length属性也可方便地向数组末尾添加数据：

var colors = ["red","blue"];
colors[colors.length] = "black"; //在位置2新增
colors[colors.length] = "brown"; //在位置3新增

数组检测与长度属性控制

1、检测数组

对于网页或全局作用域，可使用instanceof操作符进行判断：

if(value instanceof Array){
// 执行操作
}

instanceof操作符的局限性在于全局作用域。若网页包含多个框架，则存在两个以上全局执行环境。为解决此问题，ECMAScript5新增了Array.isArray()方法，使用如下：

if(Array.isArray(value)){
// 执行操作
}

数组转化与栈队列操作方法

2、转化方法 调用数组的toString()方法会返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。而调用valueOf()返回的仍是数组。如下所示：

var colors = ['red', 'blue', 'green'];
alert(colors.toString()); //red,blue,green
alert(colors.valueOf()); //red,blue,green
alert(colors) //red,blue,green

数组继承的toLocalString()、toString()和valueOf()方法，在默认情况下都会以逗号分隔符的字符串形式返回数组项。如果使用join()方法，则可以使用不同的分隔符来构建这个字符串。join()方法只接受一个参数，即用作分隔符的字符串，如下所示：

var colors = ['red', 'blue', 'green'];
alert(colors.join(',')); //red,blue,green
alert(colors.join('|')); //red|blue|green

如果数组中的某一项值为null或者undefined，那么该值在join()、toLocalString()、toString()和valueOf()方法返回结果以空字符串表示。

3、栈方法

Javascript专门为数组提供了push()和pop()操作，以便实现类似栈的行为。

push()方法可以接收任意数量的参数，把他们逐个添加到数组末尾，并返回修改后数组的长度。pop()方法则从数组末尾弹出最后一项，减少数组的length值，然后返回移出的项。

var colors = new Array(); //定义数组
var count = colors.push("red", "blue"); //压入两项
alert(count); //2
count = colors.push("black"); //压入另一项
alert(count); //3
var item = colors.pop(); //弹出最后一项
alert(item); //"black"
alert(colors.length); //2

4、队列方法

栈数据结构的访问规则是LIFO(后进先出)，而队列的访问规则是FIFO（先进先出）。队列在列表末端添加项，在前端移出项。

shift()方法能够移除数组中的第一项，并返回该项，使数组的length减1。结合push()和shift()方法，可以像使用队列一样使用数组，如下所示：

var colors = new Array();
var count = colors.push("red", "blue");
count = colors.push("black");
alert(count);
var item = colors.shift(); //取得第一项
alert(item); //"red"
alert(colors.length); //2

ECMAScript还为数组提供了unshift()方法。unshift()和shift()方法用途相反：它在数组前端添加任意个项并返回新数组的长度。因此，同时使用unshift()和shift()方法，可以从相反方向来模拟队列，即在数组前端添加新项，从数组末端移出项，如下所示：

var colors = new Array();
var count = colors.push("red", "green");
alert(count); //2
count = colors.unshift("black"); //推入另一项
alert(count); //3
var item = colors.pop(); //取得最后一项
alert(item) //green
alert(colors.length) //2
 

数组重排序与切片操作

5、重排序方法 数组中已经存在两个可以直接用来重排序的方法：reverse()和sort()。reverse()方法会按照反转数组项的排序。

var values = [2, 1, 3, 4, 5];
values.reverse();
alert(values); //5,4,3,2,1

默认情况下，sort()方法按照升序排列数组项，调用每一项的toString()方法，比较字符串，以确定如何排序。即使数组中的每一项都是数值，sort()方法比较的都是字符串。

var values = [12, 11, 3, 4, 5];
values.sort();
alert(values); //12,11,3,4,5

我们可以通过一个比较函数当作参数传递给sort()方法。如下：

function compare(value1, value2) {
if (value1 < value2) {
return -1
} else if (value1 > value2) {
return 1
} else {
return 0
    }
}
var values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values); //0,1,5,10,15

6、操作方法 ECMAScript为操作在数组中提供了很多方法。其中，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()方法不影响原始数组。

var colors=["red","green","blue","black","brown"];
var colors2=colors.slice(1);
var colors3=colors.slice(1,4);
alert(colors2); //green,blue,black,brown
alert(colors3); //green,blue,black

slice()方法删除：可以删除任意数量的项，只需指定2个参数：要删除的第一项的位置和要删除的项数。

slice()方法插入：可以向指定位置插入任意数量的项，只需提供3个参数：起始位置、0（要删除的项数）和要插入的项。

slice()方法替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定3个参数：起始位置、要删除的项数和要插入的任意数量的项。

var colors = ["red", "green", "blue"];
//删除
var removed = colors.slice(0, 1); //删除第1项
var colors3 = colors.slice(1, 4);
alert(colors); //green,blue
alert(removed); //red
//插入
removed = colors.slice(1, 0，"yellow","orange"); //从位置1开始插入
alert(colors); //green,yellow,orange,blue
alert(removed); //空数组
//替换
removed = colors.slice(1, 1,"red","purple"); //从位置1开始插入
alert(colors); //green,"red","purple",orange,blue
alert(removed); //"yellow"

数组位置查找与迭代归并方法

7、位置方法 ECMAScript5为数组提供了两个位置方法：indexOf()和lastIndexOf()。这两个方法都接收两个参数：要查找的项和表示查找起点位置的索引（可选）。其中indexOf()方法从数组的开头开始先后查找，lastIndexOf()方法则从数组的末尾开始向前查找。 这两个方法都返回要查找的项在数组中的位置，在没有找到的情况下返回-1。

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
alert(numbers.indexOf(4)) //3
alert(numbers.lastIndexOf(4)) //5
alert(numbers.indexOf(4, 4)) //5
alert(numbers.lastIndexOf(4, 4)) //3

ECMAScript5为数组定义了5个迭代方法。每个方法都接受两个参数，第一个是进行迭代的函数，第二个是该函数的作用域对象【可选】。

进行迭代的函数接受三个参数，第一个是数组中要进行迭代的元素的值，第二个是数组中要进行迭代的元素的位置，第三个是迭代数组本身。

1. every() 对数组中的每一项运行给定的函数，如果该函数对每一项都返回true，则返回true 2. filter() 对数组中的每一项运行给定的函数，返回该函数返回true的项组成的数组。 3. forEach() 对数组中的每一项运行给定的函数，这个方法没有返回值 4. map() 对数组中的每一项运行给定的函数，返回每次函数调用的结果组成的数组 5. some() 对数组中的每一项运行给定的函数，如果该函数对任意一项返回true，则返回true 这些迭代方法支持的浏览器有，IE9+，Firefox2+，Safari3+，Opera 9.5+，chrome 在这些方法中，最相似的是every()和some()，它们都是用于查询数组中的项是否满足某个条件。对every()来说，传入的函数必须对每一项都返回true，这个方法才返回true;否则，他就返回false。而some()方法则是只要传入的函数对数组中某一项返回true，就返回true。

var num = [1,2,3,4,5,6,7,8,9];
var everyResult = num.every(function(item, index, array) {
if(item > 2) {
return true;
    }
});
alert(everyResult); //false
var someResult = num.some(function(item) {
if(item > 2) {
return true;
    }
});
alert(someResult); //true

filter()是利用指定的函数确定是否在返回的数组中包含某一项。

var num = [1,2,3,4,5,4,3,2,1];
var filterResult = num.filter(function(item) {
if(item > 2) {
return true;
    }
});
alert(filterResult); //[3,4,5,4,3]

map()也返回一个数组，而这个数组的每一项都是在原始数组中的对应项上运行传入函数的结果。

var num = [1,2,3,4,5,4,3,2,1];
var mapResult = num.map(function(item) {
if(item > 2) {
return true;
    }
}); //[2,3,6,8,10,8,6,4,2]
  

forEach()是对数组中的每一项运行传入的函数。这个方法没有返回值，本质上与使用for循环迭代数组一样。

var num = [1,2,3,4,5,4,3,2,1];
num.forEach(function(item) {
// 执行操作
});

9、归并方法

ECMAScript5中新增了两个方法：reduceRight() 和 reduce()。这两个方法都接受两个参数：第一个是用来迭代的数组的函数，这个函数有四个参数分别是，前一个值，当前值，项的索引，数组对象。然而这个函数的任何值都会作为第一个参数自动传给下一项。第二个是作为第一个函数中第一个参数的初始值 。

var nums = [1,2,3,4,5];
var sum = nums.reduce(function(prev, cur, index, array) {
return prev + cur;
});
alert(sum);//15