 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

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

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

About Author

註釋

標籤

这篇文章刊登在

Related Stories

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

Claude Sonnet 3.5 系统提示泄漏：法医分析

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

使用这 18 种开发工具来提高你的工作效率 🚀🔥

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

Claude Sonnet 3.5 系统提示泄漏：法医分析

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

使用这 18 种开发工具来提高你的工作效率 🚀🔥

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps