 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 中处理数组的众多方法中的一小部分。我希望这有帮助！如果您有任何其他问题，请告诉我。

Check out my portfolio

Hire Me

Read My Stories

Frontend Engineer and Technical writer

該音頻是用故事的原始語言製作的！

太長; 讀書

Make resilience your competitive advantage

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

About Author

註釋

標籤

这篇文章刊登在

Related Stories

Telegram：加密岛通往大陆的桥梁

如何将您的工作流程提高 10 倍：17 个必备应用程序

数字游民请注意：您需要了解泰国新推出的 DTV 签证

架构师指南：构建 AI/ML 数据湖参考架构

Telegram：加密岛通往大陆的桥梁

如何将您的工作流程提高 10 倍：17 个必备应用程序

数字游民请注意：您需要了解泰国新推出的 DTV 签证

架构师指南：构建 AI/ML 数据湖参考架构

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps