（最全）JS的数组方法汇总（思维导图）

---

前言

js数组有很多数组方法，这些方法可以帮你做数组运算事半功倍，今天花了一下午的时间整理成了思维导图的形式，希望能帮助记忆，每种函数的具体使用在思维导图下面详细内容里面可供参考。

一、ES5新增方法

1.filter()

创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，主要用于筛选数组，返回一个新数组。

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

参数值

参数	描述
currentValue	必须。当前元素的值
index	可选。当前元素的索引值
arr	可选。当前元素属于的数组对象
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”

实例

//返回数组 ages 中大于 18 的元素:
var ages = [32, 33, 16, 40];
var newAges = ages.filter(function(value,index){
	return value >= 18;
});
console.log(newAges )
}
//输出结果为:  32,33,40

注意： filter() 不会对空数组进行检测,返回一个新数组。
注意： filter() 不会改变原始数组。

2.map()

对数组的每个元素做运算之后返回新的数组。

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

参数值

参数	描述
currentValue	必须。当前元素的值
index	可选。当前元素的索引值
arr	可选。当前元素属于的数组对象
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”

实例

//返回一个数组，数组中元素为原始数组的平方根:
var numbers = [4, 9, 16, 25];
var newNumbers = numbers.map(Math.sqrt);
console.log(newNumbers );
//输出结果为:   2,3,4,5

//数组中的每个元素乘于指定的值，并返回新数组:
var numbers = [65, 44, 12, 4];
var num = 2;
numbers.map(funtion(value,index){
	return num * value
});

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

3.reduce()

接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值, 对于空数组是不会执行回调函数的。

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

参数值

参数	描述
total	必需。初始值, 或者计算结束后的返回值或者前面回调的返回值，
currentValue	必须。当前元素的值
currentIndex	可选。当前元素的索引值
arr	可选。当前元素属于的数组对象
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”

实例

//计算数组元素相加后的总和：
var numbers = [65, 44, 12, 4];
numbers.reduce(function(pre,cur){
	return pre + cur;
})
//输出结果为:   125

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

4.forEach()

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

array.forEach(currentValue, index, arr), initialValue)

参数值

参数	描述
currentValue	必须。当前元素的值
index	可选。当前元素的索引值
arr	可选。当前元素属于的数组对象
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”

实例

//列出数组的每个元素：
var numbers = [4, 9, 16, 25];
numbers.forEach(function(item, index){
	console.log(item)
})

//输出结果为: 
4
9
16
25

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

5.indexOf()

可返回某个指定的字符串值在字符串中首次出现的位置。如果没有找到匹配的字符串则返回 -1。

*array.indexOf(searchvalue,start)

参数值

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

返回值

类型	描述
Number	查找指定字符串第一次出现的位置，如果没找到匹配的字符串则返回 -1。

实例

//查找数组中的 "Apple" 元素：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
//a的输出结果为:  2

//查找数组中 "Apple" 的元素, 在数组的第四个位置开始检索：
var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
var a = fruits.indexOf("Apple",4);
//a 结果输出 :6

注意: indexOf() 方法区分大小写。

6.some()

查找数组中是否有指定的元素，返回的是布尔值，一旦查找成功则终止循环遍历
some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
some() 方法会依次执行数组的每个元素：

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

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

参数值

参数	描述
currentValue	必须。当前元素的值
index	可选。当前元素的索引值
arr	可选。当前元素属于的数组对象
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”

实例

//检测数组中是否有元素大于 18:
var ages = [3, 10, 18, 20];
function checkAdult(age) {
    return age >= 18;
}
ages.some(checkAdult);
//输出结果为:   true

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

7.every()

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

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

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

• 如果所有元素都满足条件，则返回 true。

arr.every(function(value,index,arr){}，thisValue)

参数值

参数	描述
value	必须。当前元素的值
index	可选。当前元素的索引值
arr	可选。当前元素属于的数组对象
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”

实例

