JavaScript-中 Array 数组常用的方法汇总

在 JS 中数组的使用场景有很多，数组也有许多相关的 API，可方便数组的操作

数组的操作

• 读取元素：读取已经存在下标的元素。如：var age = arr[2];
• 修改元素：修改已经存在下标的元素的值(重新赋值)。如：arr[2] = 69;
• 增加元素：添加一个不存在的下标的元素。
• 删除元素：使用关键字 delete，只能删除元素的值，而下标还在。

数组相关的方法

unshift()

arrayObject.unshift(arg1, arg2, ..., argx) 向数组的头部添加一个或多个元素，元素为多个时会顺次添加到数组的头部（第一个参数下标为 0，第二个参数下标为 1，以此类推。。。）；返回值为添加元素后的数组的长度

• arg 需要添加的元素
• arrayObject 需要修改的数组

var arr = [2, 4, 6]
var len = arr.unshift(1, 3, 5)
console.log(arr, len) //  [1, 3, 5, 2, 4, 6] 6

shift()

arrayObject.shift() 删除数组中的第一个元素，余下的元素全部前移一位，返回值为被删的元素；如果数组是空的，那么 shift() 方法将不进行任何操作，返回值为 undefined

var arr = [2, 4, 6]
var el = arr.shift()
console.log(arr, el) // [4, 6] 2

当参数为数组时，该数组会作为一个元素添加到原数组中

push()

arrayObject.push(arg1, arg2, ..., argx) 向数组的末尾添加一个或多个元素，返回值为添加元素后的数组的长度值

var arr = [1, 3, 5]
var len = arr.push(2, 4, 6)
console.log(arr, len) // [1, 3, 5, 2, 4, 6] 6

pop()

arrayObject.pop() 删除数组中的最后一个元素，返回值为被删的元素 ；若数组为空则 pop() 不修改数组，返回undefined

var arr = [1, 3, 5, 7, 9]
var el = arr.pop()
console.log(arr, el) // [1, 3, 5, 7] 9

reverse()

arrayObject.reverse() 该方法会颠倒数组中元素的顺序，并将颠倒后的数组返回；该方法是在原数组上进行修改并不会创建新的数组

var arr = [1, 3, 5, 7, 9]
// 修改前
console.log(arr) // [1, 3, 5, 7, 9]
// 颠倒数组中的元素
arr.reverse()
// 原数组元素已被颠倒
console.log(arr) // [9, 7, 5, 3, 1]

sort()

arrayObject.sort(sortby) 根据传入的规则函数对数组进行排序；不传参数时将按照ASCII码顺序进行排序。该方法是在原数组上进行修改（原地修改）并不会创建新的数组，返回值为排序后的数组。

• sortby 该参数为规则函数

如果想按照别的顺序进行排序，就必须提供规则函数，该规则函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。

规则函数应该具有两个参数 a 和 b ，其返回值如下：

• 如果根据评判标准，a 小于 b，在排序后的数组中 a 应该出现在 b 之前，就返回一个小于0的值。
• 如果 a 等于 b，a 和 b 的相对位置不变，就返回 0。
• 如果 a 大于 b， a 会被排列到 b 之后，就返回一个大于 0 的值。

默认排序：

var arr = [1,4,212574,651,56874,5489,74,49]
// 排序前
console.log(arr) // [1, 4, 212574, 651, 56874, 5489, 74, 49]
// 排序
arr.sort()
// 排序后
console.log(arr) // [1, 212574, 4, 49, 5489, 56874, 651, 74]

升序排列：

var arr = [1,4,212574,651,56874,5489,74,49]
// 排序前
console.log(arr) // [1, 4, 212574, 651, 56874, 5489, 74, 49]
// 升序排列（从小到大）
arr.sort(function(a, b) {
	return a - b
})
// 排序后
console.log(arr) // [1, 4, 49, 74, 651, 5489, 56874, 212574]

降序排列：

var arr = [1,4,212574,651,56874,5489,74,49]
// 排序前
console.log(arr) // [1, 4, 212574, 651, 56874, 5489, 74, 49]
// 降序排列（从大到小）
arr.sort(function(a, b) {
	return b - a
})
// 排序后
console.log(arr) // [212574, 56874, 5489, 651, 74, 49, 4, 1]

indexOf()

arrObject.indexOf(searchElement, fromIndex) 该方法用于在数组中查找指定元素在数组中第一次出现的位置，查找方向是从左往右查找；元素存在时返回值为元素的索引值，如果不存在则返回值为 -1。

• searchElement 需要查找的元素
• fromIndex 开始查找的位置，是个可选参数；如果该索引值大于或等于数组长度，意味着不会在数组里查找，返回 -1。如果参数中值是一个负值，则 -1 表示从最后一个元素开始查找，-2 表示从倒数第二个元素开始查找 ，以此类推。

var arr = [123, 456, 789, 246, 369, 456, 157]
// 查找
var index = arr.indexOf(456)
// 打印
console.log(index) // 1
// 指定开始查找的位置
var index2 = arr.indexOf(456, 2)
// 打印
console.log(index2) // 5

