JavaScript数组操作全指南：创建、检测及常用原型方法解析

JavaScript数组概述与创建

数组是前端开发中高频出现的考点，JavaScript的数组实现机制与其他编程语言存在差异。为了便于后续深入学习数组相关操作，本文整理了数组的基础操作方法供参考。

数组创建

在JavaScript中，创建数组主要包含两种基本方式。第一种方式是利用Array构造函数进行实例化。


var arr1 = new Array(); //创建一个空数组
var arr2 = new Array(20); // 创建一个包含20项的数组
var arr3 = new Array("lily","lucy","Tom"); // 创建一个包含3个字符串的数组

第二种基础创建方式则是采用数组字面量表示法，即通过方括号直接定义数组内容。


var arr4 = []; //创建一个空数组
var arr5 = [20]; // 创建一个包含1项的数组
var arr6 = ["lily","lucy","Tom"]; // 创建一个包含3个字符串的数组

在访问或修改数组元素时，需使用方括号语法并提供基于0的数字索引值。


var arr6 = ["lily","lucy","Tom"]; // 创建一个包含3个字符串的数组
alert(arr6[0]); //lily
arr6[1] = "mary"; //修改第二项为mary
arr6[3] = "sean"; //增加第四项为sean

JavaScript数组的length属性具备可修改性，以下示例展示了通过调整length属性来改变数组大小的具体操作。


var arr = ["lily","lucy","Tom"]; // 创建一个包含3个字符串的数组
arr[arr.length] = "sean"; //在下标为3处（也就是数组尾部）添加一项"sean"
arr.length = arr.length-1; //将数组的最后一项删除

若需判断一个对象是否为数组实例，在ECMAScript 5标准颁布前，通常采用instanceof Array进行判断。然而，instanceof操作符存在局限，它假设环境中仅有一个全局执行上下文。若网页包含多个框架，则存在多个全局执行环境及不同版本的Array构造函数。此时，从一个框架向另一个框架传递数组时，传入的数组与目标框架中原生创建的数组将拥有不同的构造函数，导致instanceof判断失效。

ECMAScript 5引入了Array.isArray()方法，旨在确定某个值究竟是否为数组，无论该数组在哪个全局执行环境中创建。

数组原型方法详解

数组方法

接下来介绍数组的具体方法。数组方法既包括数组原型方法，也包含从Object对象继承的方法。本文仅聚焦于数组的原型方法，主要涵盖以下内容：

join() push()和pop() shift() 和 unshift() sort() reverse() concat() slice() splice() indexOf()和 lastIndexOf() （ES5新增） forEach() （ES5新增） map() （ES5新增） filter() （ES5新增） every() （ES5新增） some() （ES5新增） reduce()和 reduceRight() （ES5新增）

针对ES5新增方法的浏览器兼容性情况如下：

Opera 11+ Firefox 3.6+ Safari 5+ Chrome 8+ Internet Explorer 9+

对于支持上述版本的浏览器，可通过扩展Array原型来实现兼容。下文将详细介绍各方法的基本功能。

join与字符串处理

1、join()

join(separator)：该方法将数组元素组合成一个字符串，以指定的separator作为分隔符。若省略该参数，则默认使用逗号作为分隔符。此方法仅接收一个参数，即分隔符。


var arr = [1,2,3];
console.log(arr.join()); // 1,2,3
console.log(arr.join("-")); // 1-2-3
console.log(arr); // [1, 2, 3]（原数组不变）

利用join()方法可以实现字符串的重复输出。只需传入目标字符串及重复次数，即可返回重复后的字符串，具体实现函数如下：


function repeatString(str, n) {
return new Array(n + 1).join(str);
}
console.log(repeatString("abc", 3)); // abcabcabc
console.log(repeatString("Hi", 5)); // HiHiHiHiHi

栈与队列操作：push/pop与shift/unshift

2、push()和pop()

push()：可接收任意数量的参数，将这些参数逐个追加到数组末尾，并返回修改后数组的length值。 pop()：从数组末尾移除最后一项，减少数组的length值，并返回被移除的那一项。


var arr = ["Lily","lucy","Tom"];
var count = arr.push("Jack","Sean");
console.log(count); // 5
console.log(arr); // ["Lily", "lucy", "Tom", "Jack", "Sean"]
var item = arr.pop();
console.log(item); // Sean
console.log(arr); // ["Lily", "lucy", "Tom", "Jack"]

3、shift() 和 unshift()

shift()：删除原数组的第一项，并返回被删除元素的值；若数组为空，则返回undefined。 unshift：将参数添加到原数组的开头，并返回更新后的数组长度。

这组方法与前述的push()和pop()功能对应，前者用于操作数组头部，后者用于操作数组尾部。


