JavaScript-Array数组方法整理

Array数组

基本方法：增删改

方法	描述
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
pop()	删除数组的最后一个元素并返回删除的元素。
shift()	删除并返回数组的第一个元素。
concat()	连接两个或更多的数组，并返回结果
slice()	选取数组的一部分，并返回一个新数组。
splice()	从数组中添加或删除元素。

查找元素在数组中的位置

方法	描述
indexOf()	搜索数组中的元素，并返回它所在的位置。
lastIndexOf()	搜索数组中的元素，并返回它最后出现的位置。

数组排序

方法	描述
reverse()	反转数组的元素顺序。
sort()	对数组的元素进行排序。

数组转字符串

方法	描述
toString()	把数组转换为字符串，并返回结果。
join()	把数组的所有元素放入一个字符串。

判断是否为数组

方法	描述
isArray()	判断对象是否为数组。

遍历检测数组元素返回处理后的数组

方法	描述
forEach()	数组每个元素都执行一次回调函数。
every()	检测数值元素的每个元素是否都符合条件。
some()	检测数组元素中是否有元素符合指定条件。
filter()	检测数值元素，并返回符合条件所有元素的数组。
map()	通过指定函数处理数组的每个元素，并返回处理后的数组。
reduce()	将数组元素计算为一个值（从左到右）。
reduceRight()	将数组元素计算为一个值（从右到左）。

ES6新增方法：

方法	描述
copyWithin()	从数组的指定位置拷贝元素到数组的另一个指定位置中。
fill()	使用一个固定值来填充数组。
find()	返回符合传入测试（函数）条件的数组元素
findIndex()	返回符合传入测试（函数）条件的数组元素索引。
from()	通过给定的对象中创建一个数组。
includes()	判断一个数组是否包含一个指定的值。
entries()	返回数组的可迭代对象。
keys()	返回数组的可迭代对象，包含原始数组的键(key)。

一. 基本方法：增删改

1. push()

定义和用法:

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

注意： 1.新元素将添加在数组的末尾。

​ 2.此方法改变数组的长度。

语法：

  array.push(item1, item2, ..., itemX)

参数	描述
item1, item2, …, itemX	必需。要添加到数组的元素。

返回值：

类型	描述
Number	数组新长度

例子：

  let arr = [1, 2, 3]
  arr.push(4)  // 4
  console.log(arr) // [1,2,3，4]

回到顶部

2. unshift()

定义和用法:

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

**注意：**该方法将改变数组的数目。

语法：

 array.unshift(item1,item2, ..., itemX)

参数	描述
item1,item2, …, itemX	可选。向数组起始位置添加一个或者多个元素。

返回值：

类型	描述
Number	数组新长度

例子：

  let arr = [1, 2, 3]
  arr.unshift(0)  // 4
  console.log(arr) // [0,1,2,3]

回到顶部

3. pop()

定义和用法:

pop() 方法用于删除数组的最后一个元素并返回删除的元素。

**注意：**此方法改变数组的长度！

语法：

 array.pop()

返回值：

类型	描述
所有类型	返回删除的元素。

例子：

 let arr = [1, 2, 3]
 arr.pop()  // 3
 console.log(arr) // [1,2]

回到顶部

4. shift()

定义和用法:

shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

**注意：**此方法改变数组的长度！

语法：

 array.shift()

返回值：

类型	描述
所有类型	移除的元素

例子：

 let arr = [1, 2, 3]
 arr.shift()  // 1
 console.log(arr) // [2,3]

回到顶部

5. concat()

定义和用法:

concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

语法：

  array1.concat(array2,array3,...,arrayX)

参数	描述
array2, array3, …, arrayX	必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个。

返回值：

类型	描述
Array 对象	返回一个新的数组。

例子：

  let arr = [1, 2, 3]
  let arr2 = [4, 5, 6]
  arr2 = arr2.concat(arr) // [4,5,6,1,2,3]
  console.log(arr2) // [4,5,6,1,2,3]

回到顶部

6. slice()

定义和用法:

slice() 方法可选取数组的一部分，并返回一个新数组

slice()方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

slice() 方法不会改变原始数组。

语法：

array.slice(start, end)

参数	描述
start	可选。规定从何处开始选取。 如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，如：slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素。
end	可选。规定从何处结束选取。该参数是数组片断结束处的数组下标(不包含下标为end的元素)。 如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。 如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。如： slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。

返回值：

类型	描述
Array	返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素

例子：