lastIndexOf()

arrayObject.lastIndexOf(searchElement, fromindex) 该方法与 indexOf 的功能相同都是返回数组中指定元素第一次出现时的下标；不同的是查找的方向，该方法从右往左进行查找（从后往前进行查找）；如果不存在则返回 -1。

var arr = [123, 456, 789, 246, 456, 369, 456, 157]
// 查找
var index = arr.lastIndexOf(456)
// 打印
console.log(index) // 6
// 指定开始查找的位置
var index2 = arr.lastIndexOf(456, 5)
// 打印
console.log(index2) // 4

toString()

arrayObject.toString() 将数组中的所有元素转成字符串后返回，toString() 方法在转字符串时会用 逗号 分割每个元素；该方法没有参数，也不会修改原数组。

var arr = [123, 456, 789, 246, 456, 369, 456, 157]
// 将数组转成字符串并打印
console.log(arr.toString()) // 123,456,789,246,456,369,456,157
console.log(arr) // [123, 456, 789, 246, 456, 369, 456, 157]

join()

arrayObject.join(separator) 方法将一个数组中的所有元素连接成一个字符串并返回这个字符串，该方法不会修改原数组；默认在连接时会使用 逗号 对元素进行分割。如果数组只有一个项目，那么将返回该项目而不使用分隔符。

• separator 转字符串时元素间的分割符，默认为逗号；如果不想让字符串出现逗号可以使用 "" 空字符串作为分割符。

var arr = [123, 456, 789, 246, 456, 369, 456, 157]
// 默认
console.log(arr.join()) // 123,456,789,246,456,369,456,157
// 设置了分割符 
console.log(arr.join("")) // 123456789246456369456157
// 原数组未被修改
console.log(arr) //  [123, 456, 789, 246, 456, 369, 456, 157]

concat()

arr1.concat(arr2, arr3, ...) 该方法用于合并两个或多个数组；此方法不会更改现有数组，而是返回一个新数组。（方法中的多个参数值会顺次与 arr1 进行合并）

• arr1 该参数必须是数组
• arr2, arr3 括号中的参数可以是数组也可以是其他类型的数据（数字、对象等）

var arr1 = [1, 3, 5], arr2 = [2, 4, 6], obj= {uname:'sdfs'}, num = 369
// 合并数组打印结果
console.log(arr1.concat(arr2, obj, num)) // [1, 3, 5, 2, 4, 6, {…}, 369]

slice()

arrarObject.slice(start, end) 从指定数组中提取一个或多个元素后并以新数组的形式返回，该方法不会修改原数组。

• start 规定从哪个位置（元素下标）开始提取元素。如果是负数，则从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
• end 结束位置，实际截取到的位置是 end-1（是一个左闭右开的区间 [start, end)）， 该参数是个可选参数；如果没有指定该参数，那么提取的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

var arr = [1, 3, 5, 7, 9, 157, 369]
// 从下标为 1 的位置截取到下标为 4 的位置结束
var newArr = arr.slice(1, 5)
console.log(newArr) // [3, 5, 7, 9]
// 从下标为 1 的位置一直截取到最后
var newArr2 = arr.slice(1)
console.log(newArr2) // [3, 5, 7, 9, 157, 369]
// 原数组未被修改
console.log(arr) // [1, 3, 5, 7, 9, 157, 369]

splice()

arrayObject.splice(start, deleteCount, item1, item2, ...) 该方法可以对原数组中的元素进行删除、替换或在数组中添加新元素；该方法会修改原数组；返回值为被删元素组成的数组。

• start 该参数用于指定开始修改的位置（默认从 0 开始）
  • 如果该参数超出了数组的长度，则从数组末尾开始添加内容；
  • 如果是负值，-1 表示倒数第一个元素， -2 表示倒数第二的元素，以此类推；
  • 如果负数的绝对值大于数组的长度，则会从数组中下标为 0 的位置开始。
• deleteCount 要删除的元素个数
  • 如果该参数的值大于 start 之后的元素总个数则从 start 开始（包含 start 位置的元素）后面的所有元素都会被删除；
  • 如果 deleteCount 被省略了，start 之后的所有元素都会被删除；
  • 如果 deleteCount 为 0 或者是负数则不移除元素，这种情况下一般用于添加新元素。
• item1, item2, ... 要添加到数组中的元素，是从 start 位置开始（当前位置的元素会被修改）多个值会顺次添加到原数组中（就像生活中的插队现象，多个参数一块插队，start 开始到 deleteCount 个元素会被踢出去，这些参数一块从这个位置开始插入，数组原先的元素就要重新排序）；如果不指定这些参数则只删除数组中的元素。

删除元素：

var arr = [11, 33, 55, 77, 99, 157, 369]
// 从下标为 1 的位置开始，删除一个元素
var newArr = arr.splice(1, 1)
// 返回值为被删元素组成的数组
console.log(newArr) // [33]
// 原数组已被修改
console.log(arr) // [11, 55, 77, 99, 157, 369]