//检测数组 ages 的所有元素是否都大于等于 18 :
var ages = [32, 33, 16, 40];
function checkAdult(age) {
    return age >= 18;
}
ages.every(checkAdult);
//输出结果为:   false

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

二、ES6新增方法

1.ary.find( )

find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。

• find() 方法为数组中的每个元素都调用一次函数执行：

• 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。

• 如果没有符合条件的元素返回 undefined

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

参数值

参数	描述
value	必须。当前元素的值
index	可选。当前元素的索引值
arr	可选。当前元素属于的数组对象
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”

实例

//获取数组中年龄大于 18 的第一个元素
var ages = [3, 10, 18, 20];
ages.find(function(age){
	return age >= 18;
});
//输出结果为:  18

//返回符合大于输入框中数字的数组索引值：
var ages = [4, 12, 16, 20];
function checkAdult(age) {
    return age >= 18;
}
ages.find(checkAdult)
}
//输出结果为:  20

注意： find() 不会对空数组进行检测。
注意： find() 不会改变原始数组。

2.ary.findIndex( )

findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。

findIndex() 方法为数组中的每个元素都调用一次函数执行：

• 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数
• 如果没有符合条件的元素返回 -1

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

参数值

参数	描述
value	必须。当前元素的值
index	可选。当前元素的索引值
arr	可选。当前元素属于的数组对象
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”

返回值：

返回值	返回符合测试条件的第一个数组元素索引，如果没有符合条件的则返回 -1。

实例

//获取数组中年龄大于等于 18 的第一个元素索引位置
var ages = [3, 10, 18, 20];
function checkAdult(age) {
    return age >= 18;
}
function myFunction() {
    document.getElementById("demo").innerHTML = ages.findIndex(checkAdult);
}
//fruits 输出结果：   2

//返回符合大于输入框中数字的数组索引：
var ages = [4, 12, 16, 20];
 
function checkAdult(age) {
    return age >= document.getElementById("ageToCheck").value;
}
function myFunction() {
    document.getElementById("demo").innerHTML = ages.findIndex(checkAdult);
}

注意: findIndex() 对于空数组，函数是不会执行的。
注意: findIndex() 并没有改变数组的原始值。

3.ary.includes( )

includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

arr.includes(searchElement)
arr.includes(searchElement, fromIndex)

参数值

参数	描述
searchElement	必须。需要查找的元素值。
fromIndex	可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。

实例

