返回

16种常用数组方法解析，让你的编码更轻松更有趣

前端

在JavaScript中，数组是一种常用的数据结构，它可以存储一系列有序的元素。数组提供了多种方法来操作和管理这些元素，使我们能够轻松地处理数组数据。本文将介绍16种常用的数组方法，帮助你更轻松高效地处理数组数据，提升编码能力。

1. Array.from()

Array.from()方法将一个可迭代的对象（如字符串、Map、Set）转换为数组。该方法接收一个可迭代对象作为参数，并返回一个由该对象元素组成的数组。例如：

const string = 'Hello World';
const array = Array.from(string);
console.log(array); // 输出：['H', 'e', 'l', 'l', 'o', ' ', 'W', 'o', 'r', 'l', 'd']

2. Array.isArray()

Array.isArray()方法判断一个变量是否为数组。该方法接收一个变量作为参数，并返回一个布尔值，表示该变量是否为数组。例如：

const array = [1, 2, 3];
const isArray = Array.isArray(array);
console.log(isArray); // 输出：true

3. Array.of()

Array.of()方法创建一个新的数组，其中包含指定元素。该方法接收一个或多个参数，并返回一个由这些参数组成的数组。例如：

const array = Array.of(1, 2, 3);
console.log(array); // 输出：[1, 2, 3]

4. Array.prototype.concat()

Array.prototype.concat()方法将两个或多个数组合并为一个新的数组。该方法接收一个或多个数组作为参数，并返回一个包含所有这些数组元素的新数组。例如：

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const newArray = array1.concat(array2);
console.log(newArray); // 输出：[1, 2, 3, 4, 5, 6]

5. Array.prototype.every()

Array.prototype.every()方法检查数组中的每个元素是否都满足指定的条件。该方法接收一个回调函数作为参数，该回调函数将对数组中的每个元素进行测试。如果回调函数对数组中的每个元素都返回true，则该方法返回true；否则，返回false。例如：

const array = [1, 2, 3, 4, 5];
const isEven = (element) => element % 2 === 0;
const allEven = array.every(isEven);
console.log(allEven); // 输出：false

6. Array.prototype.filter()

Array.prototype.filter()方法创建一个包含通过指定条件测试的所有元素的新数组。该方法接收一个回调函数作为参数，该回调函数将对数组中的每个元素进行测试。如果回调函数对数组中的某个元素返回true，则该元素将被包含在新数组中。例如：

const array = [1, 2, 3, 4, 5];
const evenNumbers = array.filter(isEven);
console.log(evenNumbers); // 输出：[2, 4]

7. Array.prototype.find()

Array.prototype.find()方法返回数组中第一个满足指定条件的元素。该方法接收一个回调函数作为参数，该回调函数将对数组中的每个元素进行测试。如果回调函数对数组中的某个元素返回true，则该元素将被返回。例如：

const array = [1, 2, 3, 4, 5];
const firstEvenNumber = array.find(isEven);
console.log(firstEvenNumber); // 输出：2

8. Array.prototype.findIndex()

Array.prototype.findIndex()方法返回数组中第一个满足指定条件的元素的索引。该方法接收一个回调函数作为参数，该回调函数将对数组中的每个元素进行测试。如果回调函数对数组中的某个元素返回true，则该元素的索引将被返回。例如：

const array = [1, 2, 3, 4, 5];
const firstEvenNumberIndex = array.findIndex(isEven);
console.log(firstEvenNumberIndex); // 输出：1

9. Array.prototype.forEach()

Array.prototype.forEach()方法对数组中的每个元素执行指定的回调函数。该方法接收一个回调函数作为参数，该回调函数将对数组中的每个元素进行调用。例如：

const array = [1, 2, 3, 4, 5];
array.forEach((element) => {
  console.log(element);
});

10. Array.prototype.includes()

Array.prototype.includes()方法检查数组中是否包含指定的元素。该方法接收一个元素作为参数，并返回一个布尔值，表示数组中是否包含该元素。例如：

const array = [1, 2, 3, 4, 5];
const isIncluded = array.includes(3);
console.log(isIncluded); // 输出：true

11. Array.prototype.indexOf()

Array.prototype.indexOf()方法返回数组中第一个与指定元素相等的元素的索引。该方法接收一个元素作为参数，并返回该元素的索引。如果数组中不包含该元素，则返回-1。例如：

const array = [1, 2, 3, 4, 5];
const indexOfThree = array.indexOf(3);
console.log(indexOfThree); // 输出：2

12. Array.prototype.join()

Array.prototype.join()方法将数组中的所有元素连接成一个字符串。该方法接收一个分隔符作为参数，并将该分隔符插入到数组元素之间。例如：

const array = [1, 2, 3, 4, 5];
const joinedString = array.join(',');
console.log(joinedString); // 输出：'1,2,3,4,5'

13. Array.prototype.lastIndexOf()

Array.prototype.lastIndexOf()方法返回数组中最后一个与指定元素相等的元素的索引。该方法接收一个元素作为参数，并返回该元素的索引。如果数组中不包含该元素，则返回-1。例如：

const array = [1, 2, 3, 4, 5, 3];
const lastIndexOfThree = array.lastIndexOf(3);
console.log(lastIndexOfThree); // 输出：5

14. Array.prototype.map()

Array.prototype.map()方法创建一个包含数组中每个元素的处理结果的新数组。该方法接收一个回调函数作为参数，该回调函数将对数组中的每个元素进行处理。例如：

const array = [1, 2, 3, 4, 5];
const doubledArray = array.map((element) => element * 2);
console.log(doubledArray); // 输出：[2, 4, 6, 8, 10]

15. Array.prototype.pop()

Array.prototype.pop()方法从数组的末尾删除最后一个元素并返回该元素。该方法不接收任何参数。例如：

const array = [1, 2, 3, 4, 5];
const poppedElement = array.pop();
console.log(array); // 输出：[1, 2, 3, 4]

16. Array.prototype.push()

Array.prototype.push()方法将一个或多个元素添加到数组的末尾并返回新数组的长度。该方法接收一个或多个元素作为参数。例如：

const array = [1, 2, 3, 4, 5];
const newLength = array.push(6, 7);
console.log(array); // 输出：[1, 2, 3, 4, 5, 6, 7]

总结

这16种数组方法是我们日常使用数组时需要经常用到的，熟练掌握这些方法可以极大提高我们的开发效率。