--- title: 数组 slug: Learn/JavaScript/First_steps/Arrays tags: - JavaScript - Join - Pop - Push - shift - split - unshift - 初学者 - 数组 translation_of: Learn/JavaScript/First_steps/Arrays ---
在本模块的最后一篇文章中, 我们将看看数组 —— 一种将一组数据存储在单个变量名下的优雅方式。 现在我们看看它有什么用,然后探索如何来创建一个数组,检索、添加和删除存储在数组中的元素,以及其他更多的功能。
前提: | 基本的电脑知识,对 HTML、CSS 语法有基础的理解,能理解什么是 JavaScript。 |
---|---|
目的: | 理解什么是数组,和如何在 JavaScript 中操作数组。 |
数组通常被描述为“像列表一样的对象”; 简单来说,数组是一个包含了多个值的对象。数组对象可以存储在变量中,并且能用和其他任何类型的值完全相同的方式处理,区别在于我们可以单独访问列表中的每个值,并使用列表执行一些有用和高效的操作,如循环 - 它对数组中的每个元素都执行相同的操作。 也许我们有一系列产品和价格存储在一个数组中,我们想循环遍历所有这些产品,并将它们打印在发票上,同时将所有产品的价格统计在一起,然后将总价格打印在底部。
如果我们没有数组,我们必须将每个产品存储在一个单独的变量中,然后调用打印的代码,并为每个产品单独添加。 花费的时间要长得多,效率很低,而且也容易出错。 如果我们有 10 个产品需要添加发票,那就只是有点麻烦而已,但是 100 个,或者 1000 个呢? 我们稍后将在文章中使用这个例子。
像以前的文章一样,我们通过在 JavaScript 控制台中输入一些示例来了解数组的基础知识。 我们在下面提供了一个(您也可以在单独的选项卡或窗口中打开此控制台,或者如果您愿意,请使用浏览器的开发者工具控制台)。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JavaScript console</title> <style> * { box-sizing: border-box; } html { background-color: #0C323D; color: #809089; font-family: monospace; } body { max-width: 700px; } p { margin: 0; width: 1%; padding: 0 1%; font-size: 16px; line-height: 1.5; float: left; } .input p { margin-right: 1%; } .output p { width: 100%; } .input input { width: 96%; float: left; border: none; font-size: 16px; line-height: 1.5; font-family: monospace; padding: 0; background: #0C323D; color: #809089; } div { clear: both; } </style> </head> <body> </body> <script> var geval = eval; function createInput() { var inputDiv = document.createElement('div'); var inputPara = document.createElement('p'); var inputForm = document.createElement('input'); inputDiv.setAttribute('class','input'); inputPara.textContent = '>'; inputDiv.appendChild(inputPara); inputDiv.appendChild(inputForm); document.body.appendChild(inputDiv); if(document.querySelectorAll('div').length > 1) { inputForm.focus(); } inputForm.addEventListener('change', executeCode); } function executeCode(e) { try { var result = geval(e.target.value); } catch(e) { var result = 'error — ' + e.message; } var outputDiv = document.createElement('div'); var outputPara = document.createElement('p'); outputDiv.setAttribute('class','output'); outputPara.textContent = 'Result: ' + result; outputDiv.appendChild(outputPara); document.body.appendChild(outputDiv); e.target.disabled = true; e.target.parentNode.style.opacity = '0.5'; createInput() } createInput(); </script> </html>
{{ EmbedLiveSample('Hidden_code', '100%', 300) }}
数组由方括号构成,其中包含用逗号分隔的元素列表。
let shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles']; shopping;
let sequence = [1, 1, 2, 3, 5, 8, 13]; let random = ['tree', 795, [0, 1, 2]];
然后,您可以使用括号表示法访问数组中的元素,与 检索特定字符串字符 的方法相同。
shopping[0]; // returns "bread"
shopping[0] = 'tahini'; shopping; // shopping will now return [ "tahini", "milk", "cheese", "hummus", "noodles" ]
请注意,数组中包含数组的话称之为多维数组。 您可以通过将两组方括号链接在一起来访问数组内的另一个数组。 例如,要访问数组内部的一个项目,即 random
数组中的第三个项目(参见上一节),我们可以这样做:
random[2][2];
你可以通过使用 {{jsxref("Array.prototype.length","length")}} 属性获取数组的长度(数组中有多少项元素),这与查找字符串的长度(以字符为单位)完全相同 。 尝试以下代码:
sequence.length; // should return 7
虽然 length 属性也有其他用途,但最常用于循环(循环遍历数组中的所有项)。 例如:
let sequence = [1, 1, 2, 3, 5, 8, 13]; for (let i = 0; i < sequence.length; i++) { console.log(sequence[i]); }
您将在以后的文章中正确地了解循环,但简而言之,这段代码的意思是:
在本节中,我们将介绍一些相当有用的数组方法,这些方法允许我们将字符串拆分为字符串数组,反之亦然,以及添加或删除元素。
通常,您会看到一个包含在一个长长的字符串中的原始数据,您可能希望将有用的项目分成更有用的表单,然后对它们进行处理,例如将它们显示在数据表中。 为此,我们可以使用 {{jsxref("String.prototype.split()","split()")}} 方法。 在其最简单的形式中,这需要一个参数,您要将字符串分隔的字符,并返回分隔符之间的子串,作为数组中的项。
Note: 好吧,从技术上讲,这是一个字符串方法,而不是一个数组方法,但是我们把它放在数组中,因为它在这里很合适。
let myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';
let myArray = myData.split(','); myArray;
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
let myNewString = myArray.join(','); myNewString;
toString()
可以比 join()
更简单,因为它不需要一个参数,但更有限制。 使用 join()
可以指定不同的分隔符(尝试使用与逗号不同的字符运行步骤4)。
let dogNames = ["Rocket","Flash","Bella","Slugger"]; dogNames.toString(); //Rocket,Flash,Bella,Slugger
我们还没有涵盖添加和删除数组元素,现在让我们来看看。 我们将使用在上一节中最后提到的 myArray
数组。 如果您尚未遵循该部分,请先在控制台中创建数组:
let myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];
首先,要在数组末尾添加或删除一个项目,我们可以使用 {{jsxref("Array.prototype.push()","push()")}} 和 {{jsxref("Array.prototype.pop()","pop()")}}。
push()
—— 注意,你需要添加一个或多个要添加到数组末尾的元素。 尝试下面的代码:
myArray.push('Cardiff'); myArray; myArray.push('Bradford', 'Brighton'); myArray;
var newLength = myArray.push('Bristol'); myArray; newLength;
pop()
就可以。 例如:
myArray.pop();
let removedItem = myArray.pop(); myArray; removedItem;
{{jsxref("Array.prototype.unshift()","unshift()")}} 和 {{jsxref("Array.prototype.shift()","shift()")}} 从功能上与 {{jsxref("Array.prototype.push()","push()")}} 和 {{jsxref("Array.prototype.pop()","pop()")}} 完全相同,只是它们分别作用于数组的开始,而不是结尾。
unshift()
——尝试一下这个命令:
myArray.unshift('Edinburgh'); myArray;
shift()
—— 尝试一下!
let removedItem = myArray.shift(); myArray; removedItem;
我们回到前面描述的例子 —— 打印出发票上的产品名称和价格,然后计算总价格并将其印在底部。 在下面的可编辑示例中,包含数字的注释 —— 每个注释标记都是您必须向代码添加内容的地方。 它们如下:
// number 1
注释下面是一些字符串,每个字符串包含一个产品名称和一个冒号分隔的价格。 我们希望您将其转换为一个数组,并将其存储在名为 products
的数组中。// number 2
注释同一行的是 for 循环的开头。 在这行中,我们目前有 i <= 0
,这是一个条件测试,导致 for循环 立即停止,因为它说“当 i
不再小于或等于0”时停止,而 i
从0开始。 我们希望您使用条件测试来替换它,当 i
不再小于 products
数组的长度时,该条件测试会停止循环。// number 3
注释的下方,我们希望您编写一行代码,将当前数组项目(名称:价格)分成两个独立的项目,一个只包含该名称,一个只包含该价格。 如果您不确定如何执行此操作,请参阅有用的字符串方法文章以获得一些帮助,甚至更好的看看本文中的字符串和数组之间的转换部分。total
的变量被创建,并在代码的顶部赋值为 0。 在循环内(在 // number 4
注释下面),我们希望您添加一行,将当前项目价格添加到循环中的迭代变量,以便在代码结尾处将正确的总数打印到发票上。 您可能需要一个赋值运算符来执行此操作。// number 5
注释的行,以便使 itemText
变量等于“当前项目名称 - $ 当前项目价格”,例如“Shoes - $ 23.99”,以此将每个项目的正确信息都印在发票上。 这只是简单的字符串连接,您应该对此很熟悉。<div class="output" style="min-height: 150px;"> <ul> </ul> <p></p> </div> <textarea id="code" class="playable-code" style="height: 370px;"> var list = document.querySelector('.output ul'); var totalBox = document.querySelector('.output p'); var total = 0; list.innerHTML = ''; totalBox.textContent = ''; // number 1 'Underpants:6.99' 'Socks:5.99' 'T-shirt:14.99' 'Trousers:31.99' 'Shoes:23.99'; for (var i = 0; i <= 0; i++) { // number 2 // number 3 // number 4 // number 5 itemText = 0; var listItem = document.createElement('li'); listItem.textContent = itemText; list.appendChild(listItem); } totalBox.textContent = 'Total: $' + total.toFixed(2); </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="Reset"> <input id="solution" type="button" value="Show solution"> </div>
var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var code = textarea.value; function updateCode() { eval(textarea.value); } reset.addEventListener('click', function() { textarea.value = code; updateCode(); }); solution.addEventListener('click', function() { textarea.value = jsSolution; updateCode(); }); var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar totalBox = document.querySelector(\'.output p\');\nvar total = 0;\nlist.innerHTML = \'\';\ntotalBox.textContent = \'\';\n\nvar products = [\'Underpants:6.99\',\n \'Socks:5.99\',\n \'T-shirt:14.99\',\n \'Trousers:31.99\',\n \'Shoes:23.99\'];\n\nfor(var i = 0; i < products.length; i++) {\n var subArray = products[i].split(\':\');\n var name = subArray[0];\n var price = Number(subArray[1]);\n total += price;\n itemText = name + \' — $\' + price;\n\n var listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n}\n\ntotalBox.textContent = \'Total: $\' + total.toFixed(2);'; textarea.addEventListener('input', updateCode); window.addEventListener('load', updateCode);
{{ EmbedLiveSample('Playable_code', '100%', 600) }}
当您在 Web 程序中维护当前活动元素的记录时,{{jsxref("Array.prototype.push()","push()")}} 和 {{jsxref("Array.prototype.pop()","pop()")}} 是不错的方法。 例如,在动画场景中,您可能会有一系列表示当前显示的背景图像的对象,并且由于性能或混乱原因,您可能只需要一次显示 50 个。 当创建新对象并将其添加到数组中时,可以从数组中删除较旧的对象以保持所需的数量。
在这个例子中,我们将展示一种更简单的使用方法 - 在这里我们给你一个假的搜索网站,一个搜索框。 这个想法是,当在搜索框中输入时,列表中会显示5个先前的搜索字词。 当列表项目数量超过 5 时,每当新项目被添加到顶部时,最后一个项目开始被删除,因此总是显示5个以前的搜索字词。
Note: 在真正的搜索应用中,您可能可以点击先前的搜索字词返回上一次搜索,并显示实际的搜索结果! 我们现在只是保持简单的逻辑。
要完成该应用程序,我们需要您:
//number 1
注释下面添加一行,将输入到搜索框中的当前值添加到数组的开头。 这可以使用 searchInput.value
检索。// number 2
注释下方添加一行,该行删除数组末尾的当前值。<div class="output" style="min-height: 150px;"> <input type="text"><button>Search</button> <ul> </ul> </div> <textarea id="code" class="playable-code" style="height: 370px;"> var list = document.querySelector('.output ul'); var searchInput = document.querySelector('.output input'); var searchBtn = document.querySelector('.output button'); list.innerHTML = ''; var myHistory = []; searchBtn.onclick = function() { // 如果搜索框不为空,我们则将搜索词添加到开头 if (searchInput.value !== '') { // number 1 // 清空显示的搜索关键词列表,防止显示 // 每次输入搜索词都会重新生成显示的内容 list.innerHTML = ''; // 通过循环遍历,显示所有的搜索关键词 for (var i = 0; i < myHistory.length; i++) { var itemText = myHistory[i]; var listItem = document.createElement('li'); listItem.textContent = itemText; list.appendChild(listItem); } // 如果数组的长度大于 5,那么便移除旧的搜索关键词 if (myHistory.length >= 5) { // number 2 } // 清空并聚焦到搜索框,准备下一次的搜索 searchInput.value = ''; searchInput.focus(); } } </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="Reset"> <input id="solution" type="button" value="Show solution"> </div>
var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var code = textarea.value; function updateCode() { eval(textarea.value); } reset.addEventListener('click', function() { textarea.value = code; updateCode(); }); solution.addEventListener('click', function() { textarea.value = jsSolution; updateCode(); }); var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar searchInput = document.querySelector(\'.output input\');\nvar searchBtn = document.querySelector(\'.output button\');\n\nlist.innerHTML = \'\';\n\nvar myHistory= [];\n\nsearchBtn.onclick = function() {\n if(searchInput.value !== \'\') {\n myHistory.unshift(searchInput.value);\n\n list.innerHTML = \'\';\n\n for(var i = 0; i < myHistory.length; i++) {\n var itemText = myHistory[i];\n var listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n }\n\n if(myHistory.length >= 5) {\n myHistory.pop();\n }\n\n searchInput.value = \'\';\n searchInput.focus();\n }\n}'; textarea.addEventListener('input', updateCode); window.addEventListener('load', updateCode);
{{ EmbedLiveSample('Playable_code_2', '100%', 600) }}
阅读本文后,我们相信您会明白数组是很有用的; 你会看到它们在 JavaScript 中随处可见,通常与循环相关,以便对数组中的每个元素做同样的事情。 我们将教你所有有用的基础知识,了解下一个模块中的循环,但现在你应该给自己鼓掌,并稍加休息; 您已经完成了本单元中的所有文章!
唯一需要做的就是通过这个模块的评估,这将测试你对之前的文章的理解。
{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}