总结JavaScript中常见的数组操作

来源：https://www.tanj.com.cn/article/detail/5ea51ea817e37371f70420bd

欢迎来我的个人网站：https://www.tanj.com.cn/

在JavaScript中数组的方法有很多，本篇文章将JS中常见的数组操作方法进行归纳总结。主要参考了第三版《JavaScript高级程序设计》。

1. 检测一个对象是否为数组

1）instanceof

利用 x instanceof Array 来判断x是否为Array的实例，若是，返回true，否则返回false。

var arr = [1,2,3]
console.log(arr instanceof Array) /*true*/

2）isArray

在ES5中新增了Array.isArray()方法，用来确定某个值是不是数组，若是，返回true，否则返回false。

var arr = [1,2,3]
console.log(Array.isArray(arr)) /*true*/

2. 转换方法

所有对象都具有toString()、valueof()方法。数组来调用toString()方法会返回由数组中的每个值的字符串形成拼接而成的一个以逗号分隔的字符串。调用valueof()方法返回的还是数组。

var arr = [1,2,3]
console.log(arr.toString()) /* 1,2,3 */
console.log(arr.valueOf()) /* [1, 2, 3] */
console.log(arr) /* [1, 2, 3] */

3. 栈方法

ES为数组专门提供了push()和pop()方法，以便实现类似栈的行为，后进先出。

push(key)：把元素key添加到数组的末尾；

pop()：从数组末尾移除最后一项，并返回移除的这一项，同时，数组长度减1。

var arr = [1,2,3]
arr.push(5) /*向数组末尾添加5*/
console.log(arr) /* [1, 2, 3, 5] */
arr.pop() /* 移除末尾的元素 */
console.log(arr) /* [1, 2, 3] */

4. 队列方法

数组中利用shift()和push()方法，可以实现队列的行为，先进先出。

shift()：移除数组的第一项，并且返回该项，同时数组长度减1。

var arr = [61,52,23,32]
var item = arr.shift()
console.log(item,arr.length) /* 61 3 */
console.log(arr) /* [52, 23, 32] */

ES中还有一个与shift()用途相反的函数——unshift()，它能向数组前端添加任意个项，并返回新数组的长度。

var arr = [61,52,23,32]
var item = arr.unshift(1,2,3)
console.log(item,arr.length) /* 7 7 */
console.log(arr) /* [1, 2, 3, 61, 52, 23, 32] */

5. 重排序方法

数组中有两个可以直接用来重排序的方法：reverse()和sort()，它们的返回值都是排序过后的数值。

reverse()：反转数组项的顺序。

var arr1 = [12,34,5,76,1]
arr1.reverse()
console.log(arr1) /* [1, 76, 5, 34, 12] */

var arr2 = ['as','rtt','tanj']
arr2.reverse()
console.log(arr2) /* ["tanj", "rtt", "as"] */

sort()：按升序排列数组，最小的值位于最前面，最大的值位于最后面。

1）在默认情况下，sort()会调用每个数组项的toString()方法，然后比较得到的字符串，即使数组中的项是数值，sort()方法比较的也是字符串，如下：

var arr = [0,1,5,10,15]
arr.sort()
console.log(arr) /* [0, 1, 10, 15, 5] */
/* 虽然数值5小于10，但是进行字符串比较时，"10"应该在"5"前面 */

var arr2 = ['a','cd','ab','cb']
arr2.sort()
console.log(arr2) /* ["a", "ab", "cb", "cd"] */

2）在sort()函数接受一个比较函数作为参数的情况下，比较函数通过返回一个一个小于0、等于0、大于0的值来影响排序结构。

比较函数接受两个参数，如果第一个参数应该位于第二个参数之前则返回一个负数，如果两个参数相等则返回0，如果第一个参数应该位于第二个参数之后，则返回一个正数，以下实现一个简单的比较函数：

function compare(value1,value2){
    if(value1<value2){
        return -1
    }else if(value1>value2){
        return 1
    }else{
        return 0
    }
}

var arr = [0,1,5,10,15]
arr.sort(compare)
console.log(arr) /* [0, 1, 5, 10, 15] */

化简上面的比较函数：

function compare(value1,value2){
    return value1 - value2
}

var arr = [0,1,5,10,15]
arr.sort(compare)
console.log(arr) /* [0, 1, 5, 10, 15] */

sort()底层实现原理（待补充）

6. 操作方法

1）concat()

如果传递给concat()方法的是一个或多个数组，则该方法会将数组中的每一项添加到结果数组中，如果传递的不是数组，这些值就会被添加在结果数组的末尾。

