数组

数组

数组很有用，因为它可以将多个值存储到一个有条理的数据结构中。定义新数组的方法是列出各个值，并用逗号分隔，然后放在方括号 [] 里。

// creates a `donuts` array with three stringsvar donuts = ["glazed", "powdered", "jelly"];

但是字符串并不是唯一可以存储在数组中的数据类型。你还可以存储数字、布尔值等等，任何类型都可以！

// creates a `mixedData` array with mixed data typesvar mixedData = ["abcd", 1, true, undefined, null, "all the things"];

你甚至可以在数组中存储数组，创建嵌套数组！

// creates a `arraysInArrays` array with three arraysvar arraysInArrays = [[1, 2, 3], ["Julia", "James"], [true, false, true, false]];

嵌套数组难以读懂，所以经常写成一行，在每个逗号后面加个换行符：

var arraysInArrays = [  [1, 2, 3],   ["Julia", "James"],   [true, false, true, false]];

在这节课的稍后部分，我们将查看一些嵌套数组非常有用的情形。

数组索引

索引

注意：数组中的元素是从位置 0 处开始计算索引编号的。要访问数组中的元素，使用数组的名称，后面是花括号，其中包含你要访问的值对应的索引。

var donuts = ["glazed", "powdered", "sprinkled"];console.log(donuts[0]); // "glazed" is the first element in the `donuts` array

输出结果： "glazed"

要注意的一点是，如果你想访问不存在的索引处的元素，系统将返回 undefined。

console.log(donuts[3]); // the fourth element in `donuts` array does not exist!

输出：undefined

避免访问数组之外的元素。如果你尝试这么做，缺失的元素将返回为 undefined！

习题 1/2

看看下面的 donuts 数组。

var donuts = ["glazed", "chocolate frosted", "Boston cream", "powdered", "sprinkled", "maple", "coconut", "jelly"];

你会使用哪行代码从 donuts 数组中选择"coconut"甜甜圈？

• donuts[0]

• donuts[4]

• donuts[6]

• donuts[7]

SUBMIT

最后，如果你想更改数组中某个元素的值，可以将其设为等于一个新的值。

donuts[1] = "glazed cruller"; // changes the second element in the `donuts` array to "glazed cruller"console.log(donuts[1]);

输出结果："glazed cruller"

通过将某个元素设为等于一个新的值，更改元素的值。

习题 2/2

我们决定替换 donuts 数组中的某些甜甜圈。

var donuts = ["glazed", "chocolate frosted", "boston cream", "powdered", "sprinkled", "maple", "coconut", "jelly"];donuts[2] = "cinnamon twist";donuts[4] = "salted caramel";donuts[5] = "shortcake eclair";

做出以下更改后，donuts 数组看起来是怎样的？

• ["glazed", "chocolate frosted", "cinnamon twist", "salted caramel", "shortcake eclair", "maple", "coconut", "jelly"]

• ["glazed", "cinnamon twist", "boston cream", "salted caramel", "shortcake eclair", "maple", "coconut", "jelly"]

• ["glazed", "chocolate frosted", "cinnamon twist", "powdered", "salted caramel", "shortcake eclair", "coconut", "jelly"]

• ["glazed", "cinnamon twist", "boston cream", "powdered", "salted caramel", "shortcake eclair", "coconut", "jelly"]

• 
  

