JavaScript 中的数组

JavaScript 中的数组最初可能会令人困惑且难以掌握，尤其是在处理高级概念时。我一开始也很难理解 JavaScript 中的数组。在本文中，我的目标是揭开 JavaScript 中数组的神秘面纱，分解您需要了解的所有内容，以便您可以自信地使用它们。

定义

什么是数组

数组是一种存储元素集合的数据结构，每个元素都可以通过索引访问。在许多编程语言中，数组将元素存储在连续的内存位置中。在 JavaScript 中，数组是高级的、类似列表的对象，用于在单个变量中存储多个值。它们是零索引的，这意味着第一个元素位于索引 0 处。

JavaScript 中的数组

由于 JavaScript 是一种动态类型语言，因此数组可以保存不同类型的元素。数组可以包含数字、字符串、布尔值、对象，甚至其他数组。这与 Java 或 C 等静态类型语言不同，在这些语言中，数组通常是同构的，并且必须包含相同数据类型的元素。

为什么使用数组？

数组允许您存储、访问和操作值，从而帮助有效管理数据。它们用于涉及列表或集合的任何内容，例如管理电子商务购物车中的商品或跟踪用户输入。

如何在 JavaScript 中创建数组

在 JavaScript 中创建数组的方法有多种，我将介绍其中的几种：

1.使用数组文字[]

在 JavaScript 中，您可以通过将 [] 分配给变量或常量来简单地创建数组

const numbers = [1, 2, 3];
const fruits = ["Apple", "Banana", "Orange"];

请注意，数组的元素之间用逗号分隔，

2. 使用数组构造函数

您还可以使用以下语法创建数组作为本机 JavaScript 数组构造函数的实例：
const myArray = new Array()
Array 构造函数接受一个或多个参数（它们必须是数字），并且根据您传入的参数数量，它的行为会有所不同！
如果您传递一个参数：const myArray = new Array(4)，这将创建一个包含 4 个空元素的新数组！

如果传递多个参数： const myArray = new Array(1, 2, 3)，这将创建一个分别由 3 个数字 1、2 和 3 组成的数组，与编写 const myArray = [1, 2 类似, 3]!

我知道这看起来很混乱，但相信我，如果你用它们做更多练习，这很容易！

3.使用Array.of方法

数组也可以使用此方法 Array.of 创建，它只会创建一个包含您作为参数传递给它的所有元素的数组。使用 Array.of 和 A​​rray 构造函数之间的区别在于它们在接收一个参数时的行为方式！

const array1 = Array.of(1); // This returns [1]
const array2 = Array.of(2, true, "hello"); // This returns [2, true, 'hello']

注意 Array.of 在接收一个参数时的行为，与仅创建一个包含 n 个空元素的数组的 Array 构造函数不同，Array.of 仅创建一个包含单个元素（即您传入的元素）的数组！

4.使用Array.from方法

您还可以使用 Array.from(iterable) 方法，该方法接收一个参数，该参数也必须是可迭代的，并从中创建一个数组！例如，您可以将一个集合传递给此方法，并根据该集合的值创建一个数组！

const mySet = new Set([2, 3, 4, 5, 5]);
const arrayFromSet = Array.from(mySet);

JavaScript 中的数组操作

我们已经了解了什么是数组以及如何在 JavaScript 中创建数组，现在您可能会问自己的剩余问题是，如何使用和处理数组？
嗯，这个问题问得好！

在 JavaScript 中使用数组的传统方式

传统上，我们使用循环来迭代存储在数组中的元素并使用它们！
以下示例显示如何循环数字数组并显示数组中每个数字的双精度数：