//截取数组
let arr = [1, 2, 3, 4, 5]
arr.slice(0,2) // [1, 2]
//截取数组（参数为负数）
arr.slice(-4,-1) // [2, 3, 4]

//截取字符串
let str = 'hello world'
str.slice(0, 8)  // hello wo
str.slice(-7, -1)  // o worl

回到顶部

7. splice()

定义和用法:

splice() 方法用于添加或删除数组中的元素。

**注意：**这种方法会改变原始数组。

语法：

 array.splice(index,howmany,item1,.....,itemX)

参数	描述
index	必需。规定从何处添加/删除元素。 该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany	可选。规定应该删除多少元素。必须是数字，但可以是 “0”。 如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, …, itemX	可选。要添加到数组的新元素

返回值：

类型	描述
Array	如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。

例子：

let arr = [1, 2, 3, 4, 5]

//删除元素(删除最后3个元素)
arr.splice(2, 3) // [3, 4, 5]
console.log(arr) // [1, 2]

//添加元素(往最后添加3个元素)
arr.splice(2, 0, 3, 4, 5)
console.log(arr) // [1, 2, 3, 4, 5]

//添加元素(往前面添加1个元素)
arr.splice(0, 0, 0)
console.log(arr) // [0, 1, 2, 3, 4, 5]

//修改元素(将前三个元素改为a)
arr.splice(0, 3, 'a', 'a', 'a') // 返回值为删除的元素： [0, 1, 2]
console.log(arr) // ["a", "a", "a", 3, 4, 5]

回到顶部

二. 查找元素在数组中的位置

8. indexOf()

定义和用法:

indexOf() 方法可返回数组中某个指定的元素位置。

该方法将从头到尾地检索数组，看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头（没有指定 start 参数时，默认为0）。如果找到一个 item，则返回 item 的第一次出现的位置。

如果在数组中没找到指定元素则返回 -1。

语法：

array.indexOf(item,start)

参数	描述
item	必须。查找的元素。
start	可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。

返回值：

类型	描述
Number	元素在数组中的位置，如果没有搜索到则返回 -1。

例子：

let arr = [1, 5, 3, 4, 5, 6]
arr.indexOf(5) // 1
arr.indexOf(5, 0) // 1
arr.indexOf(5, 2) // 4
arr.indexOf(5, 5) // -1

回到顶部

9. lastIndexOf()

定义和用法:

lastIndexOf() 方法可返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找。

如果要检索的元素没有出现，则该方法返回 -1。

该方法将从尾到头地检索数组中指定元素 item。开始检索的位置在数组的 start 处或数组的结尾（没有指定 start 参数时）。如果找到一个 item，则返回 item 从尾向前检索第一个次出现在数组的位置。

如果在数组中没找到指定元素则返回 -1。

语法：

 array.lastIndexOf(item,start)

参数	描述
item	必需。规定需检索的字符串值。
start	可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的最后一个字符处开始检索。

返回值：

类型	描述
Number	元素在数组中的位置。

例子：

let arr = [1, 5, 3, 4, 5, 6]
arr.lastIndexOf(5) // 4
arr.lastIndexOf(5, 3) // 1
arr.lastIndexOf(3, 1) // -1

回到顶部

三、数组排序

10. reverse()

定义和用法:

reverse() 方法用于颠倒数组中元素的顺序。

语法：

array.reverse()

返回值：

类型	描述
Array	颠倒顺序后的数组

例子：

let arr = [1, 5, 3, 4, 5, 6]
arr.reverse() // [6, 5, 4, 3, 5, 1]
console.log(arr)  // [6, 5, 4, 3, 5, 1]

回到顶部

11. sort

定义和用法:

sort() 方法用于对数组的元素进行排序。排序顺序可以是字母或数字，并按升序或降序。

默认排序顺序为按字母升序。

**注意：**当数字是按字母顺序排列时"40"将排在"5"前面。

​ 使用数字排序，你必须通过一个函数作为参数来调用，函数指定数字是按照升序还是降序排列。

注意： 这种方法会改变原始数组！

语法：

 array.sort(sortfunction)

参数	描述
sortfunction	可选。规定排序顺序。必须是函数。

返回值：

类型	描述
Array	对数组的引用。请注意，数组在原数组上进行排序，不生成副本。

例子：

// 字母排序
let arr = ['d','a','e','f','c','b']
//升序
arr.sort() // ["a", "b", "c", "d", "e", "f"]
//降序
arr.reverse() // ["f", "e", "d", "c", "b", "a"]

