数组与对象 — 装载和处理数据

1.数组——有顺序的列表

到目前为止，我们都是一个变量装一个值。可是总不能把 30 个学生的分数装进 30 个变量里。数组是把多个值按顺序放在一个名字下的数据类型。在方括号里用逗号排列值，就能写出 [70, 85, 90] 这样的数组。第4讲用 for...of 逐个取出的那个列表，就是数组。

数组里的值用位置编号——索引——来取。索引不是从 1 而是从 0 开始，所以第一个值是 arr[0]，第二个值是 arr[1]。值的个数是 arr.length，最后一个值的索引永远是 arr.length - 1。第4讲见过的 off-by-one 失误正是在这里产生的。

读取不存在的索引不会报错，而是得到 undefined。在长度为 3 的数组里读 arr[3] 或 arr[-1]，结果都是 undefined。想从后往前数，可以用 arr.at(-1) 取得最后一个值。数组里也可以混放数字、字符串、布尔值，但实际上放同一类的值才便于处理。

const fruits = ['苹果', '梨', '橘子'];
console.log(fruits[0], fruits[2]);
console.log(fruits.length);
console.log(fruits[fruits.length - 1]);
console.log(fruits[3]);
console.log(fruits.at(-1));

苹果 橘子
3
橘子
undefined
橘子

2.修改与查找数组——`push`、`pop`、`includes`、`indexOf`

push 在数组末尾添加值，pop 取出末尾的值并返回，同时把它从数组中删掉。也可以像 arr[1] = '葡萄' 这样直接往索引里放值来修改。这里有个容易混淆的地方：用 const 创建的数组，内容也是可以改的。const 阻止的是“给这个名字重新放入另一个数组”，而不是修改数组里的格子。

要确认某个值在不在数组里，includes 返回真或假，indexOf 返回位置。indexOf 找不到时返回 -1，和第4讲用 -1 表示“没找到”是同一个约定。所以如果写成 if (arr.indexOf(x))，值在第一格（0）时为假，没找到（-1）反而为真（第3讲的真值与假值）。只想知道在不在，就用 includes。

把数组放进另一个变量，不是复制，而是多出一个“指向同一个数组的名字”。在下面的代码里往 b 里 push，a 也会变。就像两个人分别拿着同一栋房子的地址。真正需要一份独立的副本时，要像 [...a] 这样展开，创建新数组。对象的行为也完全一样。

const cart = ['牛奶', '面包'];
cart.push('鸡蛋');
console.log(cart, cart.length);
const last = cart.pop();
console.log(last, cart);
console.log(cart.includes('面包'), cart.indexOf('面包'));
console.log(cart.indexOf('海苔'));

[ '牛奶', '面包', '鸡蛋' ] 3
鸡蛋 [ '牛奶', '面包' ]
true 1
-1

const a = [1, 2];
const b = a;
b.push(3);
console.log(a);
const c = [...a];
c.push(4);
console.log(a, c);

[ 1, 2, 3 ]
[ 1, 2, 3 ] [ 1, 2, 3, 4 ]

3.对象——带名字标签的格子

如果说数组是按“第几个”找值，对象就是按“名字”找值。在花括号里用逗号排列 键: 值，就能写出 { name: '小明', age: 20 } 这样的对象。每一对键和值叫作属性。像一位会员、一件商品这样，多条信息合起来构成一个对象时，用对象最合适。

属性通常像 user.name 这样用点来读；键名存放在变量里时，就像 user[key] 这样用方括号来读。读取不存在的属性，和数组里不存在的格子一样会得到 undefined。可是如果再从这个 undefined 上读属性，就会出现 TypeError。下面的代码就是这种情况，原因是把键名错写成了 nmae。信息的具体措辞在不同浏览器中略有差异。

把 AI 写的代码用在真实数据上时，这是最常见的错误之一。通常是数据里的键名和代码期望的键名不同，或者只有某些条目缺了这个属性。错误信息括号里的 (reading 'length') 告诉你“读什么的时候失败了”，所以顺着往回找它前面那个值为什么是 undefined 就行（第8讲）。