var arr = ["Lily","lucy","Tom"];
var count = arr.unshift("Jack","Sean");
console.log(count); // 5
console.log(arr); //["Jack", "Sean", "Lily", "lucy", "Tom"]
var item = arr.shift();
console.log(item); // Jack
console.log(arr); // ["Sean", "Lily", "lucy", "Tom"]

排序与反转：sort与reverse

4、sort()

sort()：默认按升序排列数组项，即最小值位于最前，最大值位于最后。

在排序过程中，sort()方法会调用每个数组项的toString()转型方法，随后比较生成的字符串以确定顺序。即使数组元素均为数值，sort()比较的仍是字符串，因此可能出现如下现象：


var arr1 = ["a", "d", "c", "b"];
console.log(arr1.sort()); // ["a", "b", "c", "d"]
arr2 = [13, 24, 51, 3];
console.log(arr2.sort()); // [13, 24, 3, 51]
console.log(arr2); // [13, 24, 3, 51](元数组被改变)

为解决上述问题，sort()方法允许接收一个比较函数作为参数，以指定值的先后顺序。比较函数接收两个参数：若第一个参数应排在第二个之前，则返回负数；若两参数相等，返回0；若第一个参数应排在第二个之后，返回正数。以下是一个简单的比较函数示例：


function compare(value1, value2) {
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
}
arr2 = [13, 24, 51, 3];
console.log(arr2.sort(compare)); // [3, 13, 24, 51]

若需通过比较函数实现降序排列，只需交换比较函数返回值即可：


function compare(value1, value2) {
if (value1 < value2) {
return 1;
} else if (value1 > value2) {
return -1;
} else {
return 0;
}
}
arr2 = [13, 24, 51, 3];
console.log(arr2.sort(compare)); // [51, 24, 13, 3]

5、reverse()

reverse()：用于反转数组中各项的顺序。


var arr = [13, 24, 51, 3];
console.log(arr.reverse()); //[3, 51, 24, 13]
console.log(arr); //[3, 51, 24, 13](原数组改变)

数组拼接与切片：concat与slice

6、concat()

concat()：将参数添加到原数组中。该方法首先创建当前数组的一个副本，然后将接收到的参数追加到副本末尾，最后返回新构建的数组。若未向concat()传递参数，则仅复制当前数组并返回副本。


var arr = [1,3,5,7];
var arrCopy = arr.concat(9,[11,13]);
console.log(arrCopy); //[1, 3, 5, 7, 9, 11, 13]
console.log(arr); // [1, 3, 5, 7](原数组未被修改)

从测试结果可见：若传入非数组参数，则直接将其添加到数组末尾；若传入数组，则将数组中的各项逐一添加到原数组中。但若传入的是二维数组，结果会有所不同：


var arrCopy2 = arr.concat([9,[11,13]]);
console.log(arrCopy2); //[1, 3, 5, 7, 9, Array[2]]
console.log(arrCopy2[5]); //[11, 13]

上述代码中，arrCopy2数组的第五项是一个包含两项的子数组。这表明concat方法仅将传入数组中的每一项添加到目标数组，若传入数组的某项本身是数组，则该子数组将作为单一元素被添加到arrCopy2中。

7、slice()

slice()：返回从原数组中指定起始下标到结束下标之间的项组成的新数组。slice()可接受一个或两个参数，分别指定返回项的起始和结束位置。若仅有一个参数，slice()返回从该指定位置开始至数组末尾的所有项。若有两个参数，则返回起始和结束位置之间的项，但不包含结束位置的项。


var arr = [1,3,5,7,9,11];
var arrCopy = arr.slice(1);
var arrCopy2 = arr.slice(1,4);
var arrCopy3 = arr.slice(1,-2);
var arrCopy4 = arr.slice(-4,-1);
console.log(arr); //[1, 3, 5, 7, 9, 11](原数组没变)
console.log(arrCopy); //[3, 5, 7, 9, 11]
console.log(arrCopy2); //[3, 5, 7]
console.log(arrCopy3); //[3, 5, 7]
console.log(arrCopy4); //[5, 7, 9]

arrCopy仅设置了一个参数，即起始下标为1，因此返回从下标1（含）开始至数组末尾的数组。 arrCopy2设置了两个参数，返回从起始下标1（含）到终止下标4（不含）的子数组。 arrCopy3设置了两个参数，其中终止下标为负数。当出现负数时，将其加上数组长度的值（6）以替换该位置索引，因此实际是从1开始到4（不含）的子数组。 arrCopy4中两个参数均为负数，均加上数组长度6转换为正数，因此等效于slice(2,5)。

数组修改利器：splice