var arr1 = ['12','34','56']
/* 传入两个数组 */
var arr2 = arr1.concat(['78','910'],['1011','1112'])
console.log(arr2) /* ["12", "34", "56", "78", "910", "1011", "1112"] */
/* 传入非数组 */
var arr3 = arr1.concat('78','910')
console.log(arr3)/* ["12", "34", "56", "78", "910"] */

2）slice()

基于当前数组中的一或多个项创建一个新数组，不影响原数组。

传入一个参数，返回该参数指定位置到当前数组末尾的所有项；传入两个参数，返回起始和结束位置之间的项，但是不包括结束位置的项。

var arr = ['a','b','c','d','e']

var arr2 = arr.slice(1,3)
console.log(arr2)/* ["b", "c"] */

var arr3 = arr.slice(2)
console.log(arr3) /* ["c", "d", "e"] */

3）splice()

splice()方法及其强大，它可以实现删除、插入、替换的效果，该方法返回一个新数组，其中包含从原数组中删除的项。splice(开始索引值，删除几个，替换内容1，替换内容2，...)

删除：可以删除任意数量的项。例如splice(0,2)删除数组前两项；

插入：可以向指定位置插入任意数量的项。例如splice(2,0,"red',"green")在当前数组的位置2开始插入"red"和"green"。

替换：可以向指定位置插入任意数量的项，并且删除任意数量的项。例如splice(2,1,"red',"green")删除当前数组位置2的项，并在从位置2开始开始插入"red"和"green"。

var arr = ['a','b','c','d','e']
var tmp = arr.splice()
console.log(arr,tmp)
/*["a", "b", "c", "d", "e"]   []*/

var arr = ['a','b','c','d','e']
var tmp = arr.splice(2,1)
console.log(arr,tmp)
/* ["a", "b", "d", "e"]  ["c"]*/

var arr = ['a','b','c','d','e']
var tmp = arr.splice(3,0,'d2','d3')
console.log(arr,tmp)
/*["a", "b", "c", "d2", "d3", "d", "e"]   []*/

var arr = ['a','b','c','d','e']
var tmp = arr.splice(3,2,'c2','c3')
console.log(arr,tmp)
/*["a", "b", "c", "c2", "c3"]   ["d", "e"]*/

7. 位置方法

indexOf()和lastIndexOf()两个方法都返回要查找的项在数组中的位置，如果没有找到则返回-1。

1）indexOf()

从数组开头开始向后查找。

var arr = ['a','b','c','d','e','c']
var index = arr.indexOf('c')
console.log(index) /* 2 */

2）lastIndexOf()

从数组末尾开始向前查找。

var arr = ['a','b','c','d','e','c']
var index = arr.lastIndexOf('c')
console.log(index) /* 5 */

8. 迭代方法

1）some()和every()

两个方法较为相似，都用于查询数组中的项是否满足某个条件。

every()：传入的函数必须对每一项都返回true，这个方法才返回true，否则返回false。

some()：只要传入的函数对数组的某一项返回true，这个方法就返回true。

var arr = [1,2,3,4,5,6]
var res = arr.every(function(item,index,array){
    return item>2
})
console.log(res) /* false */

var res = arr.some(function(item,index,array){
    return item>2
})
console.log(res) /* true */

2）filter()

filter()利用传入的函数来确定是否返回的结果数组中包含某一项。

var arr = [1,2,3,4,5,6]
var res = arr.filter(function(item,index,array){
	return item>2
})
console.log(res) /* [3, 4, 5, 6] */

3）map()

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

var arr = [1,2,3,4,5,6]
var res = arr.map(function(item,index,array){
	return item*2
})
console.log(res) /* [2, 4, 6, 8, 10, 12] */

4）forEach()

这个函数只是对数组中的每一项运行传入的函数，无返回值。

var arr = [1,2,3,4,5,6]
var res = arr.forEach(function(item,index,array){
	/* 执行某些操作 */
})

9. 归并方法

两个归并方法：reduce()和reduceRight()，这两个方法都会迭代数组中的所有项，然后构建一个最终的返回值。其中reduce()是从数组的第一项开始，逐个遍历到最后；reduceRight()是从最后一项开始，向前遍历。

这两个方法都接收两个参数：一个在每一项上调用的函数和(可选的)作为归并基础的初始值。传给reduce()和reduceRight()的函数接收4个参数：前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。

var arr = [1,2,3,4,5,6]
var res = arr.reduce(function(pre,cur,index,array){
    return pre +  cur
})
console.log(res) /* 21 */

var res = arr.reduce(function(pre,cur,index,array){
    return pre +  cur
},10)
console.log(res) /* 31 */

var res = arr.reduceRight(function(pre,cur,index,array){
    return pre +  cur
})
console.log(res) /* 21 */