删除并重新添加元素

var arr = [11, 33, 55, 77, 99, 157, 369]
// 从下标为 1 的位置开始，删除多个元素，并重新添加多个元素
var newArr = arr.splice(1, 3, 666, 999, 'wwww', 'w3c', 'csdn')
// 返回值为被删元素组成的数组
console.log(newArr) // [33, 55, 77]
// 原数组已从新排序
console.log(arr) // [11, 666, 999, "wwww", "w3c", "csdn", 99, 157, 369]

every()

array.every(callback(item,index,arr)) 该方法用于检测数组所有元素是否都通过了指定函数的测试，判定条件由提供的回调函数决定；every() 方法的返回结果为布尔值，都通过了返回 true 否则返回 false，另外，空数组的返回结果也是 true。

参数：

• callback 回调函数，用于提供判断条件
• item 当前被检测的元素
• index 当前元素的索引值，可选值
• arr every() 方法正在操作的数组，是个可选值

var arr = [13, 16, 369, 69, 8848, 147, 258]
// 获取方法的返回值
var flag = arr.every(function (item) { // 该函数的返回结果都为 true 时，every() 的返回结果才为 true
	// 判断条件
	return item > 10 // 数组中的元素值均大于 10
})
console.log(flag) // true

var flag2 = arr.every(function (item) {
	return item > 13 // 有一个元素的值不大于 13
})
console.log(flag2) // false

// 空数组
var arr2 = []
var flag3 = arr2.every(function (item) {
	return item > 13 
})
console.log(flag3) // true

some()

array.some(callback(item, index, arr)) 该方法的功能与 every() 相同，唯一不同的是：如果有一个元素满足条件，则返回 true , 剩余的元素不会再执行检测；如果元素都没有满足条件，则返回false。对于空数组该方法返回 false。

var arr = [13, 16, 369, 69, 8848, 147, 258]
// 获取方法的返回值，只要有一个元素符合条件就返回 true
var flag = arr.some(function (item) {
	// 判断条件
	return item > 260
})
console.log(flag) // true

// 空数组
var arr2 = []
var flag = arr.some(function (item) {
	// 判断条件
	return item > 260
})
console.log(flag) // false

filter()

array.filer(callback(item, index, arr)) 对数组进行过滤，回调函数作为过滤条件，所有满足条件的元素会以数组的形式返回；该方法不会修改原数组。

参数：

• callback 回调函数，用来测试数组的每个元素的函数（用于提供判断条件）；
• item 当前被检测的元素
• index 当前元素的索引值，可选值
• arr filter() 方法正在操作的数组，是个可选值

var arr = [13, 16, 369, 69, 8848, 147, 258]

// 存储返回的数组
var newArr = arr.filter(function (item) {
	return item > 111
})
// 打印结果
console.log(newArr) // [369, 8848, 147, 258]
// 原数组未被修改
console.log(arr) // [13, 16, 369, 69, 8848, 147, 258]

forEach()

array.forEach(callback(item, index, arr)) 调用数组的每个元素，并将元素传递给回调函数，在回调函数中执行相关操作。该方法不会修改原数组，返回值为 undefined

参数：

• callback 回调函数，用来接收数组的每个元素的函数；
• item 当前被检测的元素
• index 当前元素的索引值，可选值
• arr forEach() 方法正在操作的数组，是个可选值

var arr = [13, 16, 369, 69, 8848, 147, 258], sum = 0
// 获取返回值
var result = arr.forEach(function(item) { // 处理函数
	sum += item // 累加元素
})
console.log(sum) // 9720
// 返回值为 undefined
console.log(result) // undefined

map()

array.map(callback(item, index, arr)) 按照原始数组元素顺序依次处理元素。该方法会将原数组中的每个元素都按顺序调用一次 callback 函数。返回值为 callback 每次执行后的返回值（包括 undefined）组合起来形成的新数组。该方法不修改原数组

var arr = [13, 16, 369, 69, 8848, 147, 258]

var newArr = arr.map(function (item) {
	// 返回处理后的值
	return item * 10
})

console.log(newArr) // [130, 160, 3690, 690, 88480, 1470, 2580]
// 原数组未被修改
console.log(arr) // [13, 16, 369, 69, 8848, 147, 258]

reduce()

array.reduce(callback(accumulator, item, index, arr)) 该方法接收一个函数作为累加器，返回值为函数累计最终处理的结果。

参数：

• callback 回调函数，用来接收数组的每个元素的函数；
• accumulator 累计器累计回调的返回值; 它是上一次调用回调时返回的累积值
• item 当前被检测的元素
• index 当前元素的索引值，可选值
• arr forEach() 方法正在操作的数组，是个可选值

var arr = [13, 16, 369, 69, 8848, 147, 258]

var result = arr.reduce(function (acc, item) {
	// 累加
	return acc + item
})

console.log(result) // 9720