数组操作：理解 JavaScript 数组方法

JavaScript 中的数组是什么？ JavaScript 数组是可以存储元素集合的数据类型。这些元素可以是任何数据类型，包括数字、字符串和对象。 JavaScript 中的数组是动态的，这意味着您可以在创建数组后向其中添加或删除元素。

在本教程中，我们将研究所有 JavaScript 数组方法以及它们在实践中的应用方式。

数组方法的类型

有几种方法可以操作 JavaScript 数组。其中一些方法是：

1. 连接（）

此方法用于合并两个或多个数组。它不修改原始数组，而是返回一个包含原始数组元素的新数组。

以下是如何在 JavaScript 中使用 `concat()` 的示例：

 const array1 = [1, 2, 3]; const array2 = [4, 5, 6]; const array3 = [7, 8, 9]; const mergedArray = array1.concat(array2, array3); // mergedArray is [1, 2, 3, 4, 5, 6, 7, 8, 9]

在上面的示例中，array1、array2 和 array3 都合并到一个名为“mergedArray”的数组中。 `concat()` 接受任意数量的数组作为参数，并返回一个包含原始数组所有元素的新数组。

您还可以使用 `concat()` 将数组与非数组值合并。例如：

 const array1 = [1, 2, 3]; const mergedArray = array1.concat(4, 5, 6); // mergedArray is [1, 2, 3, 4, 5, 6]

在本例中，值 4、5 和 6 被添加到 array1 的末尾以创建“mergedArray”。

请注意，`concat()` 不会修改原始数组。相反，它会创建一个包含原始数组元素的新数组。如果要就地修改数组，可以改用 `push()` 方法。

2.加入（）

此方法用于将数组的所有元素连接成一个字符串。它采用可选的分隔符参数，该参数指定用于分隔结果字符串中数组元素的字符。如果未提供分隔符，则元素以逗号分隔。

以下是如何在 JavaScript 中使用 `join()` 的示例：

 const array = ['apple', 'banana', 'orange']; const fruitString = array.join(); // fruitString is 'apple,banana,orange' const array = [1, 2, 3]; const numberString = array.join('-'); // numberString is '1-2-3'

在第一个示例中，数组的元素以逗号作为分隔符连接成一个字符串。在第二个示例中，数组的元素被连接成一个字符串，使用连字符作为分隔符。

您还可以在数组数组上使用 `join()` 来创建嵌套数组的字符串：

 const array = [[1, 2], [3, 4], [5, 6]]; const nestedArrayString = array.join('-'); // nestedArrayString is '1,2-3,4-5,6'

请注意，`join()` 不会修改原始数组。它创建一个包含数组元素的新字符串。如果要就地修改数组，可以改用 `splice()` 方法。

3.弹出（）

此方法用于删除数组的最后一个元素并将其返回。它修改了原始数组。

以下是如何在 JavaScript 中使用 `pop()` 的示例：

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

在此示例中，`pop()` 方法从数组中删除最后一个元素 (5) 并将其分配给 `lastElement` 变量。然后修改数组以删除最后一个元素，使其长度为 4。

您还可以将 `pop()` 与其他数组方法结合使用，例如 `push()` 将元素添加到数组的末尾：

 const array = [1, 2, 3]; array.push(4); array.pop(); // array is [1, 2, 3]

在此示例中，`push()` 方法将元素 4 添加到数组末尾，然后 `pop()` 方法再次将其删除，保持数组不变。

请注意，如果数组为空，则 `pop()` 返回 undefined。

 const array = []; const element = array.pop(); // element is undefined

4.推()

此方法用于将一个或多个元素添加到数组的末尾。它修改原始数组并返回数组的新长度。

以下是如何在 JavaScript 中使用 push() 的示例：

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

在此示例中，push() 方法将元素 4、5 和 6 添加到数组的末尾并返回数组的新长度 (6)。然后修改数组以包含这些元素。

