28个JS常用数组方法总结

本文将介绍28个JS常用数组方法，包括简单的遍历方法和高级的数组变换方法。这些方法可以用来操作数组，从而更好的解决开发中出现的问题。

1. forEach

forEach用于遍历数组并对数组中的每个元素执行指定操作。操作通过传递一个回调函数实现。回调函数接受三个参数：数组中的当前元素、当前元素的索引和数组本身。

const arr = [1, 2, 3];

arr.forEach(function(element, index, array) {
  console.log(`当前元素:${element}，当前索引:${index}，数组本身:${array}`);
});

输出结果：

当前元素:1，当前索引:0，数组本身:1,2,3
当前元素:2，当前索引:1，数组本身:1,2,3
当前元素:3，当前索引:2，数组本身:1,2,3

2. map

map方法用于将数组中的每个元素转换为新元素，返回一个新数组。回调函数接受三个参数：数组中的当前元素、当前元素的索引和数组本身。回调函数返回一个新值，该值将在新数组中放置到当前元素的位置。

const arr = [1, 2, 3];

const newArr = arr.map(function(element, index, array) {
  return element * 2;
});

console.log(newArr); // [2, 4, 6]

3. filter

filter用于从数组中选择一组元素，并返回一个新的数组，新数组包含满足筛选条件的元素。回调函数接受三个参数：数组中的当前元素、当前元素的索引和数组本身。如果回调函数返回true，则当前元素将包含在新数组中。

const arr = [1, 2, 3, 4, 5];

const newArr = arr.filter(function(element, index, array) {
  return element % 2 === 0;
});

console.log(newArr); // [2, 4]

4. reduce

reduce方法用于将数组中的所有元素计算为一个单一值。回调函数接受四个参数：accumulator（累加器）、当前元素、当前元素的索引和数组本身。回调函数执行后，返回的结果将成为下一次迭代时的accumulator参数的值。

const arr = [1, 2, 3, 4, 5];

const sum = arr.reduce(function(accumulator, currentVal) {
  return accumulator + currentVal;
});

console.log(sum); // 15

5. some

some方法用于检查数组中是否至少有一个元素满足指定条件。回调函数接受三个参数：数组中的当前元素、当前元素的索引和数组本身。如果回调函数返回true，则some方法将返回true，如果没有元素满足条件，则返回false。

const arr = [1, 2, 3, 4];

const hasEvenNumber = arr.some(function(element) {
  return element % 2 === 0;
});

console.log(hasEvenNumber); // true

6. every

every方法用于检查数组中的所有元素是否满足指定条件。回调函数接受三个参数：数组中的当前元素、当前元素的索引和数组本身。如果所有元素都满足条件，则every方法将返回true，否则返回false。

const arr = [1, 2, 3, 4];

const allEvenNumbers = arr.every(function(element) {
  return element % 2 === 0;
});

console.log(allEvenNumbers); // false

7. sort

sort方法用于对数组进行排序。如果没有传入比较函数，sort方法将按照Unicode字符顺序对数组进行排序。如果传入了比较函数，则该函数将定义排序顺序。

const arr = [3, 2, 1];

arr.sort(function(a, b) {
  return a - b;
});

console.log(arr); // [1, 2, 3]

8. reverse

reverse方法用于将数组中的所有元素按照相反的顺序排列。

const arr = [1, 2, 3];

arr.reverse();

console.log(arr); // [3, 2, 1]

9. find

find方法用于查找满足指定条件的数组元素，并返回该元素的值。回调函数接受三个参数：数组中的当前元素、当前元素的索引和数组本身。如果回调函数返回true，则find方法将返回该元素，否则返回undefined。

const arr = [1, 3, 5, 7];

const result = arr.find(function(element) {
  return element > 3;
});

console.log(result); // 5

10. findIndex

findIndex方法用于查找满足指定条件的数组元素，并返回该元素的索引。回调函数接受三个参数：数组中的当前元素、当前元素的索引和数组本身。如果回调函数返回true，则findIndex方法将返回该元素的索引，否则返回-1。

const arr = [1, 3, 5, 7];

const index = arr.findIndex(function(element) {
  return element > 3;
});

console.log(index); // 2

11. includes

includes用于检查数组中是否存在指定的元素。如果存在，则返回true，否则返回false。includes方法接受两个参数：需要查找的元素和可选的查找起始索引。

const arr = [1, 2, 3];

const hasNumberTwo = arr.includes(2);

console.log(hasNumberTwo); // true

12. indexOf

indexOf用于查找数组中指定元素的位置。如果存在，则返回该元素的索引，否则返回-1。indexOf方法接受两个参数：需要查找的元素和可选的查找起始索引。

const arr = [1, 2, 3];

const index = arr.indexOf(2);

console.log(index); // 1

13. lastIndexOf

lastIndexOf用于查找数组中指定元素的最后一个位置。如果存在，则返回该元素的索引，否则返回-1。lastIndexOf方法接受两个参数：需要查找的元素和可选的查找起始索引。

const arr = [1, 2, 3, 2];

