JavaScript数组常用操作

在JavaScript中，对数组的操作是最常用的操作之一，下面从操作目的角度（增删改查等）介绍一下JS中数组的操作。

目录

创建

增（push()、unshift()、concat()）

删（pop()、shift()、splice()）

改（splice()）

查（indexOf()、lastIndexOf()、slice()）

翻转（reverse()）

排序（sort()）

遍历（every()、some()、filter()、map()、forEach()、reduce()、reduceRight()）

转字符串（toString()、join()）

参考资料

---

 

创建

1. 使用Array构造函数

var colors = new Array(); // colors: []
var colors = new Array(3); // colors: [,,]
var colors = new Array("red", "blue", "green"); // colors: ["red", "blue", "green"]
// 可以省略new操作符，结果相同
var colors = Array();
var colors = Array(3);
var colors = Array("red", "blue", "green");

2. 使用数组字面量表示法

var colors = [];
var colors = ["red", "blue", "green"];
var color = [1, 2, ]; // 不要这样！这样会创建包含2或3项的数组(IE8及更早版本会创建colors: [1, 2, undefined])

增（push()、unshift()、concat()）

var a = [1,2,3,4,5];
/* 增加到最后
 * arrayObject.push(newelement1,newelement2,....,newelementX)
 */
a.push(6); // return: 6;(返回长度6); a: [1, 2, 3, 4, 5, 6]
a.push('xx'); // return: 7;(返回长度7) a: [1, 2, 3, 4, 5, 6, "xx"]
            
/* 增加到最前
 * arrayObject.unshift(newelement1,newelement2,....,newelementX)
 */
a.unshift(); // return: 7;(返回长度7); a: [1, 2, 3, 4, 5, 6, "xx"]
a.unshift("cc"); // return: 8;(返回长度8) a: ["cc", 1, 2, 3, 4, 5, 6, "xx"]

// 数组合并
var a = ['a','b','c','d','e'];
var b= [9999,10000]
// arrayObject.concat(arrayX,arrayX,......,arrayX)
a.concat(b); // return: ["a", "b", "c", "d", "e", 9999, 10000]; a: ["a", "b", "c", "d", "e"]

删（pop()、shift()、splice()）

var a = [1,2,3,4,5];
// 删除最后一项，返回删除元素的值，如果数组为空则返回undefined
a.pop(); // return: 5; a: [1, 2, 3, 4]

// 删除第一项，返回删除元素的值，如果数组为空则返回undefined
a.shift(); // return: 1; a: [2,3,4]

// 裁剪数组，返回截取的数组，原数组变化
var b = ['a','b','c','d','e']; 
/* splice(start, deleteCount, val1, val2, ...)
 * 从start位置开始删除deleteCount项，并从该位置起插入val1,val2,...
 */
b.splice(0, 2); // return: ['a','b']; b: ['c','d','e']

改（splice()）

var a = [1, 2, 3, 4, 5];
// 修改指定索引的元素
a[0] = 2; // a: [2, 2, 3, 4, 5]

/* splice方法也可以实现修改数组元素
 * splice(start, deleteCount, val1, val2, ...)
 * 从start位置开始删除deleteCount项，并从该位置起插入val1,val2,...
 */
a.splice(2, 1, 4); // return: [3]; a: [2, 2, 4, 4, 5]

查（indexOf()、lastIndexOf()、slice()）

var a = [1, 2, 3, 4, 5, 4, 3, 2, 1];
// stringObject.indexOf(searchvalue,fromindex)
// 从前往后；参数：要查找的项和查找起点位置的索引；返回元素索引，不存在返回-1
a.indexOf(1); // reuturn: 0
a.indexOf(4, 0); // return: 3
a.indexOf(4, 4); // return: 5

// stringObject.lastIndexOf(searchvalue,fromindex)
// 从后往前；参数：要查找的项和查找起点位置的索引；返回元素索引，不存在返回-1
a.lastIndexOf(4); // return: 5
a.lastIndexOf(4, 4); // return: 3