练习：UdaciFamily (6-1

说明：

创建一个叫做 udaciFamily 的数组，并向数组中添加 "Julia"、"James" 和你的名字。然后使用console.log 向控制台中输出 udaciFamily。

你的代码：

1

2

3

4

5

6

/*

* Programming Quiz: UdaciFamily (6-1)

*/

// your code goes here

练习：构建船员 (6-2

Firefly（萤火虫） 是一部以西部为背景的太空科幻片，于 2002 年 9 月 20 号在美国首播。虽然该电视剧只有 14 集，第一季就遭停播，但是如今依然很受欢迎，粉丝群不断增长。讲述了 Mal（由 Nathan Fillion扮演）带领一群异议分子驾驶一艘太空船“宁静号”在宇宙中冒险的故事。

说明：

创建一个叫做 crew 的数组来表示“宁静号”的船员，并将其设为等于以下变量。你不需要输出实际的字符串，直接使用提供的变量。

var captain = "Mal";var second = "Zoe";var pilot = "Wash";var companion = "Inara";var mercenary = "Jayne";var mechanic = "Kaylee";

然后，将数组 crew 输出到控制台中。

练习：价格正确 (6-3)

说明：

从这个 prices 数组开始，更改数组中第 1 个、第 3 个和第 7 个元素的价格。

var prices = [1.23, 48.11, 90.11, 8.50, 9.99, 1.00, 1.10, 67.00];

提示：任何数组的第 1 个元素的索引是 0。

然后，向控制台中输出 prices 数组。

你的代码：

1

2

3

4

5

6

7

8

/*

* Programming Quiz: The Price is Right (6-3)

*/

varprices = [1.23,48.11,90.11,8.50,9.99,1.00,1.10,67.00];

// your code goes here

提示：JavaScript 提供了大量用于修改数组和访问数组中的值的内置方法，请参阅 MDN 文档或在 JavaScript 控制台中输入 [] 查看所有可用的数组方法列表。

长度

Array.length

你可以通过使用 length 属性了解数组的长度。

var donuts = ["glazed", "powdered", "sprinkled"];console.log(donuts.length);

输出结果：3

要访问 length 属性，输入数组名称，然后输入 .（你还将使用“.”访问其他属性和方法），接着输入单词length。length 属性然后将返回数组中的元素个数。

提示：字符串也具有 length 属性！你可以使用该属性来了解任何字符串的长度。例如，"supercalifragilisticexpialidocious".length 返回 34。

练习题

以下 inventory 数组的长度是多少？

var inventory = [  ["gold pieces", 25],  ["belt", 4],  ["ring", 1],  ["shoes", 2]];

• 1

• 4

• 8

• 32

• 
  

Push

你知道如何计算数组的长度了，那么如果想修改数组呢？

幸运的是，数组具有一个内置的方法可以用于向数组中添加元素和移除其中的元素。修改数组最常见的两个方法是 push() 和 pop()。

Push

你可以使用 push() 方法向数组的末尾处添加元素。

例如，假设有这些甜甜圈。

一堆甜甜圈，真美味！

你可以用数组来表示一堆甜甜圈。

var donuts = ["glazed", "chocolate frosted", "Boston creme", "glazed cruller", "cinnamon sugar", "sprinkled"];

然后，你可以使用 push() 方法将甜甜圈添加到数组的末尾。

donuts.push("powdered"); // pushes "powdered" onto the end of the `donuts` array

返回：7
donuts 数组：["glazed", "chocolate frosted", "Boston creme", "glazed cruller", "cinnamon sugar", "sprinkled", "powdered"]

使用 push() 方法将元素添加到数组的末尾处。

注意，对于 push() 方法，你需要传递要添加到数组末尾处的元素的值。此外，push() 方法在添加元素后返回数组的长度。

var donuts = ["glazed", "chocolate frosted", "Boston creme", "glazed cruller", "cinnamon sugar", "sprinkled"];donuts.push("powdered"); // `push()` 方法返回 7，因为 `donuts` 数组现在有 7 个元素了

返回： 7

Pop

Pop

此外，你可以使用 pop() 方法删除数组末尾的元素。

var donuts = ["glazed", "chocolate frosted", "Boston creme", "glazed cruller", "cinnamon sugar", "sprinkled", "powdered"];donuts.pop(); // pops "powdered" off the end of the `donuts` arraydonuts.pop(); // pops "sprinkled" off the end of the `donuts` arraydonuts.pop(); // pops "cinnamon sugar" off the end of the `donuts` array

返回： "cinnamon sugar"
donuts 数组：["glazed", "chocolate frosted", "Boston creme", "glazed cruller"]

使用 pop() 方法删除数组末尾的元素。

对于 pop() 方法，你不需要传递值；相反，pop() 将始终删除数组末尾的最后一个元素。此外，pop()会返回你已经删除的元素，以防你需要使用该元素。

var donuts = ["glazed", "chocolate frosted", "Boston creme", "glazed cruller", "cinnamon sugar", "sprinkled", "powdered"];donuts.pop(); // the `pop()` method returns "powdered" because "powdered" was the last element on the end of `donuts` array

返回："powdered"

练习题

我们决定替换 donuts 数组中的某些甜甜圈。

var donuts = ["glazed", "strawberry frosted", "powdered", "Boston creme"];donuts.pop();donuts.pop();donuts.pop();donuts.push("maple walnut");donuts.pop();donuts.push("sprinkled");

做出以下更改后，donuts 数组是怎样的？

• ["sprinkled", "Boston Creme"]

• ["glazed", "sprinkled"]

• ["maple walnut", "sprinkled"]

• ["sprinkled", "maple walnut"]

• 
  

Splice

Splice

splice() 是另一个很有用的方法，可以让你向数组的任意位置添加元素和移除任意位置的元素。

虽然 push() 和 pop() 只能向数组的末尾添加元素和移除末尾的元素，splice() 可以指定索引位置以添加新的元素，以及指定要删除的元素数量（如果有）。

var donuts = ["glazed", "chocolate frosted", "Boston creme", "glazed cruller"];donuts.splice(1, 1, "chocolate cruller", "creme de leche"); // removes "chocolate frosted" at index 1 and adds "chocolate cruller" and "creme de leche" starting at index 1

返回："chocolate frosted"
donuts 数组：["glazed", "chocolate cruller", "creme de leche", "Boston creme", "glazed cruller"]

第一个参数表示你要从哪个索引开始更改数组，第二个参数表示你要删除的元素数量，剩下的参数表示你要添加的元素。

使用 splice() 方法向数组的任意位置添加元素和删除任意位置的元素。

splice() 是非常强大的方法，使你能够以多种方式操纵数组。用一行代码就能完成各种添加或删除元素的操作。

请参阅 MDN 文档查看多个示例代码段列表，了解 splice() 的强大之处，然后试着解答下一组编程练习。

练习题

我们决定替换 donuts 数组中的某些甜甜圈。

var donuts = ["cookies", "cinnamon sugar", "creme de leche"];donuts.splice(-2, 0, "chocolate frosted", "glazed");

做出以下更改后，donuts 数组看起来是怎样的？

• ["cookies", "chocolate frosted", "glazed", "cinnamon sugar", "creme de leche"]

• ["chocolate frosted", "glazed", "cookies", "cinnamon sugar", "creme de leche"]

• ["chocolate frosted", "glazed"]

• ["cookies", "cinnamon sugar", "creme de leche", "chocolate frosted", "glazed"]

• 
  

练习：彩虹的颜色 (6-4)

说明：

James 创建了一个包含彩虹颜色的数组，但是他忘记了某些颜色。标准彩虹颜色通常按以下顺序列出：

var rainbow = ["Red", "Orange", "Yellow", "Green", "Blue", "Purple"];

但是 James 的顺序是：

var rainbow = ["Red", "Orange", "Blackberry", "Blue"];

请按以下步骤操作，仅使用 splice() 方法将缺少的颜色插入数组中并移除颜色“Blackberry”：

1. 移除“Blackberry”
2. 添加“Yellow”和“Green”
3. 添加“Purple”

你的代码：

1

2

3

4

5

6

7

8

/*

* Programming Quiz: Colors of the Rainbow (6-4)

*/

varrainbow = ["Red","Orange","Blackberry","Blue"];

// your code goes here

练习：魁地奇杯 (6-5)

在哈利波特小说中，孩子们会参加霍格沃茨魔法学校四大学院之一举办的魁地奇杯比赛，这四大学院分别是格兰芬多 (Gryffindor）、赫奇帕奇 (Hufflepuff）、拉文克劳 (Ravenclaw）、斯莱特林 (Slytherin）学院。每年，每个学院都会组建一支由 7 名队员组成的魁地奇球队争夺梦寐以求的魁地奇杯冠军。

查看以下数组。

var team = ["Oliver Wood", "Angelina Johnson", "Katie Bell", "Alicia Spinnet", "George Weasley", "Fred Weasley", "Harry Potter"];

说明：

创建一个叫做 hasEnoughPlayers() 的函数，传入参数team，如果数组具有至少 7 名队员则返回true，否则返回 false。

你的代码：

1

2

3

4

5

6

7

8

9

/*

* Programming Quiz: Quidditch Cup (6-5)

*/

// your code goes here

varteam = ["Oliver Wood","Angelina Johnson","Katie Bell","Alicia Spinnet","George Weasley","Fred Weasley","Harry Potter"];

console.log(hasEnoughPlayers(team));

练习：加入船员队伍 (6-6

说明：

在之前的练习中，你创建了一个 crew 数组，表示热门电视剧《萤火虫》中 Mal 的船员。

var captain = "Mal";var second = "Zoe";var pilot = "Wash";var companion = "Inara";var mercenary = "Jayne";var mechanic = "Kaylee";var crew = [captain, second, pilot, companion, mercenary, mechanic];

在该电视剧的后面几集中，Mal 的队伍又加入了三名新的成员，分别是“Simon”、“River”和“Book”。请使用push() 方法将这三名新的船员添加到 crew 数组中。

var doctor = "Simon";var sister = "River";var shepherd = "Book";

你的代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

/*

* Programming Quiz: Joining the Crew (6-6)

*/

varcaptain = "Mal";

varsecond = "Zoe";

varpilot = "Wash";

varcompanion = "Inara";

varmercenary = "Jayne";

varmechanic = "Kaylee";

varcrew = [captain,second,pilot,companion,mercenary,mechanic];

vardoctor = "Simon";

varsister = "River";

varshepherd = "Book";

// your code goes here

练习：查看文档 (6-7)

习题 1/4

根据 MDN 文档判断以下哪个方法最适合倒转该数组中的元素：

var reverseMe = ["h", "e", "l", "l", "o"];

• pop()

• push()

• reverse()

• shift()

• splice()

SUBMIT

习题 2/4

对该数组中的元素进行排序的最佳数组方法是什么：

var sortMe = [2, 1, 10, 7, 6];

• concat()

• join()

• unshift()

• sort()

• organize()

SUBMIT

习题 3/4

你可以使用哪个方法来移除此数组中的第一个元素：

var removeFirstElement = ["a", "b", "c"];

• pop()

• push()

• shift()

• unshift()

• splice()

• slice()

提交

习题 4/4

哪个方法最适合将此数组转换为字符串？

var turnMeIntoAString = ["U", "d", "a", "c", "i", "t", "y"];

• join()

• concat()

• fill()

• copyWithin()

• 
  

数组循环

数组循环

将数据存储到数组中后，你需要能够高效地访问和操纵数组中的每个元素，而不需要为每个元素编写重复的代码。

例如，假设下面是原始的 donuts 数组：

var donuts = ["jelly donut", "chocolate donut", "glazed donut"];

我们决定制作相同类型的甜甜圈，但是仅销售为 donut holes，则可以编写以下代码：

donuts[0] += " hole";donuts[1] += " hole";donuts[2] += " hole";

donuts 数组：["jelly donut hole", "chocolate donut hole", "glazed donut hole"]

但是注意，你可以使用另一个非常强大的工具，即循环！

要循环访问数组，可以使用变量来表示数组中的索引，然后循环访问该索引以执行任何操作。

var donuts = ["jelly donut", "chocolate donut", "glazed donut"];// the variable `i` is used to step through each element in the arrayfor (var i = 0; i < donuts.length; i++) {    donuts[i] += " hole";    donuts[i] = donuts[i].toUpperCase();}

donuts 数组：["JELLY DONUT HOLE", "CHOCOLATE DONUT HOLE", "GLAZED DONUT HOLE"]

在此示例中，变量 i 用于表示数组的索引。当 i 递增时，就会从 0 开始，直到 donuts.length - 1（donuts.length 已经超出范围）访问数组中的每个元素。

forEach 循环

数组具有各种方法，可以帮助你循环访问一组数据并执行操作。你可以在此处查看 MDN 文档数组方法列表，需要知道的几个重要方法是 forEach() 和 map() 方法。

forEach() 方法也可以循环访问数组，并使用内嵌函数表达式操纵数组中的每个元素。

var donuts = ["jelly donut", "chocolate donut", "glazed donut"];donuts.forEach(function(donut) {  donut += " hole";  donut = donut.toUpperCase();  console.log(donut);});

输出：
JELLY DONUT HOLE
CHOCOLATE DONUT HOLE
GLAZED DONUT HOLE

注意，forEach() 方法不需要明确指定索引就能循环访问数组。在上述示例中，donut 对应的是数组本身的元素。这与 for 或 while 循环有所不同，它们使用索引来访问数组中的每个元素：

for (var i = 0; i < donuts.length; i++) {  donuts[i] += " hole";  donuts[i] = donuts[i].toUpperCase();  console.log(donuts[i]);}

练习：另一种类型的循环 (6-8)

说明：

使用数组的 forEach() 方法 循环访问以下数组，如果某个值可以被 3 整除，则向这些值加 100。向控制台中输出 test 数组。

var test = [13, 929, 11, 9, 199, 1000, 7, 1, 399, 37, 4, 19, 1938, 3775, 299, 58, 209, 48, 69, 299, 5, 9, 20, 58, 39, 59, 79,29, 1, 39, 111, 7, 9, 29, 1, 58, 28, 599];

你的代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

/*

* Programming Quiz: Another Type of Loop (6-8)

*

* Use the existing `test` variable and write a `forEach` loop

* that adds 100 to each number that is divisible by 3.

*

* Things to note:

* - use an `if` statement to verify code is divisible by 3

* - use `console.log` to print the `test` variable when you're finished looping

*/

vartest = [12,929,11,3,199,1000,7,1,24,37,4,

19,300,3775,299,36,209,148,169,299,

6,109,20,58,139,59,3,1,139];

// Write your code here

地图

如果你想永久地修改原始数组，则 forEach() 不能使用。forEach() 始终返回 undefined。但是，使用强大的 map() 方法可以轻松地通过现有数组创建一个新的数组。

通过 map() 方法，你可以对数组中的每个元素执行某种操作，然后返回新的数组。

var donuts = ["jelly donut", "chocolate donut", "glazed donut"]var improvedDonuts = donuts.map(function(donut) {  donut += " hole";  donut = donut.toUpperCase();  return donut;});

donuts 数组：["jelly donut", "chocolate donut", "glazed donut"]
improvedDonuts 数组：["JELLY DONUT HOLE", "CHOCOLATE DONUT HOLE", "GLAZED DONUT HOLE"]

哇，看见了吗？map() 方法接受了一个参数，是一个将用于操纵数组中每个元素的函数。在上述示例中，我们使用了函数表达式来将该函数传递给 map()。该函数具有一个参数，即 donut，对应的是 donuts 数组中的每个元素。你不再需要循环访问索引。map() 可以帮助你实现这一操作。

练习：我有账单 (6-9)

说明：

使用 map() 方法 根据以下所示的账单数额数组创建一个新的数字数组，叫做 totals，显示出加了 15% 小费的账单数额。

var bills = [50.23, 19.12, 34.01, 100.11, 12.15, 9.90, 29.11, 12.99, 10.00, 99.22, 102.20, 100.10, 6.77, 2.22];

使用 console.log 输出新的 totals 数组。

提示：查看关于数字的 toFixed() 方法，了解如何将数字四舍五入到小数点后两位数。注意，该方法会返回一个字符串，保持了数字的“修复后”格式。所以，如果你想将字符串转换回数字，可以转型或转换回数字：

Number("1");

返回：1

你的代码：

1

2

3

4

5

6

7

8

9

/*

* Programming Quiz: I Got Bills (6-9)

*/

varbills = [50.23,19.12,34.01,100.11,12.15,9.90,

29.11,12.99,10.00,99.22,102.20,100.10,6.77,2.22];

// your code goes here

二维 Donut 数组

你可以使用一个嵌套数组来表示，每个甜甜圈的名称与甜甜圈在盒子里的位置相关联。

请看以下示例：

var donutBox = [  ["glazed", "chocolate glazed", "cinnamon"],  ["powdered", "sprinkled", "glazed cruller"],  ["chocolate cruller", "Boston creme", "creme de leche"]];

如果你想循环访问甜甜圈盒子并显示每个甜甜圈（以及甜甜圈在盒子里的位置！），可以写个 for 循环来循环访问盒子里每行的甜甜圈：

var donutBox = [  ["glazed", "chocolate glazed", "cinnamon"],  ["powdered", "sprinkled", "glazed cruller"],  ["chocolate cruller", "Boston creme", "creme de leche"]];// here, donutBox.length refers to the number of rows of donutsfor (var row = 0; row < donutBox.length; row++) {  console.log(donutBox[row]);}

输出：
["glazed", "chocolate glazed", "cinnamon"]
["powdered", "sprinkled", "glazed cruller"]
["chocolate cruller", "Boston creme", "creme de leche"]

因为每行都是甜甜圈数组，所以接着需要设置一个内置循环来循环访问数组中的每个格子。

for (var row = 0; row < donutBox.length; row++) {  // here, donutBox[row].length refers to the length of the donut array currently being looped over  for (var column = 0; column < donutBox[row].length; column++) {    console.log(donutBox[row][column]);  }}

Prints:
"glazed"
"chocolate glazed"
"cinnamon"
"powdered"
"sprinkled"
"glazed cruller"
"chocolate cruller"
"Boston creme"
"creme de leche"

练习：嵌套数字 (6-10)

说明：

使用嵌套 for 循环访问下方的 numbers 数组，并将可以除以 2（偶数）的值替换为字符串“even”，剩下的数字都替换为字符串“odd”。

var numbers = [  [ 243, 12, 23, 12, 45, 45, 78, 66, 223, 3 ],  [ 34, 2, 1, 553, 23, 4, 66, 23, 4, 55 ],  [ 67, 56, 45, 553, 44, 55, 5, 428, 452, 3 ],  [ 12, 31, 55, 445, 79, 44, 674, 224, 4, 21 ],  [ 4, 2, 3, 52, 13, 51, 44, 1, 67, 5 ],  [ 5, 65, 4, 5, 5, 6, 5, 43, 23, 4424 ],  [ 74, 532, 6, 7, 35, 17, 89, 43, 43, 66 ],  [ 53, 6, 89, 10, 23, 52, 111, 44, 109, 80 ],  [ 67, 6, 53, 537, 2, 168, 16, 2, 1, 8 ],  [ 76, 7, 9, 6, 3, 73, 77, 100, 56, 100 ] ];

你的代码：

0 0

• 数组
• 数组
• 数组
• 数组
• 数组
• 数组
• 数组
• 数组
• 数组
• 数组
• 数组
• 数组
• 数组
• 数组
• 数组
• 数组
• 数组
• 数组
• FTP客户端
• MFC下如何使用dll模块
• Python 函数参数
• C# 控制台内容输出到文件
• C++ union
• 数组
• 【C++后台开发面试】复习内容整理汇总
• excel下载
• JAVA_Cookie删除问题
• 自动生成主键32UUID
• linux lnmp源码安装
• jq 更新图片验证码
• 进程间管道通信基础
• git 提交失败git error Another git process seems to be running in this repository

湖南理工学院网络

原创粉丝点击

热门IT博客

淘宝手机端怎么编辑

研究生知行论坛

美股软件

淘宝订单贷款是什么

苹果查看网络频段band

王明亮 网络首发

香港gpa算法

sql regexp replace

平安科技java面试题

招聘 量化交易 python

成都金域名人酒店会所

质量效应3防御矩阵

网络运营面试技巧

分水岭算法图像分割

python gbk 空格

摄像头电脑监控器软件

数据运营专员

西古德森实况数据

北京市政府数据资源网

sqlserver 优势

热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 张欣炒股 潘石屹张欣 张欣艾 抖音张欣尧 张欣潘石屹 股市张欣 潘石屹 张欣 张欣的博客 张欣奕 张欣 主持人 张欣 华尔街 作家张欣 张欣作家 张欣全集 张欣课程 华尔街 张欣 张欣奕整容 教师张欣 张欣股票 张欣作品 张欣奕写真 soho张欣 张欣 房地产 张欣书法 张欣喻 张欣 新元素 张欣 短线 张欣图片 张欣 汽车 作家 张欣 张欣 摩根 王骏毅张欣 张欣彤 张欣叶 张欣尧的个人资料 潘石屹夫人张欣 张欣股票讲座 潘石屹和张欣的孩子 潘石屹张欣离婚 张欣夜凉如水 张欣 潘石屹 离婚

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里