8、splice()

splice()：这是一个功能强大的数组方法，支持多种用法，可实现删除、插入和替换操作。

删除：可删除任意数量的项，只需指定两个参数：要删除的第一项的位置及要删除的项数。例如，splice(0,2)会删除数组的前两项。

插入：可向指定位置插入任意数量的项，只需提供三个参数：起始位置、0（表示不删除项）以及要插入的项。例如，splice(2,0,4,6)会从数组位置2开始插入4和6。替换：可向指定位置插入任意数量的项，同时删除任意数量的项，只需指定三个参数：起始位置、要删除的项数以及要插入的任意数量项。插入的项数无需与删除的项数相等。例如，splice(2,1,4,6)会删除当前位置2的项，随后从位置2开始插入4和6。

splice()方法始终返回一个数组，该数组包含从原始数组中删除的项；若未删除任何项，则返回空数组。


var arr = [1,3,5,7,9,11];
var arrRemoved = arr.splice(0,2);
console.log(arr); //[5, 7, 9, 11]
console.log(arrRemoved); //[1, 3]
var arrRemoved2 = arr.splice(2,0,4,6);
console.log(arr); // [5, 7, 4, 6, 9, 11]
console.log(arrRemoved2); // []
var arrRemoved3 = arr.splice(1,1,2,4);
console.log(arr); // [5, 2, 4, 4, 6, 9, 11]
console.log(arrRemoved3); //[7]

查找索引：indexOf与lastIndexOf

9、indexOf()和 lastIndexOf()

indexOf()：接收两个参数：要查找的项及可选的表示查找起点位置的索引。该方法从数组开头（位置0）向后查找。 lastIndexOf：接收两个参数：要查找的项及可选的表示查找起点位置的索引。该方法从数组末尾向前查找。

这两个方法均返回要查找的项在数组中的位置，若未找到则返回-1。在比较第一个参数与数组各项时，使用全等操作符进行严格匹配。


var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5)); //2
console.log(arr.lastIndexOf(5)); //5
console.log(arr.indexOf(5,2)); //2
console.log(arr.lastIndexOf(5,4)); //2
console.log(arr.indexOf("5")); //-1

ES5新增遍历与归并方法

10、forEach()

forEach()：用于遍历数组，对数组中的每一项执行给定的函数。该方法无返回值。参数均为function类型，默认包含传参，分别为：遍历的数组内容、对应的数组索引以及数组本身。


var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a){
console.log(x + '|' + index + '|' + (a === arr));
});
// 输出为：
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true

11、map()

map()：意为“映射”，对数组中的每一项运行给定函数，返回由每次函数调用结果组成的新数组。

以下代码展示了利用map方法计算数组中每个数值的平方。


var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){
return item*item;
});
console.log(arr2); //[1, 4, 9, 16, 25]

12、filter()

filter()：具备“过滤”功能，对数组中的每一项运行给定函数，返回满足过滤条件组成的新数组。


var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(x, index) {
return index % 3 === 0 || x >= 8;
}); 
console.log(arr2); //[1, 4, 7, 8, 9, 10]

13、every()

every()：用于判断数组中每一项是否都满足指定条件。仅当所有项均满足条件时，才返回true。


var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(function(x) {
return x < 10;
}); 
console.log(arr2); //true
var arr3 = arr.every(function(x) {
return x < 3;
}); 
console.log(arr3); // false

14、some()

some()：用于判断数组中是否存在满足条件的项。只要有一项满足条件，即返回true。


var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(x) {
return x < 3;
}); 
console.log(arr2); //true
var arr3 = arr.some(function(x) {
return x < 1;
}); 
console.log(arr3); // false

15、reduce()和 reduceRight()

这两个方法均用于迭代数组的所有项，并构建一个最终返回的值。reduce()方法从数组的第一项开始，逐个遍历至最后。而reduceRight()则从数组的最后一项开始，向前遍历至第一项。

这两个方法均接收两个参数：一个在每一项上调用的函数，以及可选的作为归并基础的初始值。

传给reduce()和reduceRight()的函数接收四个参数：前一个值、当前值、项的索引以及数组对象。该函数返回的任何值都会自动作为第一个参数传递给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数则是数组的第二项。

以下代码使用reduce()实现数组求和，并在数组初始值基础上额外增加了10。


var values = [1,2,3,4,5];
var sum = values.reduceRight(function(prev, cur, index, array){
return prev + cur;
},10);
console.log(sum); //25

以上内容为JavaScript数组方法的详细介绍，希望对大家有所帮助。如有任何疑问，欢迎留言，小编会及时回复。感谢大家对本站的支持！

JavaScript数组方法详解：从创建到ES5新增遍历与归并