你正在 萌芽版 · ⚡ 代码俱乐部 · ← 回到学院 · 萌芽版主页 · 总入口

← 代码俱乐部 · 创作者层 01 / 8

第 05 节 · 数据形状：数组、对象、JSON

真实代码里 90% 的事，是把数据从一种形状变成另一种。这一节让孩子学会看数据的"骨架"。

核心概念

// 数组：一串东西，按顺序
const dinos = ["霸王龙", "棘背龙", "三角龙"];

第 1 块 · 数组（Array）：有序的列表

数组用 [ ... ] 括起来，里面放一个个"项目"。const dinos = ["霸王龙", "棘背龙", "三角龙"]; 就是说"定义一个叫 dinos 的数组，里面有三个字符串"。访问时用下标：dinos[0] 是"霸王龙"，dinos[1] 是"棘背龙"。

👉 试改：加一个新的恐龙：dinos.push("翼龙")。

// 对象：带名字的属性
const tRex = { name: "霸王龙", height: 4, era: "白垩纪晚期" };

第 2 块 · 对象（Object）：带名字的属性

对象用 { ... } 括起来，里面是"名字: 值"的对儿。tRex 有三个属性：name、height、era。访问时用点号：tRex.name 得到"霸王龙"，tRex.height 得到 4。比数组灵活 —— 你不用记下标，直接用名字。

💡 数组 vs 对象的核心差异：数组是"有序的列表"（用数字下标），对象是"键值对"（用名字查）。

👉 试改：加一个新属性：tRex.weight = 9; // 9 吨

// 数组装对象（最常见的真实形状）
const dinoList = [
  { name: "霸王龙", height: 4 },
  { name: "棘背龙", height: 5 },
  { name: "三角龙", height: 3 }
];

第 3 块 · 数组+对象：最常见的数据形状

这是真实代码中最常见的结构 —— 一个数组，里面每一项都是一个对象。比如：一个"恐龙列表"，每个项目都是一个"恐龙信息"。访问时：dinoList[0].name 得到第一个恐龙的名字（"霸王龙"）。

💡 真实 API 数据长这样：抖音的"推荐视频列表"就是数组+对象 —— 数组里每一项是一个视频对象（有标题、作者、点赞数、评论等属性）。

👉 试改：加一个新恐龙：dinoList.push({ name: "始祖鸟", height: 1 })

// JSON 就是这种数据的"文字写法"
console.log(JSON.stringify(dinoList, null, 2));

第 4 块 · JSON：数据的"文本格式"

JSON（JavaScript Object Notation）是一种"文本格式的数据"。JSON.stringify(dinoList, null, 2) 把 JavaScript 对象变成可读的 JSON 文本。这样你就能"看见"数据的形状，调试代码时特别有用。

💡 JSON 无处不在：网页从服务器请求数据时，服务器返回的就是 JSON 格式。前端收到 JSON，再用 JSON.parse() 变回 JavaScript 对象。

📋 看 / 复制完整代码 
// 数组：一串东西，按顺序
const dinos = ["霸王龙", "棘背龙", "三角龙"];

// 对象：带名字的属性
const tRex = { name: "霸王龙", height: 4, era: "白垩纪晚期" };

// 数组装对象（最常见的真实形状）
const dinoList = [
  { name: "霸王龙", height: 4 },
  { name: "棘背龙", height: 5 },
  { name: "三角龙", height: 3 }
];

// JSON 就是这种数据的"文字写法"
console.log(JSON.stringify(dinoList, null, 2));

练习

给孩子的爱好做一个数据结构 —— 比如他收藏的 50 张宝可梦卡，每张包含名字、属性、HP、攻击。把它写成 JS 对象数组。

动手练习 1：操作一个简单的数组

动手 数组的基本操作
任务：下面是一个关于"我喜欢的游戏"的数组。试试改改数组的内容，或者试试用 push() 或 pop() 来添加和删除元素。按"运行"看数组怎么变化。
参考答案

一个完整的数组操作演示。包括添加、删除、查找等常见操作：

