JavaScript数组常用操作方法详解

JavaScript数组操作概述

本文整理并汇总了JavaScript中数组的常用操作技巧，供读者参考学习。

前言

许多开发者习惯使用jQuery或Underscore等类库提供的数组操作方法，例如$.isArray、_.some和_.find等。这些方法本质上是对原生JavaScript数组操作的封装。本文将重点汇总原生JavaScript数组的常用API，旨在为实际编程中的问题解决提供实用参考。

数组的本质与类型判断

一、数组的本质 在JavaScript中，数组是一种特殊的对象，其索引被视为对象的属性，且这些索引通常为整数。然而，由于JavaScript对象的所有属性名必须为字符串类型，因此内部的数字索引在存储时会被自动转换为字符串。

二、数组操作方法

1. 判断数组类型

var array0 = []; // 字面量
var array1 = new Array(); // 构造器
// 注意：在IE6/7/8下是不支持Array.isArray方法的
alert(Array.isArray(array0));
// 考虑兼容性，可使用
alert(array1 instanceof Array);
// 或者
alert(Object.prototype.toString.call(array1) === '[object Array]');

数组与字符串的转换

2. 数组与字符串的转换

这一过程非常直接：将数组转换为字符串可使用join方法，而将字符串转换为数组则使用split方法。

// join - 由数组转换为字符串，使用join
console.log(['Hello', 'World'].join(',')); // Hello,World
// split - 由字符串转换为数组，使用split
console.log('Hello World'.split(' ')); // ["Hello", "World"]

数组元素的查找与连接

3. 查找元素

开发者通常熟悉字符串的indexOf方法，但可能忽略了数组也具备相同的indexOf方法用于查找元素。

// indexOf - 查找元素
console.log(['abc', 'bcd', 'cde'].indexOf('bcd')); // 1
// 
var objInArray = [
 {
 name: 'king',
 pass: '123'
 },
 {
 name: 'king1',
 pass: '234'
 }
];
console.log(objInArray.indexOf({
 name: 'king',
 pass: '123'
})); // -1
var elementOfArray = objInArray[0];
console.log(objInArray.indexOf(elementOfArray)); // 0

上述示例表明，当数组包含对象时，indexOf方法并不进行深度比较，而是仅比较元素的引用地址。因此，即使内容相同的对象，若引用不同，indexOf也会返回-1。

4. 数组连接

使用concat方法可以连接数组，需要注意的是，该方法会返回一个新数组，而不会修改原数组。

var array1 = [1, 2, 3];
var array2 = [4, 5, 6];
var array3 = array1.concat(array2); // 实现数组连接之后，会创建出新的数组
console.log(array3);

数组元素的增删操作

5. 类列表操作（增删元素）

用于添加元素的方法包括push和unshift，移除元素的方法包括pop和shift。

// push/pop/shift/unshift
var array = [2, 3, 4, 5];
// 添加到数组尾部
array.push(6);
console.log(array); // [2, 3, 4, 5, 6]
// 添加到数组头部
array.unshift(1);
console.log(array); // [1, 2, 3, 4, 5, 6]
// 移除最后一个元素
var elementOfPop = array.pop();
console.log(elementOfPop); // 6
console.log(array); // [1, 2, 3, 4, 5]
// 移除第一个元素
var elementOfShift = array.shift();
console.log(elementOfShift); // 1
console.log(array); // [2, 3, 4, 5]

splice方法的进阶用法

6. splice方法

splice方法主要有两个用途： ① 从数组中间位置添加和删除元素 ② 从原有数组中，获取一个新数组

这两个用途往往结合使用，具体场景下可能侧重其一。

若要在数组中间位置添加或删除元素，splice方法需要以下参数： ① 起始索引（即希望开始操作的位置） ② 需要删除或提取的元素个数（添加元素时此参数设为0） ③ 想要添加进数组的元素