const user = { name: '小明', age: 20 };
console.log(user.name, user.age);
user.age = 21;
user.city = '上海';
console.log(user);
const key = 'name';
console.log(user[key]);
console.log(user.email);

小明 20
{ name: '小明', age: 21, city: '上海' }
小明
undefined

const user = { name: '小明' };
console.log(user.nmae);
console.log(user.nmae.length);

undefined
TypeError: Cannot read properties of undefined (reading 'length')

4.对象数组 = 表格

真实数据大多是“对象数组”的样子。数组的每一格是表格的一行，对象的键就是列名。可以把它想成把 Excel 之类电子表格里的一张表搬进了代码。下面的表格和代码，是用两种方式表示同一份虚构的销售记录。

在这种结构里，把第4讲的循环和刚学的读取属性结合起来，几乎什么计算都能做。逐行取出（for...of），读取需要的列（row.qty），再累加或计数。第9讲会把文字形式的表格转成这种结构，亲手求合计、平均值和分组合计。

const sales = [
  { item: '笔记本', price: 1500, qty: 4 },
  { item: '铅笔', price: 500, qty: 10 },
  { item: '橡皮', price: 800, qty: 3 },
];
let revenue = 0;
for (const row of sales) {
  revenue += row.price * row.qty;
}
console.log(revenue);

13400

5.初尝 `map`、`filter`、`reduce`

数组有可以代替循环的方法，最常用的三个是 map、filter、reduce。三者都接收第5讲的箭头函数，并对数组里的每个值调用这个函数。map 用每个值转换后的结果组成新数组（长度相同）；filter 只挑出函数返回真的值组成新数组（长度相同或更短）；reduce 把所有值折叠成一个，得出合计之类的单个值。

重要的一点是，map 和 filter 不修改原数组，而是返回新数组。这和第5讲的纯函数性质相同，结果容易预测。reduce 一定要在第二个实参里放起始值。reduce((s, x) => s + x, 0) 里的 0，相当于第4讲累加模式里的 let sum = 0。漏掉起始值的话，遇到空数组就会出现 TypeError。

一开始觉得循环更好读也没关系，这些方法只是把循环能做的事写得更短而已。不过 AI 写的代码里，这三个方法常常像链条一样连在一起出现，所以最好练习一步步拆开，打印中间结果来读。

const prices = [1500, 500, 800, 12000];
const withTax = prices.map((p) => p * 1.1);
console.log(withTax.map((p) => Math.round(p)));
const cheap = prices.filter((p) => p < 1000);
console.log(cheap);
const total = prices.reduce((s, p) => s + p, 0);
console.log(total);
console.log(prices);

[ 1650, 550, 880, 13200 ]
[ 500, 800 ]
14800
[ 1500, 500, 800, 12000 ]

6.JSON——交换数据用的文字格式

JSON 是把对象和数组写成文字（字符串）的格式。名字来自 JavaScript，但如今几乎所有编程语言和网络服务交换数据时都使用它。配置文件、服务器的响应、应用保存的数据，相当一部分都是 JSON。JSON.stringify 把值转成 JSON 文字，JSON.parse 把 JSON 文字还原成值。

JSON 和 JavaScript 的对象语法很像，但更严格。键必须用双引号括起来，字符串也只能用双引号。最后一项后面不允许有逗号，也不能写注释。函数和 undefined 放不进去，stringify 时，作为对象属性会被省略，在数组里则变成 null。只要违反任何一条规则，JSON.parse 就会报 SyntaxError。

JSON 挤成长长的一行时很难读。这时把它粘贴到 JSON 格式化工具里，就会自动缩进，有时还会指出违反规则的地方。不过，真实会员信息这类含有个人信息的数据，不要粘贴到外部工具或 AI 里，换成结构相同的虚构数据再检查（第10讲）。

const item = { name: '笔记本', price: 1500, tags: ['文具'] };
const text = JSON.stringify(item);
console.log(text);
console.log(typeof text);
const back = JSON.parse(text);
console.log(back.price + 500);

{"name":"笔记本","price":1500,"tags":["文具"]}
string
2000

const bad = "{ name: '笔记本' }";
console.log(JSON.parse(bad));

SyntaxError: Expected property name or '}' in JSON at position 2 (line 1 column 3)