<!DOCTYPE html>
<html>
<head><style>
  body { font-family: sans-serif; padding: 20px; }
  pre { background: #f0f0f0; padding: 15px; border-radius: 5px; overflow-x: auto; }
  .result { margin: 20px 0; padding: 10px; background: #e3f2fd; border-left: 4px solid #667eea; }
</style></head>
<body>
  <h1>数组的各种操作</h1>
  <div id="output"></div>

  <script>
    let games = ['我的世界', '堡垒之夜', '推箱子'];
    let output = '';
    
    // 1. 显示原始数组
    output += '<div class="result"><strong>1. 原始数组：</strong></div>';
    output += '<pre>' + JSON.stringify(games, null, 2) + '</pre>';
    
    // 2. 添加元素
    output += '<div class="result"><strong>2. push() 添加一个元素：</strong></div>';
    games.push('植物大战僵尸');
    output += '<pre>' + JSON.stringify(games, null, 2) + '</pre>';
    
    // 3. 访问第一个元素
    output += '<div class="result"><strong>3. 第一个游戏：</strong> ' + games[0] + '</div>';
    
    // 4. 数组长度
    output += '<div class="result"><strong>4. 数组长度：</strong> ' + games.length + '</div>';
    
    document.getElementById('output').innerHTML = output;
  </script>
</body>
</html>

关键：JSON.stringify() 把数组变成可读的文本。这样你就能看清数组里有什么。

动手练习 2：用对象存储信息

动手 JavaScript 对象
任务：下面是一个关于某个人的对象。改改这个对象的属性（比如改名字、改年龄、加新属性），然后看输出怎么变。
参考答案

一个完整的对象示例，包括多个人的数组和对象操作：

<!DOCTYPE html>
<html>
<head><style>
  body { font-family: sans-serif; padding: 20px; background: #f5f5f5; }
  .card { background: white; padding: 15px; margin: 10px 0; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
  .card h3 { color: #667eea; margin-top: 0; }
  .card p { margin: 5px 0; }
</style></head>
<body>
  <h1>班级学生信息</h1>
  <div id="output"></div>

  <script>
    // 一个学生对象的数组
    let students = [
      { name: '小红', age: 10, score: 95 },
      { name: '小王', age: 10, score: 87 },
      { name: '小李', age: 11, score: 92 }
    ];
    
    let html = '';
    for (let i = 0; i < students.length; i++) {
      let s = students[i];
      html += '<div class="card">';
      html += '<h3>' + s.name + '</h3>';
      html += '<p>年龄：' + s.age + '</p>';
      html += '<p>成绩：' + s.score + '</p>';
      html += '</div>';
    }
    
    document.getElementById('output').innerHTML = html;
  </script>
</body>
</html>

进阶：这是真实代码里最常见的数据形态 —— 对象的数组。每个对象代表一条数据（比如一个学生），数组装着所有的对象。

动手练习 3：用你自己的爱好做数据

动手 我的收藏品数据库
任务：选一样你喜欢的东西（游戏、卡牌、书籍、电影），然后用数据结构把它表示出来。下面是一个"宝可梦卡牌"的例子，你改成你自己喜欢的东西。至少创建 3 条数据。
参考答案

改成"我看过的电影"的例子：

<!DOCTYPE html>
<html>
<head><style>
  body { font-family: sans-serif; padding: 20px; background: #f5f5f5; }
  .item { background: white; padding: 15px; margin: 10px 0; border-radius: 8px; border-left: 4px solid #764ba2; }
  .item h3 { margin: 0; color: #764ba2; }
</style></head>
<body>
  <h1>我看过的电影</h1>
  <div id="output"></div>

  <script>
    let movies = [
      { title: '疯狂动物城', year: 2016, rating: 9.2 },
      { title: '千与千寻', year: 2001, rating: 9.4 },
      { title: '海上钢琴师', year: 1998, rating: 9.3 }
    ];

    let html = '';
    movies.forEach(movie => {
      html += '<div class="item">';
      html += '<h3>' + movie.title + '</h3>';
      html += '<p><strong>年份：</strong> ' + movie.year + '</p>';
      html += '<p><strong>评分：</strong> ' + movie.rating + '</p>';
      html += '</div>';
    });

    document.getElementById('output').innerHTML = html;
  </script>
</body>
</html>

关键：forEach() 是遍历数组的一种方法。对每一个元素，都执行一次函数。这样你就能把数组里的数据一个一个显示出来。

小测验：数据的形状

小测 你理解"数据形状"了吗？
下面哪个最准确地描述"对象"？
  • 对象是一种变量，只能存数字。
  • 对象是用 { key: value } 来存很多相关信息的。比如一个人的对象包括 name、age、school。
  • 对象和数组是一样的。
解释：数组是"一列东西"（有顺序）。对象是"一个东西的各种属性"（无顺序，但有名字）。比如：数组 = [苹果、香蕉、橘子]；对象 = { name: 苹果, color: 红, price: 3 }。
小测 为什么说"对象的数组"是最常见的数据形状？
下面哪个说法最对？
  • 因为现实世界就是"很多个东西"，每个"东西"有多个属性。对象的数组能完美映射这个结构。
  • 对象的数组用起来最快。
  • 只有数据库才会用对象的数组。
解释：一个班级 = [学生1, 学生2, 学生3, ...]。每个学生 = {name, age, score}。这就是对象的数组。大多数真实数据都长成这样，所以这是程序员最常写的数据结构。

这一节学到什么

数据有"形状"。选对的形状，代码自然简单。看不懂数据形状，写多少年代码也累。

← 上一节下一节 →