正在加载...

JavaScript 数组

上一页把事实收成以后可以送出去的文本。这一页里列表活在脚本中,格子可以改写。三个颜色名字按顺序排着。你用编号指向某一格,而不是用名字当钥匙。

这是架子,不是便条

方括号在脚本运行时把列表搭起来,每个值坐在编了号的格子里。这不是等着 parse 的 JSON 文本,也不是带名字字段的对象。这种形状的意义就在格子的顺序。

名字对编号

📊 带名字的对象与带编号的数组

问题 对象 数组
怎么指向 name 这样的键 0 这样的索引
第一种颜色 不是颜色列表 colors[0]
有多少 键要自己数 length
顺序 不是重点 就是重点
JSON 那一页之后 关于数据的便条 脚本里的活列表

对象问你要哪个名字,数组问你要哪个位置。第一种颜色是 colors[0],不需要键。把对象放进某一格是后面的习惯,不是这一页的事。

用方括号,不用花括号

花括号打开对象,方括号打开数组。三个颜色名字就是连续三格。上一课的杯子是一个带名字的字段,不是列表。只要列表的时候,留着方括号。

读第一格

javascript
let colors = ["red", "green", "blue"];
console.log(colors[0]);

第一个位置的索引是 0

colors[0] 印出 red。计数从零开始,不从一开始。从一开始数,红色就被漏掉。第二格是 green,第三格是 blue。

长度和最后一格

javascript
let colors = ["red", "green", "blue"];
console.log(colors.length);
console.log(colors[colors.length - 1]);

length 数的是格子

colors.length 是 3,因为存了三个名字,最后一格 colors[colors.length - 1] 就是 blue。要减一,因为第一个索引是零不是一。length 是属性,不加调用括号。

换掉已有的一格

javascript
let colors = ["red", "green", "blue"];
colors[1] = "gold";
console.log(colors[1]);
console.log(colors.length);

换掉一格并不改数量

colors[1] = "gold" 写在 green 上面。再读这一格会印出 gold。length 仍是 3。变的是本来就有的格子,并没有多出一格。添加和删掉格子是下一课数组方法的事。

读到末尾之外

javascript
let colors = ["red", "green", "blue"];
console.log(colors[9]);
console.log(colors.length);

空索引不是新格子

colors[9] 里面没东西,所以读出来是 undefined,length 仍然是 3。读空格子不会把列表拉长。写到末尾之外才会让长度变大并留下空洞,那不是这一页的工具。

混装的袋子里也有格子

javascript
let bag = ["red", 12, true];
console.log(bag[1]);
console.log(typeof bag[0]);

能用同一种值就更好读

一格里可以放文本、数字或 boolean。bag[1] 印出 12,typeof bag[0] 是 string。颜色列表比混装的袋子好读。语言并不禁止混放。

把第一种颜色放到页面上

读索引 0,把那个文本写进段落。另外两种颜色留在列表里。

页面示例 — 第一种颜色

html
<!DOCTYPE html>
<html>
<head>
<title>arrays — page</title>
</head>
<body>
<p id="line">…</p>
<script>
let colors = ["red", "green", "blue"];
let box = document.getElementById("line");
box.textContent = colors[0];
</script>
</body>
</html>

段落显示 red。只改方括号里的第一段文本再刷新,这一行会跟着变。另外两种颜色仍被保存,只是不写进段落。

练习步骤

  1. 建好三种颜色并读索引 0,再读长度,用长度减一到达最后一种颜色。
  2. 把索引 1 写成 gold,读这一格和长度。
  3. 读索引 9,确认长度仍是 3,并在混装袋子里看数字和第一格的类型。
  4. 在 HTML 示例里只改第一种颜色,刷新,再读段落。

常见失误

  • 从 1 开始数而漏掉第一种颜色,以及把 length 当成函数加上括号去调用
  • 把数组当成 JSON 文本交给 parse
  • 以为只读一个空索引就会让 length 变大,或以为换掉一格就是新增一项
  • 在这一页就去找数组方法

小结

  • 数组是脚本里的活列表,方括号负责创建它
  • 索引 0 是第一项
  • length 数格子,而且不加调用括号
  • 写到已有索引会换掉那一格,读到末尾之外得到 undefined,长度不变
  • 第一项可以填页面上的一行,下一课才是用来添加和删除格子的数组方法

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己,看看你对这个主题的理解程度如何

❓
8
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部