const numbers = [1, 2, 3, 4];
for (let i = 0; i 

  
  
  使用现代 JavaScript 数组方法语法


JavaScript 附带了许多开箱即用的数组方法（高阶函数），所有数组实例都可以通过 Array.prototype 对象访问它们，我们使用 JavaScript 提供的这些方法来操作和处理存储在数组中的数据！我们甚至可以创建自己的数组方法（我们将在下一章中讨论）

它们是高阶方法，因为它们将其他函数作为参数并使用这些函数来操作存储在数组中的数据！

那些数组方法也分为两类：


Mutating： 这些循环遍历数组，在应用回调函数时，它们还会改变原始数组！

Non-mutating： 这些迭代数组并应用回调函数，但它们不会改变原始数组，而是返回新数组

  
  
  1.forEach()方法


forEach() 是一个数组高阶方法，用于循环数组的元素并对每个元素应用回调函数，而无需修改原始数组或创建新数组！

回调函数的语法通常是匿名函数（通常在所有其他方法中都相同）：

function (currentElement[, index, targetArray]) {}




这意味着在每次迭代中，数组方法都可以访问迭代中的当前元素（currentElement），它是数组索引中的索引（可选），以及对正在其中执行该方法的目标数组的引用targetArray 也是可选的。但是你可以随意调用这些参数，你只需要注意它们的位置。


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




  
  
  2.map()方法


就像 forEach 映射一样，也是迭代数组元素并对每个元素应用回调函数的另一种方式，但与 forEach 映射不同的是，它是非变异方法，因此它创建并返回新数组迭代并且不改变原数组！

const numbers = [1, 2, 3, 4];
const squaredNumbers = numbers.map((element) => element * 2);
console.log(squaredNumbers);




  
  
  3.filter()方法


filter() 方法用于通过删除不需要的元素来过滤数组，这是非变异方法，它返回一个新数组！

对于每次迭代，filter() 内的回调必须返回一个布尔值，指示当前元素是否包含在新的过滤数组中

const numbers = [1, 2, 3, 4];
const evenNumbers = numbers.filter((element) => element % 2 === 0);
console.log(evenNumber); // [2, 4]




  
  
  4.reduce()方法


reduce() 方法与上面的有点不同。将其视为一种通过对每个元素逐一应用函数来将数组中的所有元素组合成单个值的方法。它从数组的所有元素返回一个值，当您想要从数组的所有元素获取单个值（例如总和、平均值、最大值或最小值等）时，您将使用它！

语法也不同

Array.reduce(函数(累加器, 元素[, 索引, targetArray]) [, 初始值])

该方法有两个参数，第一个参数是回调函数，就像其他方法一样，第二个参数是累加器变量的初始值。第二个参数是可选的，如果没有提供，则reduce将使用数组的第一个元素作为accumulator
的初始值

累加器保存每次迭代时回调函数返回的结果，迭代结束后将是reduce返回的最终结果！

让我们尝试从数字数组中求和：

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, element) => accumulator   element);
console.log(sum);




  
  
  4.slice()方法


slice() 是 JavaScript 中另一个有用的数组方法，用于提取数组的一小部分！ slice() 通过复制现有数组的一部分而不修改原始数组来创建新数组。

slice()方法的语法如下：

Array.slice(startIndex, endIndex) startIndex 表示提取的起点，包含在内；endIndex 表示提取的结束元素，可选且不包含。如果未提供，切片方法会将数组从 startIndex 复制到数组末尾！

const fruits = ["apple", "banana", "orange", "mango"];
const slicedFruits = fruits.slice(1, 3); // ['banana', 'orange']




  
  
  5. splice()方法


splice()是JavaScript中的数组方法，用于添加、删除和替换数组中的元素。 splice() 通过添加、删除或替换数组中的元素来更改数组的内容。

splice()方法的语法如下：

Array.splice(index, elementsToRemove, newElement1, newElement2, ..., newElementn)

这可能看起来令人困惑，但是，让我尝试解释一下：

index 表示数组中开始删除元素的索引，并且包含在内。

elementsToRemove 表示要从数组中删除的索引中的元素数量，如果只想添加新元素，可以在此位置提供 0。

newElement1、newElement2 等。这些可以是您想要在数组中添加的任意数量的元素，它们将替换您在数组中指定的 elementsToRemove 元素！

说了这么多，我们看一个例子：

const fruits = ["apple", "banana", "orange", "mango"];
// If we want to replace 'banana' with 'pineapple'
const splicedFruits = fruits.splice(1, 1, "pineapple"); // This will return ['apple', 'pineapple', 'orange', 'mango']




fruits.splice(1, 1, "pineapple") 这意味着从索引 1 开始，删除 1 个元素并添加 'pineapple'

如果我们只想在数组中添加菠萝而不用它替换其他值，我们可以将其写为

Fruits.splice(1, 0, "pineapple") 这会在索引1处的元素之后添加菠萝，并且不会从此数组中删除任何其他元素。


  
  
  结论


数组是 JavaScript 中的一项基本且多功能的功能，提供了存储和操作数据集合的基本结构。从使用文字的简单数组创建到 Array.of() 和 Array.from() 等更高级的方法，JavaScript 数组提供了一系列处理不同类型数据的方法。通过循环或现代方法（如 forEach()、map()、filter()、reduce()、slice() 和 splice() 掌握数组操作，您可以有效地执行复杂的操作。理解这些数组特性是精通 JavaScript 的关键，让您能够编写出更干净、更简洁、更强大的代码。