JavaScript console

--- title: 数组 site: 星湖の小窝 category: 前端 tags: [JavaScript, 数组] date: 2026-10-09 updated: 2026-10-09 id: mdn-0e67d4b0 --- # 数组 ## 数组是什么？数组通常被描述为“像列表一样的对象”; 简单来说，数组是一个包含了多个值的对象。数组对象可以存储在变量中，并且能用和其他任何类型的值完全相同的方式处理，区别在于我们可以单独访问列表中的每个值，并使用列表执行一些有用和高效的操作，如循环 - 它对数组中的每个元素都执行相同的操作。也许我们有一系列产品和价格存储在一个数组中，我们想循环遍历所有这些产品，并将它们打印在发票上，同时将所有产品的价格统计在一起，然后将总价格打印在底部。如果我们没有数组，我们必须将每个产品存储在一个单独的变量中，然后调用打印的代码，并为每个产品单独添加。花费的时间要长得多，效率很低，而且也容易出错。如果我们有 10 个产品需要添加发票，那就只是有点麻烦而已，但是 100 个，或者 1000 个呢？我们稍后将在文章中使用这个例子。像以前的文章一样，我们通过在 JavaScript 控制台中输入一些示例来了解数组的基础知识。我们在下面提供了一个（你也可以在单独的选项卡或窗口中打开此控制台，或者如果你愿意，请使用[浏览器的开发者工具控制台](https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools)）。 ``` JavaScript console ``` ### 创建数组数组由方括号构成，其中包含用逗号分隔的元素列表。 1. 假设我们想在一个数组中存储一个购物清单 - 我们会做一些像下面这样的事情。在你的控制台中输入以下行： js``` let shopping = ["bread", "milk", "cheese", "hummus", "noodles"]; shopping; ``` 2. 在这种情况下，数组中的每个项目都是一个字符串，但请记住，你可以将任何类型的元素存储在数组中 - 字符串，数字，对象，另一个变量，甚至另一个数组。你也可以混合和匹配项目类型 - 它们并不都是数字，字符串等。尝试下面这些： js``` let sequence = [1, 1, 2, 3, 5, 8, 13]; let random = ["tree", 795, [0, 1, 2]]; ``` 3. 尝试创建你自己的几个数组，然后再继续往下看。 ### 访问和修改数组元素然后，你可以使用括号表示法访问数组中的元素，与 [检索特定字符串字符](https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Scripting/Useful_string_methods#%E6%A3%80%E7%B4%A2%E7%89%B9%E5%AE%9A%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%AD%97%E7%AC%A6) 的方法相同。 1. 在你的控制台中输入以下内容： js``` shopping[0]; // returns "bread" ``` 2. 你还可以简单地为单个数组元素提供新值来修改数组中的元素。例如： js``` shopping[0] = "tahini"; shopping; // shopping will now return [ "tahini", "milk", "cheese", "hummus", "noodles" ] ``` **备注：**我们以前说过，但还是提醒一下——电脑从 0 开始计数！ 3. 请注意，数组中包含数组的话称之为多维数组。你可以通过将两组方括号链接在一起来访问数组内的另一个数组。例如，要访问数组内部的一个项目，即 `random` 数组中的第三个项目（参见上一节），我们可以这样做： js``` random[2][2]; ``` 4. 在继续之前，尝试对你的数组示例进行一些修改。玩一玩，看看哪些有效，哪些无效。 ### 获取数组长度你可以通过使用 [`length`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/length) 属性获取数组的长度（数组中有多少项元素），这与查找字符串的长度（以字符为单位）完全相同。尝试以下代码： js``` sequence.length; // should return 7 ``` 虽然 length 属性也有其他用途，但最常用于循环（循环遍历数组中的所有项）。例如： js``` let sequence = [1, 1, 2, 3, 5, 8, 13]; for (let i = 0; i < sequence.length; i++) { console.log(sequence[i]); } ``` 你将在以后的文章中正确地了解循环，但简而言之，这段代码的意思是： 1. 在数组中的元素编号 0 开始循环。 2. 在元素编号等于数组长度的时候停止循环。这适用于任何长度的数组，但在这种情况下，它将在编号 7 的时候终止循环（这很好，因为我们希望最后一位元素的编号是 6）。 3. 对于每个元素，使用 [console.log()](https://developer.mozilla.org/zh-CN/docs/Web/API/console/log_static) 将其打印到浏览器控制台。 ## 一些有用的数组方法在本节中，我们将介绍一些相当有用的数组方法，这些方法允许我们将字符串拆分为字符串数组，反之亦然，以及添加或删除元素。 ### 字符串和数组之间的转换通常，你会看到一个包含在一个长长的字符串中的原始数据，你可能希望将有用的项目分成更有用的表单，然后对它们进行处理，例如将它们显示在数据表中。为此，我们可以使用 [`split()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/split) 方法。在其最简单的形式中，这需要一个参数，你要将字符串分隔的字符，并返回分隔符之间的子串，作为数组中的项。 **备注：**好吧，从技术上讲，这是一个字符串方法，而不是一个数组方法，但是我们把它放在数组中，因为它在这里很合适。 1. 我们来玩一下这个方法，看看它是如何工作的。首先，在控制台中创建一个字符串： js``` let myData = "Manchester,London,Liverpool,Birmingham,Leeds,Carlisle"; ``` 2. 现在我们用每个逗号分隔它： js``` let myArray = myData.split(","); myArray; ``` 3. 最后，尝试找到新数组的长度，并从中检索一些项目： js``` myArray.length; myArray[0]; // the first item in the array myArray[1]; // the second item in the array myArray[myArray.length - 1]; // the last item in the array ``` 4. 你也可以使用 [`join()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/join) 方法进行相反的操作。尝试以下： js``` let myNewString = myArray.join(","); myNewString; ``` 5. 将数组转换为字符串的另一种方法是使用 [`toString()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/toString) 方法。 `toString()` 可以比 `join()` 更简单，因为它不需要一个参数，但更有限制。使用 `join()` 可以指定不同的分隔符（尝试使用与逗号不同的字符运行步骤 4）。 js``` let dogNames = ["Rocket", "Flash", "Bella", "Slugger"]; dogNames.toString(); //Rocket,Flash,Bella,Slugger ``` ### 添加和删除数组项我们还没有涵盖添加和删除数组元素，现在让我们来看看。我们将使用在上一节中最后提到的 `myArray` 数组。如果你尚未遵循该部分，请先在控制台中创建数组： js``` let myArray = [ "Manchester", "London", "Liverpool", "Birmingham", "Leeds", "Carlisle", ]; ``` 首先，要在数组末尾添加或删除一个项目，我们可以使用 [`push()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/push) 和 [`pop()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/pop)。 1. 让我们先使用 `push()`——注意，你需要添加一个或多个要添加到数组末尾的元素。尝试下面的代码： js``` myArray.push("Cardiff"); myArray; myArray.push("Bradford", "Brighton"); myArray; ``` 2. 当方法调用完成时，将返回数组的新长度。如果要将新数组长度存储在变量中。例如： js``` var newLength = myArray.push("Bristol"); myArray; newLength; ``` 3. 从数组中删除最后一个元素的话直接使用 `pop()` 就可以。例如： js``` myArray.pop(); ``` 4. 当方法调用完成时，将返回已删除的项目。你也可以这样做： js``` let removedItem = myArray.pop(); myArray; removedItem; ``` [`unshift()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift) 和 [`shift()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/shift) 从功能上与 [`push()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/push) 和 [`pop()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/pop) 完全相同，只是它们分别作用于数组的开始，而不是结尾。 1. 首先 `unshift()`——尝试一下这个命令： js``` myArray.unshift("Edinburgh"); myArray; ``` 2. 现在 `shift()`——尝试一下！ js``` let removedItem = myArray.shift(); myArray; removedItem; ``` ## 积极学习：打印这些产品我们回到前面描述的例子——打印出发票上的产品名称和价格，然后计算总价格并将其印在底部。在下面的可编辑示例中，包含数字的注释——每个注释标记都是你必须向代码添加内容的地方。它们如下： 1. 在 `// number 1` 注释下面是一些字符串，每个字符串包含一个产品名称和一个冒号分隔的价格。我们希望你将其转换为一个数组，并将其存储在名为 `products` 的数组中。 2. 与 `// number 2` 注释同一行的是 for 循环的开头。在这行中，我们目前有 `i