返回

掌握数组常用方法，轻松玩转编程！

前端

  1. 方法是否改变原数组

在学习数组常用方法之前，我们首先要了解一个重要概念：方法是否改变原数组 。

  • 不改变原数组的方法 ：这些方法不会对原数组中的数据进行修改，而是返回一个新的数组或一个新的值。例如，slice()、concat()、filter()、map()等方法都是不改变原数组的方法。
  • 改变原数组的方法 ：这些方法会直接修改原数组中的数据。例如，push()、pop()、shift()、unshift()、splice()等方法都是改变原数组的方法。

理解了方法是否改变原数组的概念后，我们在使用数组常用方法时就能够更加谨慎，避免对原数组造成不必要的修改。

2. 查找元素和索引

查找元素和索引是数组中最常用的操作之一。我们可以使用以下方法来查找元素和索引：

  • indexOf() ：该方法返回数组中某个元素的索引，如果元素不存在，则返回-1。例如：
const arr = [1, 2, 3, 4, 5];
const index = arr.indexOf(3); // 2
  • lastIndexOf() ：该方法返回数组中某个元素的最后一个索引，如果元素不存在，则返回-1。例如：
const arr = [1, 2, 3, 4, 5, 3];
const index = arr.lastIndexOf(3); // 5
  • includes() ：该方法检查数组是否包含某个元素，如果包含，则返回true，否则返回false。例如：
const arr = [1, 2, 3, 4, 5];
const result = arr.includes(3); // true

3. 遍历

遍历数组是另一个常用的操作。我们可以使用以下方法来遍历数组：

  • forEach() ：该方法对数组中的每个元素执行一次指定的函数。例如：
const arr = [1, 2, 3, 4, 5];
arr.forEach((element) => {
  console.log(element);
});
// 输出：
// 1
// 2
// 3
// 4
// 5
  • map() ：该方法对数组中的每个元素执行一次指定的函数，并返回一个新的数组，其中每个元素是函数的返回值。例如：
const arr = [1, 2, 3, 4, 5];
const newArr = arr.map((element) => {
  return element * 2;
});
console.log(newArr); // [2, 4, 6, 8, 10]
  • filter() ：该方法对数组中的每个元素执行一次指定的函数，并返回一个新的数组，其中每个元素是函数返回true的元素。例如：
const arr = [1, 2, 3, 4, 5];
const newArr = arr.filter((element) => {
  return element > 2;
});
console.log(newArr); // [3, 4, 5]

4. 插入与弹出

插入与弹出是数组中另一个常用的操作。我们可以使用以下方法来插入与弹出元素：

  • push() ：该方法将一个或多个元素添加到数组的末尾。例如：
const arr = [1, 2, 3];
arr.push(4, 5);
console.log(arr); // [1, 2, 3, 4, 5]
  • pop() ：该方法从数组的末尾删除最后一个元素并返回该元素。例如：
const arr = [1, 2, 3];
const lastElement = arr.pop();
console.log(lastElement); // 3
console.log(arr); // [1, 2]
  • shift() ：该方法从数组的开头删除第一个元素并返回该元素。例如：
const arr = [1, 2, 3];
const firstElement = arr.shift();
console.log(firstElement); // 1
console.log(arr); // [2, 3]
  • unshift() ：该方法将一个或多个元素添加到数组的开头。例如：
const arr = [1, 2, 3];
arr.unshift(0, 4);
console.log(arr); // [0, 4, 1, 2, 3]

5. 其他常用方法

除了上述方法外，数组还提供了许多其他常用方法，例如：

  • slice() ：该方法返回数组的一部分，从指定的开始索引到指定的结束索引（不包括结束索引）。例如：
const arr = [1, 2, 3, 4, 5];
const newArr = arr.slice(2, 4); // [3, 4]
  • concat() ：该方法将两个或多个数组连接成一个新的数组。例如：
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const newArr = arr1.concat(arr2); // [1, 2, 3, 4, 5, 6]
  • sort() ：该方法对数组中的元素进行排序。例如：
const arr = [1, 5, 3, 2, 4];
arr.sort(); // [1, 2, 3, 4, 5]
  • reverse() ：该方法将数组中的元素反转。例如：
const arr = [1, 2, 3, 4, 5];
arr.reverse(); // [5, 4, 3, 2, 1]
  • join() ：该方法将数组中的元素连接成一个字符串。例如：
const arr = [1, 2, 3, 4, 5];
const str = arr.join('-'); // "1-2-3-4-5"
  • toString() ：该方法将数组转换为一个字符串。例如：
const arr = [1, 2, 3, 4, 5];
const str = arr.toString(); // "1,2,3,4,5"

6. 常见问题

在使用数组常用方法时，我们经常会遇到一些常见的问题。以下是一些常见问题的解答：

  • 如何判断一个数组是否为空？

我们可以使用length属性来判断一个数组是否为空。如果length属性为0，则数组为空。例如：

const arr = [];
if (arr.length === 0) {
  console.log("数组为空");
}
  • 如何获取数组的长度？

我们可以使用length属性来获取数组的长度。例如：

const arr = [1, 2, 3, 4, 5];
const length = arr.length; // 5
  • 如何克隆一个数组？

我们可以使用slice()方法来克隆一个数组。例如：

const arr = [1, 2, 3, 4, 5];
const newArr = arr.slice(); // [1, 2, 3, 4, 5]
  • 如何删除数组中的重复元素？

我们可以使用Set()对象来删除数组中的重复元素。例如：

const arr = [1, 2, 3, 4, 5, 1, 2, 3];
const newArr = [...new Set(arr)]; // [1, 2, 3, 4, 5]