您还可以使用 push() 将一个元素数组添加到另一个数组的末尾：

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

在此示例中，push() 方法将数组 [4, 5, 6] 作为单个元素添加到数组末尾，并返回数组 (4) 的新长度。

请注意，push() 修改了原始数组。如果要创建一个包含原始数组元素的新数组，可以改用 concat() 方法。

5.转移（）

此方法用于删除数组的第一个元素并将其返回。它修改了原始数组。

以下是如何在 JavaScript 中使用 shift() 的示例：

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

在此示例中，shift() 方法从数组中删除第一个元素 (1) 并将其分配给 firstElement 变量。然后修改数组以删除第一个元素，使其长度为 4。

您还可以将 shift() 与其他数组方法结合使用，例如 unshift() 将元素添加到数组的开头：

 const array = [1, 2, 3]; array.unshift(0); array.shift(); // array is [1, 2, 3]

在此示例中，unshift() 方法将元素 0 添加到数组的开头，然后 shift() 方法再次将其删除，保持数组不变。

请注意，如果数组为空，shift() 将返回 undefined。

 const array = []; const element = array.shift(); // element is undefined

6.取消移位（）

此方法用于将一个或多个元素添加到数组的开头。它修改原始数组并返回数组的新长度。

以下是如何在 JavaScript 中使用 unshift() 的示例：

 const array = [1, 2, 3]; const newLength = array.unshift(4, 5, 6); // array is [4, 5, 6, 1, 2, 3] // newLength is 6

在此示例中，unshift() 方法将元素 4、5 和 6 添加到数组的开头并返回数组的新长度 (6)。然后修改数组以在开头包含这些元素。

您还可以使用 unshift() 将一个元素数组添加到另一个数组的开头：

 const array = [1, 2, 3]; const newLength = array.unshift([4, 5, 6]); // array is [[4, 5, 6], 1, 2, 3] // newLength is 4

在此示例中，unshift() 方法将数组 [4, 5, 6] 作为单个元素添加到数组的开头，并返回数组 (4) 的新长度。

请注意，unshift() 修改了原始数组。如果要创建一个包含原始数组元素的新数组，可以改用 concat() 方法。

7.切片（）

此方法用于提取数组的一部分并返回一个新数组。它不会修改原始数组。 slice 方法有两个可选参数：开始索引和结束索引。

如果未指定起始索引，则默认为数组的开头。如果未指定结束索引，则默认为数组的末尾。

下面是一个如何在 JavaScript 中使用 slice() 的例子：

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

在此示例中，slice() 方法从数组中提取索引 1 和 2（2 和 3）处的元素，并将它们返回到名为 slice 的新数组中。原始数组没有被修改。

您还可以将 slice() 与单个参数一起使用，该参数指示起始索引：

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

在这种情况下，slice() 方法提取数组中从索引 2（含）开始到数组末尾的所有元素。

您还可以将负索引与 slice() 一起使用，它指示元素相对于数组末尾的位置：

 const array = [1, 2, 3, 4, 5]; const slice = array.slice(-2); // slice is [4, 5] // array is [1, 2, 3, 4, 5] (unchanged)

在这种情况下，slice() 方法提取数组的最后两个元素。

请注意，如果开始索引大于结束索引，slice() 将返回一个空数组。

8.拼接()

JavaScript 中的 splice() 方法用于在数组中添加或删除元素，并将删除的元素作为新数组返回。它修改了原始数组。

splice() 方法至少有两个参数：起始索引和删除计数。起始索引是拼接开始的索引，删除计数是要删除的元素数。

以下是如何使用 splice() 从数组中删除元素的示例：

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

在此示例中，splice() 方法从数组中删除索引 1 和 2（2 和 3）处的元素，并将它们返回到名为 removedElements 的新数组中。修改原始数组以删除这些元素。