var nums = [1, 2, 3, 7, 8, 9];
nums.splice(3, 0, 4, 5, 6);
console.log(nums); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
// 紧接着做删除操作或者提取新的数组
var newnums = nums.splice(3, 4);
console.log(nums); // [1, 2, 3, 8, 9]
console.log(newnums); // [4, 5, 6, 7]

数组排序技巧

7. 排序

主要介绍reverse和sort两个方法。数组反转使用reverse，sort方法不仅适用于简单排序，也可用于复杂排序。

// 反转数组
var array = [1, 2, 3, 4, 5];
array.reverse();
console.log(array); // [5, 4, 3, 2, 1]
我们先对字符串元素的数组进行排序
var arrayOfNames = ["David", "Mike", "Cynthia", "Clayton", "Bryan", "Raymond"];
arrayOfNames.sort();
console.log(arrayOfNames); // ["Bryan", "Clayton", "Cynthia", "David", "Mike", "Raymond"]

我们对数字元素的数组进行排序

// 如果数组元素时数字类型，sort()方法的排序结果就不能让人满意了
var nums = [3, 1, 2, 100, 4, 200];
nums.sort();
console.log(nums); // [1, 100, 2, 200, 3, 4]

sort方法默认按照字典顺序对元素进行排序，因此它假定元素都是字符串类型。即使元素是数字类型，也会被当作字符串处理。此时，可以在调用方法时传入一个大小比较函数，sort()方法将根据该函数比较数组中两个元素的大小，从而决定整个数组的顺序。

var compare = function(num1, num2) {
return num1 > num2;
};
nums.sort(compare);
console.log(nums); // [1, 2, 3, 4, 100, 200]
var objInArray = [
 {
 name: 'king',
 pass: '123',
 index: 2
 },
 {
 name: 'king1',
 pass: '234',
 index: 1
 }
];
// 对数组中的对象元素，根据index进行升序
var compare = function(o1, o2) {
 return o1.index > o2.index;
};
objInArray.sort(compare);
console.log(objInArray[0].index < objInArray[1].index); // true

数组迭代器方法详解

8. 迭代器方法

主要包含forEach和every、some和map、filter。 forEach大家比较熟悉，这里重点介绍其他四种方法。 every方法接受一个返回值为布尔类型的函数，对数组中的每个元素使用该函数。如果对于所有的元素，该函数均返回true，则该方法返回true。

var nums = [2, 4, 6, 8];
// 不生成新数组的迭代器方法
var isEven = function(num) {
return num % 2 === 0;
};
// 如果都是偶数，才返回true
console.log(nums.every(isEven)); // true
some方法也接受一个返回值为布尔类型的函数，只要有一个元素使得该函数返回true，该方法就返回true。
var isEven = function(num) {
 return num % 2 === 0;
};
var nums1 = [1, 2, 3, 4];
console.log(nums1.some(isEven)); // true

map和filter这两个方法都可以产生新数组，map返回的新数组是对原有元素应用某个函数得到的结果。如：

var up = function(grade) {
return grade += 5;
}
var grades = [72, 65, 81, 92, 85];
var newGrades = grades.ma

filter方法和every方法很类似，传入一个返回值为布尔类型的函数。和every()方法不同的是，当对数组中的所有元素应用该函数，结果均为true时，该方法并不返回true，而是返回一个新数组，该数组包含应用该函数后结果为true的元素。

var isEven = function(num) {
return num % 2 === 0;
};
var isOdd = function(num) {
return num % 2 !== 0;
};
var nums = [];
for (var i = 0; i < 20; i++) {
nums[i] = i + 1;
}
var evens = nums.filter(isEven);
console.log(evens); // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
var odds = nums.filter(isOdd);
console.log(odds); // [1, 3, 5, 7, 9, 11, 13, 15, 17, 19]

兼容性总结

三、总结

以上还存在某些方法在低级浏览器不支持的问题，还需要再采用其他方法进行兼容实现。

这些都是常见的可能大家不太容易想到的方法。大家不妨多留意一下。

希望本文所述对大家的javascript程序设计有所帮助。