// stringObject.slice(start,end)
// 截取数组，返回从原数组中指定开始索引(包含)到结束索引(不包含)之间的项组成的新数组，原数组不变
a.slice(1,3); // return: [2, 3]; a: [1, 2, 3, 4, 5, 4, 3, 2, 1]

翻转（reverse()）

var a = [1,2,3,4,5]; 
a.reverse(); // return: [5, 4, 3, 2, 1]; a: [5, 4, 3, 2, 1]

排序（sort()）

var arr = new Array(0, 1, 5, 10, 15);
// 不传参数，按照字符编码顺序进行排序(ASCII码表：http://tool.oschina.net/commons?type=4)
// sort()详见：http://www.w3school.com.cn/jsref/jsref_sort.asp
arr.sort(); // arr: [0, 1, 10, 15, 5]
            
// 传入比较函数，则按照比较函数中的标准
function compare(value1, value2) {
    if (value1 < value2) {
        return -1;
    } else if (value1 > value2) {
        return 1;
    } else {
        return 0;
    }
}
// 更多比较函数的写法参考：https://www.jb51.net/article/107153.htm
arr.sort(compare); // arr: [0, 1, 5, 10, 15]

遍历（every()、some()、filter()、map()、forEach()、reduce()、reduceRight()）

//  一般方法
var colors = ["red", "blue", "green"];
    for (x in colors) {
    // todo...
};

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
// every()函数，数组中每一项都返回true，则返回true；不对原数组做操作；对空数组无效。
var everyResult = numbers.every(function(item, index, array){
    return (item > 2);
});
console.log(everyResult); // false

// some()函数，数组中有一项返回true，则返回true；不对原数组做操作；对空数组无效。
var someResult = numbers.some(function(item, index, array){
    return (item > 2);
});
console.log(someResult); // true

// filter()函数，返回结果为true的数组项组成的新数组；不对原数组做操作；对空数组无效。
var filterResult = numbers.filter(function(item, index, array){
    return (item > 2);
});
console.log(filterResult); // [3, 4, 5, 4, 3]

// map()函数，返回对原数组每一项操作的结果组成的新数组；不对原数组做操作；对空数组无效。
var mapResult = numbers.map(function(item, index, array){
    return (item * 2);
});
console.log(mapResult); // [2, 4, 6, 8, 10, 8, 6, 4, 2]

// forEach()函数，对原数组每一项进行操作，没有返回值；修改原数组；对空数组无效。
var mapResult = numbers.forEach(function(item, index, array){
    item *= 2;
});
console.log(numbers); // [2, 4, 6, 8, 10, 8, 6, 4, 2]

// 迭代所有项，构建一个返回值
// reduce()函数，从左到右迭代
var values = [1, 2, 3, 4, 5];
var sum = values.reduce(function(pre, cur, index, array){
    return pre + cur;
});
console.log(sum); // 15
// reduceRight()函数，从右到左迭代
var values = [1, 2, 3, 4, 5];
var sum = values.reduceRight(function(pre, cur, index, array){
    return pre + cur;
});
console.log(sum); // 15

转字符串（toString()、join()）

var colors = ["red", "blue", "green"];
// 逗号分隔
colors.toString(); // return: "red,blue,green"; colors: ["red", "blue", "green"]
colors.join(); // return: "red,blue,green"; colors: ["red", "blue", "green"]
            
// 其他分隔符
colors.join("~"); // return: "red~blue~green"; colors: ["red", "blue", "green"]

参考资料

1. 《JavaScript高级程序设计（第3版）》：https://book.douban.com/subject/10546125/
2. JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并): https://www.jb51.net/article/84667.htm
3. w3school: http://www.w3school.com.cn/jsref/jsref_obj_array.asp
4. ASCII码对照表：http://tool.oschina.net/commons?type=4

5. JavaScript中数组Array.sort()排序方法详解: https://www.jb51.net/article/107153.htm