您还可以使用 splice() 将元素添加到数组：

 const array = [1, 2, 3]; const removedElements = array.splice(1, 0, 4, 5, 6); // removedElements is [] // array is [1, 4, 5, 6, 2, 3]

在本例中，splice() 方法将元素 4、5 和 6 添加到索引为 1 的数组中，删除计数为 0，因此没有删除任何元素。修改原始数组以包含这些元素。

您还可以使用 splice() 同时添加和删除元素：

 const array = [1, 2, 3, 4, 5]; const removedElements = array.splice(1, 2, 6, 7); // removedElements is [2, 3] // array is [1, 6, 7, 4, 5]

在此示例中， splice() 方法从数组中删除索引 1 和 2（2 和 3）处的元素，并在相同索引处添加元素 6 和 7。原始数组被修改为包含添加的元素并删除删除的元素。

请注意，如果起始索引大于数组的长度，则 splice() 不会添加或删除任何元素，而只是返回一个空数组。

9.反向（）

此方法用于反转数组中元素的顺序。它修改了原始数组。

以下是如何在 JavaScript 中使用 reverse() 的示例：

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

在此示例中，reverse() 方法反转数组中元素的顺序，以便第一个元素成为最后一个元素，最后一个元素成为第一个元素。

您还可以在对象数组上使用 reverse() ：

 const array = [{id: 1}, {id: 2}, {id: 3}]; array.reverse(); // array is [{id: 3}, {id: 2}, {id: 1}]

在这种情况下，reverse() 方法反转数组中对象的顺序。

请注意 reverse() 修改了原始数组。如果你想创建一个与原始数组相反的新数组，你可以同时使用 slice() 和 reverse() 方法：

 const array = [1, 2, 3, 4, 5]; const reversedArray = array.slice().reverse(); // reversedArray is [5, 4, 3, 2, 1] // array is [1, 2, 3, 4, 5] (unchanged)

在此示例中，slice() 方法创建数组的浅表副本，reverse() 方法反转副本中的元素，保持原始数组不变。

10.排序()

此方法用于对数组的元素进行就地排序。它可以将可选的比较函数作为参数，允许您指定自定义排序算法。如果未提供比较函数，则元素将根据其 Unicode 代码点按升序排序。

以下是如何在 JavaScript 中使用 sort() 的示例：

 const array = [5, 2, 4, 1, 3]; array.sort(); // array is [1, 2, 3, 4, 5]

在此示例中， sort() 方法按升序对数组的元素进行排序。

您还可以使用带有比较函数的 sort() 作为其参数来指定自定义排序顺序：

 const array = [{name: 'John'}, {name: 'Jane'}, {name: 'Bob'}]; array.sort((a, b) => a.name.localeCompare(b.name)); // array is [{name: 'Bob'}, {name: 'Jane'}, {name: 'John'}]

在这种情况下，sort() 方法使用 localeCompare() 方法根据对象的名称属性对数组中的对象进行排序。请注意， sort() 修改了原始数组。

同样默认情况下，sort() 将数组元素转换为字符串，并根据它们的 Unicode 点值对它们进行排序。对于非字符串值，这可能会导致意外结果。例如：

 const array = [10, 5, 8, 1, 7]; array.sort(); // array is [1, 10, 5, 7, 8]

在这种情况下， sort() 方法在对数字进行排序之前将其转换为字符串，因此生成的数组不是按数字顺序排列的。要按数字顺序对数组进行排序，可以使用比较函数作为 sort() 的参数：

 const array = [10, 5, 8, 1, 7]; array.sort((a, b) => a - b); // array is [1, 5, 7, 8, 10]

如果要按降序对数组的元素进行排序，可以使用以下比较函数作为 sort() 的参数：

 const array = [5, 2, 4, 1, 3]; array.sort((a, b) => b - a); // array is [5, 4, 3, 2, 1]

结论

这些只是可用于在 JavaScript 中处理数组的众多方法中的一小部分。我希望这有帮助！如果您有任何其他问题，请告诉我。