//数字排序
let arr = [10, 5, 33, 42, 545, 46]
//如果使用此函数给数字排序，必须要通过一个函数作为参数来调用,否则只会以第一个数字进行排序
arr.sort() // [10, 33, 42, 46, 5, 545] 

//通过函数作为参数调用，升序
arr.sort((a, b)=>{
    return a - b
})  // [5, 10, 33, 42, 46, 545]

//通过函数作为参数调用，降序
arr.sort((a, b)=>{
    return b - a
}) // [545, 46, 42, 33, 10, 5]

回到顶部

四、数组转字符串

12. toString()

定义和用法:

toString() 方法可把数组转换为字符串，并返回结果。数组中的元素之间用逗号分隔。

语法：

 array.toString()

返回值：

类型	描述
String	数组的所有值用逗号隔开

例子：

let arr = [1, 2, 3, 4, 5]
arr.toString() // "1,2,3,4,5"

回到顶部

13. join()

定义和用法:

join() 方法用于把数组中的所有元素转换一个字符串，通过参数指定的分隔符进行分隔。

语法：

array.join(separator)

参数	描述
separator	可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

返回值：

类型	描述
String	返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串，然后把这些字符串连接起来，在两个元素之间插入 separator 字符串而生成的。

例子：

let arr = [1, 2, 3, 4, 5]
// 不使用分隔符
arr.join() // "1,2,3,4,5"
// 使用分隔符
arr.join('-') // "1-2-3-4-5"
arr.join('*') // "1*2*3*4*5"

回到顶部

五、判断是否为数组

14. isArray()

定义和用法:

isArray() 方法用于判断一个对象是否为数组。

如果对象是数组返回 true，否则返回 false。

语法：

Array.isArray(obj)

参数	描述
obj	必需，要判断的对象。

返回值：

类型	描述
布尔值	如果对象是数组返回 true，否则返回 false。

例子：

let arr = [1, 2, 3, 4, 5]
let str = '12345'
let obj = {}
let bool = false
Array.isArray(arr) // true
Array.isArray(str) // false
Array.isArray(obj) // false
Array.isArray(bool) // false

回到顶部

六、遍历检测数组元素返回处理后的数组

15. forEach()

定义和用法:

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

注意: forEach() 对于空数组是不会执行回调函数的。

语法：

array.forEach(function(currentValue, index, arr), thisValue)

参数	描述
function(currentValue, index, arr)	必需。 数组中每个元素需要调用的函数。 函数参数: currentValue 必需。当前元素 index 可选。 当前元素的索引值。 arr 可选。 当前元素所属的数组对象。
thisValue	可选。传递给函数的值一般用 “this” 值。 如果这个参数为空， “undefined” 会传递给 “this” 值

例子：

let arr = [1, 2, 3, 4, 5]
//使用for遍历
for(let i = 0; i < arr.length; i++){
    console.log(arr[i], i)
    // 1 0
	// 2 1
	// 3 2
	// 4 3
	// 5 4
}
//使用forEach遍历
arr.forEach((current, index)=>{
    console.log(current, index)
    // 1 0
	// 2 1
	// 3 2
	// 4 3
	// 5 4
})

// 计算总和
let sum = 0
arr.forEach((current, index)=>{
    sum += current
})
console.log(sum) //15

回到顶部

16. every()

定义和用法:

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。

every() 方法使用指定函数检测数组中的所有元素：

• 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
• 如果所有元素都满足条件，则返回 true。

注意： every() 不会对空数组进行检测。

​ every() 不会改变原始数组。

语法：

array.every(function(currentValue,index,arr), thisValue)

参数	描述
function(currentValue, index,arr)	必须。函数，数组中的每个元素都会执行这个函数 函数参数: currentValue 必需。当前元素 index 可选。 当前元素的索引值。 arr 可选。 当前元素所属的数组对象。
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。 如果省略了 thisValue ，“this” 的值为 “undefined”

返回值：

类型	描述
布尔值	如果所有元素都通过检测返回 true，否则返回 false。

例子：

let arr = [1, 2, 3, 4, 5]
let bool = arr.every((val, index)=>{
    return val < 10
})
//如果所有元素都满足条件，则返回 true
console.log(bool) // true

//如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测
let bool2 = arr.every((val, index)=>{
    return val < 4
})
console.log(bool2) // false

回到顶部

17. some()

定义和用法:

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。

some() 方法会依次执行数组的每个元素：

• 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
• 如果没有满足条件的元素，则返回false。

注意： some() 不会对空数组进行检测。

