写在前面
掌握数组方法是前端开发中必会的技能，熟练掌握数组方法会快速处理好数据、快速解决开发工作中遇到的问题。这篇文章将整理所有的数组方法。
查看所有的数组方法以及分类
众所周知，数组的方法都在自己的原型链上，所以可在浏览器中直接查看
Array.prototype方法
dir(Array)
接下来，我们用一张思维导图轻松将所有的数组方法分类
数组方法讲解
下面的数组方法，是改变了原数组的方法（操作原数组后，原数组发生改变）
splice
splice()方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。
参数
start：要修改的起始位置（从0开始）。
(start > Array.length)=> 从数组末尾开始添加元素，(start < 0)=> 表示数组末尾开始的第几位deleteCount（可选）：要删除的元素个数
item1、item2….（可选）：要添加进数组的元素，从start位置开始，如果不指定，则方法只删除元素
返回值
返回所有被删除的元素。
- 示例
var arr = ['apple', 'banana', 'orange'];
// 1.删除'banana'开始的所有元素
var brr = arr.splice(1);
console.log(arr, brr); // ['apple'] ['banana', 'orange']
// 2.删除'apple'之后的1个元素
var brr = arr.splice(1, 1);
console.log(arr, brr); // ['apple', 'orange'] ['banana']
// 3.在'banana'元素后加'pear'
var brr = arr.splice(2, 0, 'pear'); // ['apple', 'banana', 'pear', orange'] []
sort
sort()方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的。
参数(可选)
function(a, b)：a => 第一个用于比较的元素，b => 第二个用于比较的元素
返回值
排序之后的数组。
- 示例
var arr = [1, 6, 8, 7, 99, 10, 77];
// 1.将数组arr排序(无参数情况)
var brr = arr.sort();
console.log(arr, brr); // [1, 10, 6, 7, 77, 8, 99] [1, 10, 6, 7, 77, 8, 99]
// 2.有参数情况
var brr = arr.sort(function(a, b) {
return a - b;
});
console.log(arr, brr); // [1, 10, 6, 7, 77, 8, 99] [1, 6, 7, 8, 10, 77, 99]
pop
pop()方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。
- 返回值
从数组中删除的元素(当数组为空时返回undefined)。
- 示例
// 1.数组不为空
var arr = [1, 2, 3, 4, 5];
var brr = arr.pop();
console.log(arr, brr); // [1, 2, 3, 4] [5]
// 2.数组为空
var arr = [];
var brr = arr.pop();
console.log(arr, brr); // [] undefined
shift
shift()方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。
- 返回值
从数组中删除的元素(当数组为空时返回undefined)。
- 示例
// 1.数组不为空
var arr = [1, 2, 3, 4, 5];
var brr = arr.shift();
console.log(arr, brr); // [2, 3, 4, 5] [1]
// 2.数组为空
var arr = [];
var brr = arr.pop();
console.log(arr, brr); // [] undefined
unshift
unshift()方法将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)。
- 参数
item1, …, itemN：要添加的元素列表。
- 返回值
返回数组的length属性
- 示例
var arr = [1, 2];
var brr = arr.unshift(3, 4, 5, 6);
console.log(arr, brr); // [3, 4, 5, 6, 1, 2] 6
reverse
reverse()方法将数组中元素的位置颠倒，并返回该数组。
- 返回值
颠倒后的数组。
- 示例
var arr = [1, 2, 3, 4];
var brr = arr.reverse();
console.log(arr, brr); // [4, 3, 2, 1] [4, 3, 2, 1]
copyWithin
copyWithin()方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。
参数
target：复制元素到此位置。target < 0 => 从数组末尾开始计算，target > Array.length => 不发生拷贝操作。
start(可选)：开始复制元素的起始位置。start < 0 => 从数组末尾开始计算。如果没有此参数，方法从0开始复制。
end(可选)：开始复制元素的结束位置，但是不包括
end这个元素。end < 0 => 从数组末尾计算。如果没有此参数，方法复制元素至数组结尾。返回值
返回复制之后的数组。
- 示例
var arr = [1, 2, 3, 4, 5, 6];
// 1.target参数为正数
var brr = arr.copyWithin(1);
console.log(arr, brr); // [1, 1, 2, 3, 4, 5] [1, 1, 2, 3, 4, 5]
// 2.target参数为负数
var brr = arr.copyWithin(-1);
console.log(arr, brr); // [1, 2, 3, 4, 5, 1] [1, 2, 3, 4, 5, 1]
// 3.start参数为正数
var brr = arr.copyWithin(1, 2);
console.log(arr, brr); // [1, 3, 4, 5, 6, 6] [1, 3, 4, 5, 6, 6]
// 4.start参数为负数
var brr = arr.copyWithin(1, -2);
console.log(arr, brr); // [1, 5, 6, 4, 5, 6] [1, 5, 6, 4, 5, 6]
// 5.end参数为正数
var brr = arr.copyWithin(1, 2, 3);
console.log(arr, brr); // [1, 3, 3, 4, 5, 6] [1, 3, 3, 4, 5, 6]
// 6.end参数为负数
var brr = arr.copyWithin(1, 2, -2);
console.log(arr, brr); // [1, 3, 4, 4, 5, 6] [1, 3, 4, 4, 5, 6]
fill
fill()方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
参数
value：用于填充数组元素的值。
start(可选)：起始索引，默认值为0。
end(可选)：终止索引，默认值为数组长度，不包括
end索引返回值
填充后的数组
- 示例
var arr = [1, 2, 3, 4, 5];
// 1.只有value参数
var brr = arr.fill(6);
console.log(arr, brr); // [6, 6, 6, 6, 6] [6, 6, 6, 6, 6]
// 2.start和end参数
var brr = arr.fill(6, 1, 3);
console.log(arr, brr); // [1, 6, 6, 4, 5] [1, 6, 6, 4, 5]
下面的数组方法，是不改变原数组的方法（操作原数组后，原数组不发生变化）
slice
slice()方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。
参数
begin(可选)：提取数组元素的开始索引值，默认值为0。
end(可选)：提取数组元素的结束索引值，如没有此参数，会提取到数组结尾（不包括end）。
返回值
返回提取后的数组
- 示例
var arr = [1, 2, 3, 4];
// 1.无end
var brr = arr.slice(1);
console.log(arr, brr); // [1, 2, 3, 4] [2, 3, 4]
// 2.有end
var brr = arr.slice(1, 3);
console.log(arr, brr); // [1, 2, 3, 4] [2, 3]
join
join()方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。
参数
separator(可选)：分割的字符
返回值
数组元素连接的字符串，如果数组为空，则返回空字符串
- 示例
var arr = [1, 2, 3, 4];
var brr = arr.join('+');
console.log(arr, brr); // [1, 2, 3, 4] "1+2+3+4"
toLocalString
toLocaleString()方法返回这个数字在特定语言环境下的表示字符串。
参数
locales(可选)：缩写语言代码（BCP 47 language tag，例如: cmn-Hans-CN）的字符串或者这些字符串组成的数组。
options：包含一些属性的类。
返回值
返回一个字符串。
- 示例
var num = 9800000;
console.log(num.toLocaleString()); // 9,800,000
toString
toString()返回一个字符串，表示指定的数组及其元素。
- 示例
var arr = [1, 2, 4, 4, 5, 'a', 'b'];
var brr = arr.toString();
console.log(arr, brr); // [1, 2, 4, 4, 5, "a", "b"] "1,2,4,4,5,a,b"
concat
concat()用于合并两个或多个数组。
参数
arrayN：需要拼接的数组列表
返回值
返回拼接好的数组
- 示例
var arr = [1, 2];
var brr = arr.concat([3, 4]);
var crr = arr.concat([7, 8], [5, 6]);
console.log(arr, brr, crr); // [1, 2] [1, 2, 3, 4] [1, 2, 7, 8, 5, 6]
indexOf
indexOf()返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
参数
item：要查找的元素
index(可选)：开始查找的位置。
index > Array.length=> 不在数组中查找，返回-1。index < 0=> 从数组末端开始查找返回值
第一个被找到的元素的索引，没有找到返回-1
- 示例
var arr = [1, 2, 3, 4, 5];
// 1.没有index参数
var brr = arr.indexOf(1);
var crr = arr.indexOf(0);
console.log(arr, brr); // [1, 2, 3, 4, 5] 0 -1
// 2.有index参数
var brr = arr.indexOf(1, 1);
var crr = arr.indexOf(2, 1);
console.log(arr, brr, crr); // [1, 2, 3, 4, 5] -1 1
lastIndexOf
lastIndexOf()方法返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找。
参数
item：要查找的元素
index(可选)：开始查找的位置（逆向查找）。
index > Array.length=> 整个数组都会被查找，返回-1。index < 0=> 从数组末端开始查找index < 0 && |index| > Array.length，返回-1返回值
第一个被找到的元素的索引，没有找到返回-1
- 示例
var arr = [1, 2, 4, 5, 2, 5];
// 1.只查找元素
var brr = arr.lastIndexOf(2);
var crr = arr.lastIndexOf(6);
console.log(arr, brr, crr); // [1, 2, 4, 5, 2, 5] 4 -1
// 2.根据索引查找
var brr = arr.lastIndexOf(2, 2);
var crr = arr.lastIndexOf(4, -2); // [1, 2, 4, 5, 2, 5] 1 2
isArray
判断传递的值是否是Array类型
参数
value：传递的值。
返回值
返回Boolean值：是Array，返回true，否则false。
- 示例
console.log(Array.isArray('124')); // false
console.log(Array.isArray(567)); // false
console.log(Array.isArray([1, 2, 4, 5])); // true
console.log(Array.isArray({name: '小红'})); // false
console.log(Array.isArray(function(){console.log(123)})); // false
from
Array.from()从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。
参数
arrayLike：想要转换成数组的伪数组对象或可迭代对象。
mapFn(可选)：回调函数，如果传参，则执行。
thisArg(可选)：执行回调函数
mapFn时this对象。返回值
返回一个新的数组实例。
- 示例
// 1.传入String
var str = 'china';
var arr = Array.from(str);
console.log(str, arr); // "china" [ 'c', 'h', 'i', 'n', 'a' ]
// 2.new Set
var arr = Array.from(new Set([1, 2, 4, 5, 4, 2]));
console.log(arr); // [ 1, 2, 4, 5 ]
// 3.使用mapFn参数
var arr = [1, 2, 4, 5];
var brr = Array.from(arr, item => item * 2);
console.log(arr, brr); // [ 1, 2, 4, 5 ] [ 2, 4, 8, 10 ]
// 4.设置length
var arr = Array.from({length: 6}, (item, index) => index);
console.log(arr); // [ 0, 1, 2, 3, 4, 5 ]
of
Array.of()方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。
参数
elementN：N个参数，将按顺序成为返回数组中的元素。
返回值
返回一个新的数组实例。
- 示例
// 1.
var arr = [1, 2, 4];
var brr = Array.of(arr);
console.log(arr, brr); // [ 1, 2, 4 ] [ [ 1, 2, 4 ] ]
// 2.
var arr = Array.of(1);
var brr = Array.of(1, 2, 4);
console.log(arr, brr); // [1] [ 1, 2, 4 ]
includes
includes()用来判断一个数组是否包含一个指定的值。
参数
value：要查找的元素。
fromIndex(可选)：要开始查找的索引位置。
fromIndex > Array.length=> 从数组末端开始查找。默认值为0。返回值
如找到，返回true；如没找到，返回false。
- 示例
var arr = [1, 2, 3, 4];
// 1.无索引
var bool = arr.includes(1);
var bool1 = arr.includes(5);
console.log(bool, bool1); // true false
// 2.有索引
var bool = arr.includes(1, 1);
var bool1 = arr.includes(2, 1);
console.log(bool, bool1); // false true
下面的数组方法，是遍历数组的一些方法
forEach
forEach()方法用于遍历一个数组。
参数
callback
value：数组中每一项的值
index(可选)：数组中每一项的索引
array(可选)：数组本身
thisArg(可选)：当执行回调函数 callback 时，用作 this 的值。
返回值
undefined
- 示例
var arr = [1, 2, 3, 4];
// 1.证明无返回值
var brr = arr.forEach(function(item, index, value) {
return {item, index, value}
})
console.log(brr); // undefined
// 2.输出每一项
arr.forEach(function(item, index, value) {
console.log(item, index, value);
})
/* 结果
1 0 [ 1, 2, 3, 4 ]
2 1 [ 1, 2, 3, 4 ]
3 2 [ 1, 2, 3, 4 ]
4 3 [ 1, 2, 3, 4 ] */
map
map()方法用于遍历数组。
参数
callback
value：数组中每一项的值
index(可选)：数组中每一项的索引
array(可选)：数组本身
thisArg(可选)：当执行回调函数 callback 时，用作 this 的值。
返回值
返回新数组中的每一个元素
- 示例
var arr = [1, 2, 3, 4];
var brr = arr.map(function(item, index, arr) {
return item * 2;
});
console.log(arr, brr); // [1, 2, 3, 4] [2, 4, 6, 8]
every
every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。
参数
callback
value：数组中每一项的值
index(可选)：数组中每一项的索引
array(可选)：数组本身
thisArg(可选)：当执行回调函数 callback 时，用作 this 的值。
返回值
每一次调用都通过测试，则返回true，反之false。
- 示例
var arr = [1, 2, 3, 4];
var bool = arr.every(function(item, index, arr) {
return item % 2 === 0;
})
var bool1 = arr.every(function(item, index, arr) {
return typeof item === 'number'
})
console.log(bool, bool1); // false true
some
some()方法测试一个数组内的所有元素是否至少有一个能通过某个指定函数的测试。
参数
callback
value：数组中每一项的值
index(可选)：数组中每一项的索引
array(可选)：数组本身
thisArg(可选)：当执行回调函数 callback 时，用作 this 的值。
返回值
每一次调用至少有一个能通过测试，则返回true，反之false。
- 示例
var arr = [1, 2, 3, 4];
var bool = arr.some(function(item, index, arr) {
return item % 2 === 0;
})
var bool1 = arr.every(function(item, index, arr) {
return typeof item === 'string'
})
console.log(bool, bool1); // true false
filter
filter()方法过滤出通过所提供函数的所有元素，以创建一个新数组返回。
参数
callback
value：数组中每一项的值
index(可选)：数组中每一项的索引
array(可选)：数组本身
thisArg(可选)：当执行回调函数 callback 时，用作 this 的值。
返回值
返回筛选后的元素组成的新数组，如果没有，返回空数组。
- 示例
var arr = [1, 2, 4, 5, 6];
var brr = arr.filter(function(item, index, arr) {
return item > 1;
})
var crr = arr.filter(function(item, index, arr) {
return item < 1;
})
console.log(arr, brr, crr); // [ 1, 2, 4, 5, 6 ] [ 2, 4, 5, 6 ] []
reduce
reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(从左到右)，将其结果汇总为单个返回值。
参数
callback
acc：累计器。
current：当前值。
current index(可选)：当前索引。
array(可选)：当前数组。
initialValue：第一次调用
callback函数时第一个参数的值。没有初始值，会使用数组的第一个元素。如果是空数组，会报错。返回值
函数累计结果
- 示例
var arr = [1, 2, 4, 5, 6];
// 1.无初始值
var value = arr.reduce(function(sum, current) {
return sum += current;
})
console.log(value); // 18
// 2.有初始值
var value = arr.reduce(function(sum, current) {
return sum += current;
}, 8)
console.log(value); // 26
// 3.空数组
var arr = [];
var value = arr.reduce(function(sum, current) {
return sum += current;
})
console.log(value); // TypeError: Reduce of empty array with no initial value
reduceRight
reduceRight()方法对数组中的每个元素执行一个由您提供的reducer函数(从右到左)，将其结果汇总为单个返回值。
参数
callback
acc：累计器。
current：当前值。
current index(可选)：当前索引。
array(可选)：当前数组。
initialValue：第一次调用
callback函数时第一个参数的值。没有初始值，会使用数组的第一个元素。如果是空数组，会报错。返回值
函数累计结果
- 示例
var arr = [1, 2, 4, 5, 6];
// 1.无初始值
var value = arr.reduceRight(function(sum, current) {
return sum += current;
})
console.log(value); // 18
// 2.有初始值
var value = arr.reduceRight(function(sum, current) {
return sum += current;
}, 8)
console.log(value); // 26
// 3.空数组
var arr = [];
var value = arr.reduceRight(function(sum, current) {
return sum += current;
})
console.log(value); // TypeError: Reduce of empty array with no initial value
find
find()方法用于查找数组中满足提供的测试函数的第一个元素的值。
参数
callback
value：数组中每一项的值
index(可选)：数组中每一项的索引
array(可选)：数组本身
thisArg(可选)：当执行回调函数 callback 时，用作 this 的值。
返回值
返回数组中第一个满足所提供测试函数的元素的值，否则返回undefined。
- 示例
var arr = [1, 2, 4, 5, 6, 10];
// 1.可以找到
var val = arr.find(function(item, index, arr) {
return item > 5;
});
console.log(val); // 6
// 2.不能找到
var val = arr.find(function(item, index, arr) {
return item > 10;
});
console.log(val); // undefined
findIndex
find()方法用于查找数组中满足提供的测试函数的第一个元素的索引。
参数
callback
value：数组中每一项的值
index(可选)：数组中每一项的索引
array(可选)：数组本身
thisArg(可选)：当执行回调函数 callback 时，用作 this 的值。
返回值
返回数组中第一个满足所提供测试函数的元素的索引，否则返回-1。
- 示例
var arr = [1, 2, 4, 5, 6, 10];
// 1.可以找到
var val = arr.findIndex(function(item, index, arr) {
return item > 5;
});
console.log(val); // 4
// 2.不能找到
var val = arr.findIndex(function(item, index, arr) {
return item > 10;
});
console.log(val); // -1
keys
keys()方法返回一个包含数组中每个索引键的Array Iterator对象。
- 返回值
返回一个新的 Array 迭代器对象。
- 示例
// 1.
var arr = [1, 2, 4];
console.log([...arr.keys()]); // [ 0, 1, 2 ]
// 2.
var arr = ["a", , "c"];
console.log([...arr.keys()]); // [ 0, 1, 2 ]
values
values()方法返回一个新的Array Iterator对象，该对象包含数组每个索引的值。
- 返回值
返回一个新的 Array 迭代器对象。
- 示例
// 1.
var arr = [1, 2, 4];
var values = arr.values();
for(let i of values) {
console.log(i); // 1 2 4
}
entries
entries()方法返回一个新的Array Iterator对象，该对象包含数组中每个索引的键值对。
- 返回值
一个新的Array迭代器对象。Array Iterator是对象，它的原型（__proto__:Array Iterator）上有一个next方法，可用用于遍历迭代器取得原数组的[key,value]。
- 示例
var arr = [1, 2, 4, 5, 6];
var brr = arr.entries();
console.log(brr.next());
var arr = [1, 2, 4, 5, 6];
var brr = arr.entries();
var newArr = [];
for(var i = 0; i < arr.length + 1; i++){
var item = brr.next();
if(item.done !== true){
newArr[i] = item.value;
}
}
console.log(newArr);
flat
flat()方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组。
参数
depth：提取嵌套数组的结构深度，默认值为
1。返回值
返回所有元素与遍历到的子数组中的元素合并为一个新数组。
- 示例
var arr = [1, 2, 4, [5, 6]];
var brr = [1, [2, 4, [5, 6]]];
console.log(arr.flat()); // [1, 2, 4, 5, 6]
console.log(brr.flat()); // [1, 2, 4, [5, 6]]
console.log(brr.flat(2)); // [1, 2, 4, 5, 6]
flatMap
flatMap()方法使用callback函数遍历每一个元素，将结果压缩为新数组。faltMap()方法效率更高一些。
参数
callback
value：当前正在处理的值。
index(可选)：当前正在处理元素的索引。
array(可选)：被调用的
map数组。
thisArg(可选)：当执行回调函数 callback 时，用作 this 的值。
返回值
返回新的数组。depth深度为1。
- 示例
var arr = [1, 2, 4, 5];
var brr = arr.flatMap(item => {
return item * 2;
})
console.log(brr); // [2, 4, 8, 10]
写在最后
到这里，数组方法已经整理完毕，希望这些对大家能有所帮助~有哪里写错的地方，也请大家指点出来，我们共同进步~
最后，分享一下我的公众号「web前端日记」，小伙伴们可以关注一波~