//检测数组 site 是否包含 runoob :
let site = ['runoob', 'google', 'taobao'];
site.includes('runoob'); 
// true 
site.includes('baidu'); 
// false
[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true
//如果fromIndex 大于等于数组长度 ，则返回 false 。该数组不会被搜索:
var arr = ['a', 'b', 'c'];
arr.includes('c', 3);   //false
arr.includes('c', 100); // false

//计算出的索引小于 0,如果 fromIndex 为负值，计算出的索引将作为开始搜索searchElement的位置。如果计算出的索引小于 0，则整个数组都会被搜索。
// 数组长度是3
// fromIndex 是 -100
// computed index 是 3 + (-100) = -97
var arr = ['a', 'b', 'c'];
arr.includes('a', -100); // true
arr.includes('b', -100); // true
arr.includes('c', -100); // true

4.ary.fill( )

fill() 方法用于将一个固定值替换数组的元素。

array.fill(value, start, end)

参数值

参数	描述
value	必需。填充的值。
start	可选。开始填充位置。
end	可选。停止填充位置 (默认为 array.length)

实例

//使用固定值填充数组：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Runoob");
//fruits 输出结果：  Runoob,Runoob,Runoob,Runoob

//填充 "Runoob" 到数组的最后两个元素：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Runoob", 2, 4);
//输出结果：Banana,Orange,Runoob,Runoob

5.ary.copyWithin( )

copyWithin() 方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中。 > **array.copyWithin(target, start, end)**

参数值

参数	描述
target	必需。复制到指定目标索引位置。
start	可选。元素复制的起始位置。
end	可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。

返回值：

返回值	数组

实例

//复制数组的前面两个元素到后面两个元素上：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.copyWithin(2, 0);
//fruits 输出结果:   Banana,Orange,Banana,Orange

//复制数组的前面两个元素到第三和第四个位置上：
var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"];
fruits.copyWithin(2, 0, 2);
//输出结果：Banana,Orange,Banana,Orange,Kiwi,Papaya

6.ary.of( )

用于将一组值，转换为数组。这个方法的主要目的，是弥补数组构造函数 Array() 的不足。因为参数个数的不同，会导致 Array() 的行为有差异。返回数组

Array.of(1, 2, 3)

实例

var a = Array.of('1, 2, 3',3,4,5)
console.log(a)
//输出结果为:   ["1, 2, 3", 3, 4, 5]

7.entries( )

entries() 方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。

迭代对象中数组的索引值作为 key， 数组元素作为 value。

array.entries()

返回值：

返回值	一个数组可迭代对象。

实例

//从数组 fruit 创建一个可迭代对象， 该对象包含了数组的键值对：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.entries();
console.log(a.next().value)
console.log(a.next().value)
console.log(a.next().value)
//输出结果为:   
//0,Banana
//1,Orange
//2,Apple

8.keys( )

keys() 方法用于从数组创建一个包含数组键的可迭代对象。 如果对象是数组返回 true，否则返回 false。

array.keys()

返回值：

返回值	一个数组可迭代对象。

实例

//从数组 fruit 创建一个数组迭代对象， 该对象包含了数组的键：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.keys();
console.log(a.next().value)
console.log(a.next().value)
console.log(a.next().value)
//输出结果为:  
//0
//1
//2

9.values( )

values() 方法用于从数组创建一个包含数组值的可迭代对象。 如果对象是数组返回 true，否则返回 false。

array.values()

返回值：

返回值	一个数组可迭代对象。

实例

//从数组 fruit 创建一个数组迭代对象， 该对象包含了数组的键：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.values();
console.log(a.next().value)
console.log(a.next().value)
console.log(a.next().value)
//输出结果为:  
//Banana
//Orange
//Apple

10.valueOf( )

valueOf() 方法返回 Array 对象的原始值。

该原始值由 Array 对象派生的所有对象继承。
valueOf() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。

array.valueOf()

返回值：

返回值	valueOf() 返回数组值

实例

//valueOf() 是数组对象的默认方法。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var v=fruits.valueOf();
//fruits.valueOf()与 fruits返回值一样。
//v输出结果为：   Banana,Orange,Apple,Mango

三、数组增加删除元素

1.push()

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

注意： 新元素将添加在数组的末尾。
注意： 此方法改变数组的长度。
提示： 在数组起始位置添加元素请使用 unshift() 方法。

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

参数值：

参数	描述
item1, item2, …, itemX值	一个数组可迭代对象。

返回值：

类型	描述
Number	数组新长度

实例

//数组中添加新元素：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi")
//fruits 输出结果为:  Banana,Orange,Apple,Mango,Kiwi

//添加一个以上元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi","Lemon","Pineapple")
//以上实例将输出
//Banana,Orange,Apple,Mango,Kiwi,Lemon,Pineapple

2.unshift()

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

注意： 该方法将改变数组的数目。
提示: 将新项添加到数组末尾，请使用 push() 方法。
注意： unshift() 方法在Internet Explorer 8及更早IE版本返回undefined。

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

参数值：

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

返回值：

类型	描述
Number	数组新长度

实例

//将新项添加到数组起始位置:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");
//输出结果为:  Lemon,Pineapple,Banana,Orange,Apple,Mango

3.shift()

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

注意： 此方法改变数组的长度！ 提示: 移除数组末尾的元素可以使用 pop() 方法。

array.shift()

返回值：

类型	描述
任何类型（*）	数组原来的第一个元素的值（移除的元素）。

*：数组元素可以是一个字符串，数字，数组，布尔，或者其他对象类型。

实例

//从数组中移除元素:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift()
//输出结果为:  Orange,Apple,Mango

4.pop()

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

注意：此方法改变数组的长度！
提示： 移除数组第一个元素，请使用 shift() 方法。

array.pop()

返回值：

类型	描述
任何类型（*）	返回删除的元素。

*：数组元素可以是一个字符串，数字，数组，布尔，或者其他对象类型。

实例

//移除最后一个数组元素：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
//fruits 结果输出：Banana,Orange,Apple

const sites = ['Google', 'Runoob', 'Taobao', 'Zhihu', 'Baidu'];
 
console.log(sites.pop());
// 输出结果为: "Baidu"
console.log(sites);
// 输出结果为: ['Google', 'Runoob', 'Taobao', 'Zhihu']
sites.pop();
console.log(sites);
//  输出结果为: ["Google", "Runoob", "Taobao"]

5.splice()

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

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

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

参数值：

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

返回值：

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

实例

//移除数组的第三个元素，并在数组第三个位置添加新元素:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,1,"Lemon","Kiwi");
//输出结果为:  Banana,Orange,Lemon,Kiwi,Mango

//从第三个位置开始删除数组后的两个元素：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,2);
//输出结果：Banana,Orange

6.length

返回数组的数目： length 属性可设置或返回数组中元素的数目。 length 属性提供了向数组追加新元素的简易方法(末尾添加)

fruits[fruits.length] = “Kiwi”,可以以此方式给数组添加元素

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";
console.log(fruits )
//输出结果为:   fruits =["Banana", "Orange", "Apple", "Mango","Kiwi"]

7.delete

delete 运算符可以删除数组元素 删除指定下标的数组元素，被delete的下标元素值为undefined

delete fruits[0] fruits[0] = undefined

实例

var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi"];
delete fruits[0] ;
console.log(fruits )
//输出结果为:   fruits =[undefined, "Orange", "Apple", "Mango","Kiwi"]

四、截取拼接数组

1.slice()

创建新数组。它不会从源数组中删除任何元素。 slice() 方法可从已有的数组中返回选定的元素。 slice()方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

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

array.slice(start, end)

参数值：

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

返回值：

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

实例

//在数组中读取元素:
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
//输出结果为:  Orange,Lemon

//使用负值从数组中读取元素
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var myBest = fruits.slice(-3,-1); // 截取倒数第三个（包含）到倒数第一个（不包含）的两个元素
var myBest = fruits.slice(-3);  // 截取最后三个元素
//myBest 结果输出:
Lemon,Apple

//截取字符串
var str="www.runoob.com!";
document.write(str.slice(4)+"<br>"); // 从第 5 个字符开始截取到末尾
document.write(str.slice(4,10)); // 从第 5 个字符开始截取到第10个字符

2.concat()

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

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

参数值：

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

返回值：

类型	描述
Array 对象	返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。

实例

//合并三个数组的值：
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var kai = ["Robin"];
var children = hege.concat(stale,kai);
//children 输出结果：Cecilie,Lone,Emil,Tobias,Linus,Robin

五、数组转字符串

3.toString()

toString() 方法可把数组转换为字符串，并返回结果。

注意： 数组中的元素之间用逗号分隔。

array.toString()

返回值：

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

实例

//将数组转换为字符串：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.toString();
//fruits将输出:   Banana,Orange,Apple,Mango

4.join()

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

array.join(separator)

参数值：

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

返回值：

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

实例

//把数组中的所有元素转换为一个字符串：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join();
//energy输出结果:  Banana,Orange,Apple,Mango

//使用不同的分隔符：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join(" and ");
//energy 结果输出：
Banana and Orange and Apple and Mango

总结

JS数组是JS很重要的数据结构，ES5，ES6 都提出了很多数组的方法。熟练掌握各种方法的使用方法，明确各种方法的区别和用法很重要。