JavaScript 数组
上一页把事实收成以后可以送出去的文本。这一页里列表活在脚本中,格子可以改写。三个颜色名字按顺序排着。你用编号指向某一格,而不是用名字当钥匙。
这是架子,不是便条
方括号在脚本运行时把列表搭起来,每个值坐在编了号的格子里。这不是等着 parse 的 JSON 文本,也不是带名字字段的对象。这种形状的意义就在格子的顺序。
名字对编号
📊 带名字的对象与带编号的数组
| 问题 | 对象 | 数组 |
|---|---|---|
| 怎么指向 | name 这样的键 | 0 这样的索引 |
| 第一种颜色 | 不是颜色列表 | colors[0] |
| 有多少 | 键要自己数 | length |
| 顺序 | 不是重点 | 就是重点 |
| JSON 那一页之后 | 关于数据的便条 | 脚本里的活列表 |
对象问你要哪个名字,数组问你要哪个位置。第一种颜色是 colors[0],不需要键。把对象放进某一格是后面的习惯,不是这一页的事。
用方括号,不用花括号
花括号打开对象,方括号打开数组。三个颜色名字就是连续三格。上一课的杯子是一个带名字的字段,不是列表。只要列表的时候,留着方括号。
let colors = ["red", "green", "blue"];
console.log(colors[0]);
第一个位置的索引是 0
colors[0] 印出 red。计数从零开始,不从一开始。从一开始数,红色就被漏掉。第二格是 green,第三格是 blue。
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 是属性,不加调用括号。
let colors = ["red", "green", "blue"];
colors[1] = "gold";
console.log(colors[1]);
console.log(colors.length);
换掉一格并不改数量
colors[1] = "gold" 写在 green 上面。再读这一格会印出 gold。length 仍是 3。变的是本来就有的格子,并没有多出一格。添加和删掉格子是下一课数组方法的事。
let colors = ["red", "green", "blue"];
console.log(colors[9]);
console.log(colors.length);
空索引不是新格子
colors[9] 里面没东西,所以读出来是 undefined,length 仍然是 3。读空格子不会把列表拉长。写到末尾之外才会让长度变大并留下空洞,那不是这一页的工具。
let bag = ["red", 12, true];
console.log(bag[1]);
console.log(typeof bag[0]);
能用同一种值就更好读
一格里可以放文本、数字或 boolean。bag[1] 印出 12,typeof bag[0] 是 string。颜色列表比混装的袋子好读。语言并不禁止混放。
把第一种颜色放到页面上
读索引 0,把那个文本写进段落。另外两种颜色留在列表里。
<!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。只改方括号里的第一段文本再刷新,这一行会跟着变。另外两种颜色仍被保存,只是不写进段落。
练习步骤
- 建好三种颜色并读索引 0,再读长度,用长度减一到达最后一种颜色。
- 把索引 1 写成
gold,读这一格和长度。 - 读索引 9,确认长度仍是 3,并在混装袋子里看数字和第一格的类型。
- 在 HTML 示例里只改第一种颜色,刷新,再读段落。
常见失误
- 从 1 开始数而漏掉第一种颜色,以及把
length当成函数加上括号去调用 - 把数组当成
JSON文本交给parse - 以为只读一个空索引就会让
length变大,或以为换掉一格就是新增一项 - 在这一页就去找数组方法
小结
- 数组是脚本里的活列表,方括号负责创建它
- 索引 0 是第一项
length数格子,而且不加调用括号- 写到已有索引会换掉那一格,读到末尾之外得到
undefined,长度不变 - 第一项可以填页面上的一行,下一课才是用来添加和删除格子的数组方法
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己,看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部