注意： some() 不会改变原始数组。

语法：

array.some(function(currentValue,index,arr),thisValue)

参数	描述
function(currentValue, index,arr)	必须。函数，数组中的每个元素都会执行这个函数 函数参数: currentValue 必需。当前元素 index 可选。 当前元素的索引值。 arr 可选。 当前元素所属的数组对象。
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。 如果省略了 thisValue ，“this” 的值为 “undefined”

返回值：

类型	描述
布尔值	如果数组中有元素满足条件返回 true，否则返回 false。

例子：

let arr = [1, 2, 3, 4, 5]
let bool = arr.some((val, index)=>{
    return val < 2
})
//如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测
console.log(bool) // true

//如果没有满足条件的元素，则返回false
let bool2 = arr.some((val, index)=>{
    return val < 1
})
console.log(bool2) // false

回到顶部

18. filter()

定义和用法:

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意： filter() 不会对空数组进行检测。

注意： filter() 不会改变原始数组。

语法：

array.filter(function(currentValue,index,arr), thisValue)

参数	描述
function(currentValue, index,arr)	必须。函数，数组中的每个元素都会执行这个函数 函数参数: currentValue 必需。当前元素 index 可选。 当前元素的索引值。 arr 可选。 当前元素所属的数组对象。xxx
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。 如果省略了 thisValue ，“this” 的值为 “undefined”

返回值：

类型	描述
数组	包含了符合条件的所有元素。 如果没有符合条件的元素则返回空数组。

例子：

let arr = [1, 2, 3, 3, 4, 4, 5]
//过滤小于3的数
let newArr = arr.filter((val, index)=>{
    return val > 3
})
console.log(newArr) // [4, 5]

//去重
let newArr2 = arr.filter((val, index)=>{
    return arr.indexOf(val) == index
})
console.log(newArr2) // [1, 2, 3, 4, 5]

回到顶部

19. map()

定义和用法:

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意： map() 不会对空数组进行检测。

注意： map() 不会改变原始数组。

语法：

array.map(function(currentValue,index,arr), thisValue)

参数	描述
function(currentValue, index,arr)	必须。函数，数组中的每个元素都会执行这个函数 函数参数: currentValue 必需。当前元素 index 可选。 当前元素的索引值。 arr 可选。 当前元素所属的数组对象。xxxxxx
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。 如果省略了 thisValue ，“this” 的值为 “undefined”

返回值：

类型	描述
数组	返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

例子：

let arr = [1, 2, 3, 3, 4, 4, 5]
let newArr = arr.map((val, index)=>{
    return val * 2
})
console.log(newArr) // [2, 4, 6, 6, 8, 8, 10]

回到顶部

20. reduce()

定义和用法:

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

reduce() 可以作为一个高阶函数，用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。

语法：

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

参数	描述
function(total,currentValue, currentIndex,arr)	必须。用于执行每个数组元素的函数。 函数参数: total 必需。初始值, 或者计算结束后的返回值。 currentValue 必需。当前元素 currentIndex 可选。 当前元素的索引值。 arr 可选。 当前元素所属的数组对象。
initialValue	可选。传递给函数的初始值

返回值：

类型	描述
xxx	返回计算结果

例子：

let arr = [1, 2, 3, 4, 5]
let num = arr.reduce((total, val)=>{
	return total += val    
})
console.log(num) // 15

回到顶部

21. reduceRight()

定义和用法:

reduceRight() 方法的功能和 reduce() 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。

注意: reduce() 对于空数组是不会执行回调函数的。

语法：

array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)

参数	描述
function(total,currentValue, currentIndex,arr)	必须。用于执行每个数组元素的函数。 函数参数: total 必需。初始值, 或者计算结束后的返回值。 currentValue 必需。当前元素 currentIndex 可选。 当前元素的索引值。 arr 可选。 当前元素所属的数组对象。
initialValue	可选。传递给函数的初始值

返回值：

类型	描述
xxx	返回计算结果

例子：

let arr = [1, 2, 3, 4, 5]
//reduce
let numReduce = arr.reduce((total, val)=>{
	return total -= val    
})
//reduceRight
let numReduceRight = arr.reduceRight((total, val)=>{
	return total -= val    
})
console.log(numReduce, numReduceRight) //-13, -5

回到顶部

七、ES6新增方法

. xxxx

定义和用法:

xxx。

语法：

  xxx

参数	描述
xxx	xxx

返回值：

类型	描述
xxx	xxx

例子：

xxxx

回到顶部