最有用的 Javascript 数组方法整理汇总

来源 | https://blog.devgenius.io/most-useful-javascript-array-methods-9685e61760b1

翻译 | 杨小爱

数组提供了很多方法，为了让开发变得简单高效，在今天的文章中，我们整理汇总了一些有用的JavaScript数组方法。

1、Array.map()

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

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

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

const list = [1, 2, 3, 4];
list.map((el) => el * 2); // [2, 4, 6, 8]

2、Array.filter()

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

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

const list = [1, 2, 3, 4];
list.filter((el) => el % 2 === 0); // [2, 4]

3、Array.reduce()

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

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

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

const list = [1, 2, 3, 4, 5];
list.reduce((total, item) => total + item, 0); // 15

4、Array.reduceRight()

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

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

const list = [1, 2, 3, 4, 5];
list.reduceRight((total, item) => total + item, 0); // 15

5、Array.fill()

用静态值填充数组中的元素。

const list = [1, 2, 3, 4, 5];
list.fill(0); // [0, 0, 0, 0, 0]

6、Array.find()

返回满足提供的测试功能的数组中第一个元素的值。否则返回undefined。

const list = [1, 2, 3, 4, 5];
list.find((el) => el === 3); // 3
list.find((el) => el === 6); // undefined

7、Array.indexOf()

返回可以在数组中找到给定元素的第一个索引，如果不存在，则返回 -1。

const list = [1, 2, 3, 4, 5];
list.indexOf(3); // 2
list.indexOf(6); // -1

8、Array.lastIndexOf()

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

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

该方法将从尾到头地检索数组中指定元素 item。开始检索的位置在数组的 start 处或数组的结尾（没有指定 start 参数时）。

如果找到一个 item，则返回 item 从尾向前检索第一个次出现在数组的位置。数组的索引开始位置是从 0 开始的。

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

const list = [1, 2, 3, 4, 5];
list.lastIndexOf(3); // 2
list.lastIndexOf(3, 1); // -1

9、Array.findIndex()

返回满足提供的测试功能的数组中第一个元素的索引。否则返回 -1。

const array = [5, 12, 8, 130, 44];
array.findIndex((element) => element > 13); // 3

10、Array.includes()

如果给定元素存在于数组中，则返回 true。

const list = [1, 2, 3, 4, 5];
list.includes(3); // true
list.includes(6); // false

11、Array.pop()

从数组中删除最后一个元素并返回该元素。

const list = [1, 2, 3, 4, 5];
list.pop(); // 5
list; // [1, 2, 3, 4]

12、Array.push()

将新元素附加到数组的末尾，并返回新的长度。

const list = [1, 2, 3, 4, 5];
list.push(6); // 6
list; // [1, 2, 3, 4, 5, 6]

13、Array.shift()

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

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

const list = [1, 2, 3, 4, 5];
list.shift(); // 1
list; // [2, 3, 4, 5]

14、Array.unshift()

unshift() 方法将新项添加到数组的开头，并返回新的长度。

注意：unshift() 方法会改变数组的长度。

const list = [1, 2, 3, 4, 5];
list.unshift(0); // 6
list; // [0, 1, 2, 3, 4, 5]

15、Array.splice()

splice() 方法从数组添加/删除项目，并返回删除的项目，注意，splice() 方法会改变原始数组。

const list = [1, 2, 3, 4, 5];
list.splice(1, 2); // [2, 3]
list; // [1, 4, 5]

16、Array.slice()

返回数组中被选中的元素，选择从给定的 start 参数开始的元素，并在给定的 end 参数处结束。注意，slice() 方法不会改变原始数组。

const list = [1, 2, 3, 4, 5];
list.slice(1, 3); // [2, 3]
list; // [1, 2, 3, 4, 5]

17、Array.join()

join() 方法将数组作为字符串返回，元素将由指定的分隔符分隔，默认分隔符是逗号 (,)。注意，join() 方法不会改变原始数组。

const list = [1, 2, 3, 4, 5];
list.join(', '); // "1, 2, 3, 4, 5"

18、Array.reverse()

reverse() 方法反转数组中元素的顺序，但是reverse() 方法会改变原始数组。

const list = [1, 2, 3, 4, 5];
list.reverse(); // [5, 4, 3, 2, 1]
list; // [5, 4, 3, 2, 1]

19、Array.sort()

sort() 方法对数组的项目进行排序。排序顺序可以是按字母或数字，也可以是升序（向上）或降序（向下）。

默认情况下，sort() 方法将按字母和升序将值作为字符串进行排序。

这适用于字符串（"Apple" 出现在 "Banana" 之前）。但是，如果数字按字符串排序，则 "25" 大于 "100" ，因为 "2" 大于 "1"。

正因为如此，sort() 方法在对数字进行排序时会产生不正确的结果。

我们可以通过提供“比较函数”来解决此问题。

注意，sort() 方法会改变原始数组。

const array = ['D', 'B', 'A', 'C'];
array.sort(); // ['A', 'B', 'C', 'D']
// OR
const array = [4, 1, 3, 2, 10];
array.sort(); // [1, 10, 2, 3, 4]
array.sort((a, b) => a - b); // [1, 2, 3, 4, 10]

20、Array.some()

some() 方法用于检测数组中的元素是否满足指定条件（函数提供），它会依次执行数组的每个元素，如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测；如果没有满足条件的元素，则返回false。

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

const list = [1, 2, 3, 4, 5];
list.some((el) => el === 3); // true
list.some((el) => el === 6); // false

21、Array.every()

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供），every() 方法使用指定函数检测数组中的所有元素，如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测；如果所有元素都满足条件，则返回 true。

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

const list = [1, 2, 3, 4, 5];
list.every((el) => el === 3); // false
const list = [2, 4, 6, 8, 10];
list.every((el) => el%2 === 0); // true

22、Array.from()

Сreаtes 从аrrаy-like or iterаble оbjeсt 创建一个新的аrrаy。

const range = (n) => Array.from({ length: n }, (_, i) => i + 1);
console.log(range(10)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

23、Array.of() 

array.of()函数是JavaScript中的內置函数，它使用变量作为函数的参数创建一个新的数组实例。

const list = Array.of(1, 2, 3, 4, 5);
list; // [1, 2, 3, 4, 5]

24、Array.isArray()

如果给定的值是一个数组，则返回 true。

Array.isArray([1, 2, 3, 4, 5]); // true
Array.isArray(5); // false

25、Array.at()

返回指定索引处的值。

const list = [1, 2, 3, 4, 5];
list.at(1); // 2
list.at(-1); // 5
list.at(-2); // 4

26、Array.copyWithin()

copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，但不会改变原数组的长度。

const list = [1, 2, 3, 4, 5];
list.copyWithin(0, 3, 4); // [4, 2, 3, 4, 5]

总结

以上就是我整理的全部关于JavaScript数组方法的汇总，希望对您有所帮助，感谢您的阅读。祝编程愉快！

学习更多技能

请点击下方公众号