对象和数组：把数据组织起来

对象是一份档案

const project = {
  id: 'p-101',
  name: '第一话',
  nodeCount: 8
}

用 project.name 取出名字。点号可以读成“这个东西的”。

数组是一排数据

const projects = ['第一话', '第二话', '番外篇']
console.log(projects[0]) // 第一项；电脑从 0 开始数

真实项目里的数据形状

manga_studio/canvas-v2/src/stores/projectStore.ts 第 77–90 行定义了真实项目：

interface Project {
  id: string
  name: string
  nodes: CanvasNode[]
  edges: CanvasEdge[]
  viewport: Viewport
}

• 一个 Project 是对象。
• nodes 后面的 [] 表示它是一组节点。
• 每个节点又是对象，所以真实项目经常是“对象里面有数组，数组里面再放对象”。

动手练习读取对象和数组

你的任务

在 nodes 列表最后加上 '声音节点'，让列表长度从 2 变成 3。

1. 找到第 1 行方括号里的图片节点
2. 在它后面加一个逗号和 '声音节点'
3. 点“运行并检查”

代码区你可以直接点进去修改

1234

const project = { name: '第一话', nodes: ['文字节点', '图片节点'] } console.log(project.name) console.log(project.nodes[0]) console.log(project.nodes.length)

电脑输出

还没有运行。完成左边的小任务后，点下面的绿色按钮。

projects[0] 里的 0 表示什么？

答案：表示数组里的第一项。JavaScript 的数组位置从 0 开始计数。