const index = arr.lastIndexOf(2);

console.log(index); // 3

14. concat

concat方法用于将两个或多个数组连接成一个数组。concat方法不会修改原始数组，而是返回一个新数组。

const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [5, 6];

const newArr = arr1.concat(arr2, arr3);

console.log(newArr); // [1, 2, 3, 4, 5, 6]

15. join

join方法用于将数组中的所有元素连接成一个字符串。可以指定一个分隔符来在元素之间添加分隔符。

const arr = [1, 2, 3];

const str = arr.join(',');

console.log(str); // '1,2,3'

16. slice

slice方法用于从数组中提取指定位置的元素，并返回一个新的数组。slice方法接受两个参数：提取开始位置和可选的提取结束位置。如果未指定提取结束位置，则提取到数组末尾为止。

const arr = [1, 2, 3, 4, 5];

const newArr = arr.slice(1, 4);

console.log(newArr); // [2, 3, 4]

17. splice

splice方法用于添加或删除数组中的元素。splice方法接受三个参数：添加或删除元素的起始位置、需要删除的元素数量和需要添加的新元素。

const arr = [1, 2, 3, 4, 5];

arr.splice(2, 1, 'a', 'b');

console.log(arr); // [1, 2, 'a', 'b', 4, 5]

18. shift

shift方法用于删除数组中的第一个元素，并返回该元素的值。该操作会修改原始数组。

const arr = [1, 2, 3];

const shifted = arr.shift();

console.log(shifted); // 1
console.log(arr); // [2, 3]

19. unshift

unshift方法用于在数组的开头添加一个或多个元素，并返回新数组的长度。该操作会修改原始数组。

const arr = [1, 2, 3];

const length = arr.unshift(0);

console.log(length); // 4
console.log(arr); // [0, 1, 2, 3]

20. push

push方法用于在数组的末尾添加一个或多个元素，并返回新数组的长度。该操作会修改原始数组。

const arr = [1, 2, 3];

const length = arr.push(4, 5);

console.log(length); // 5
console.log(arr); // [1, 2, 3, 4, 5]

21. pop

pop方法用于删除数组末尾的元素，并返回该元素的值。该操作会修改原始数组。

const arr = [1, 2, 3];

const popped = arr.pop();

console.log(popped); // 3
console.log(arr); // [1, 2]

22. toString

toString方法用于将数组转换为字符串，并返回该字符串。

const arr = [1, 2, 3];

const str = arr.toString();

console.log(str); // '1,2,3'

23. flat

flat方法用于将多维数组转换为一维数组。flat方法接受一个可选的层数参数，表示需要扁平化的维度数。

const arr = [1, [2, 3], [[4, 5], [6, 7]]];

const flatArr = arr.flat(2);

console.log(flatArr); // [1, 2, 3, 4, 5, 6, 7]

24. slice()

与它的编程语言名字相同，slice()是JavaScript的一个函数，用于切分数组。可以非常简单地理解，该函数可以切分一个数组，并将其以一个新的数组返回。而且它真的非常简单，也非常灵活。下面就来看一下它的具体用法：

/*例子*/
let array1 = [1, 2, 3 ,4, 5, 6];

console.log(array1.slice(2,4));//  [3,4]

这里我们传入两个参数，分别为2 和 4。 数组中这个时候，index = 2 就是3，index = 4 就是5。函数返回一个从index=2的元素开始，到index=4前一个位置的子数组，即 [3, 4]。

在切分数组时，可以选择不传入第二个参数。这时，数组将会从第一个索引开始，一直分割到数组末尾。可以看下面的例子，以更好的理解：

 let weatherConditions = ['rain', 'snow', 'sleet', 'hail', 'clear']

let todaysWeather = weatherConditions.slice(1,3)

console.log(todaysWeather); //  ['snow', 'sleet']

25. join()

join()是懂JavaScript奇妙函数之一。它加到的不仅仅是数组，普通的字符串也适用。 join() 用于将数组中的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。默认情况下，元素由逗号分隔。如果将空分隔符 ("") 用作分隔符，join() 将在元素之间没有字符添加。

例如，看下面的例子：

const stuff = ['test', '123', 'arrays']

const str = stuff.join(' -- ')

console.log(str)// 
/* 'test -- 123 -- arrays' */

join()接受一个参数separator，是用来分隔数组元素的字符串，在代码中，我们把字符串 '--' 作为元素之间的分割符了。 如果不指定该参数，则默认使用逗号，其规则等同于toString()方法。

结合上面两个方法进行案例：

 let weatherConditions = ['rain', 'snow', 'sleet', 'hail', 'clear']

let todaysWeather = weatherConditions.slice(1,3);
console.log(todaysWeather.join(" and ")); //  'snow and sleet'

在上面的例子中，我们将新切分后的数组元素用‘and’连接起来。结果是：’snow and sleet‘。

总结

以上就是28个JS常用数组方法总结，包括遍历方法和高级数组变换方法。每个数组方法都有自己的作用和适用场景，可以根据实际需要灵活使用。