数据的DNA：Objects & Arrays 大师班
Source: Dev.to
介绍
欢迎回来。在本文中，我们将深入探讨 JavaScript 中处理数据的核心——对象和数组。
如果你已经使用过变量，你会知道它们非常适合存储单个数据。但在实际应用中——无论是使用 React 构建前端应用，还是使用 Node.js 开发后端，亦或是其他任何场景——你永远不会只处理单一的孤立值。你会处理数据集合。你需要对事物进行分组，而这正是对象和数组的作用所在。
我们不仅会查看基本语法；我希望你能够了解其内部机制，并且像专业人士一样操作这些结构。
数组：有序列表及其奥秘
让我们从 数组 开始。想象一下，你正在为马德里地铁构建一个应用。你有一份线路列表。顺序很重要，对吧？线路 1 在线路 2 之前。
在 JavaScript 中，我们使用方括号 [] 来创建数组。它本质上是一个值的列表，每个值都有一个数值位置（即 索引）。
注意： 索引从 0 开始。
数组是可迭代对象，带有强大的内置方法。
展开运算符（...）
展开运算符可以将数组（或对象）展开为单个元素。它在复制、连接以及在不改变原结构的情况下插入值时非常重要。
操作数组
我们很少创建一个数组后就保持不变。我们需要添加元素、删除元素或对其进行转换。这时 push、pop、filter、map 和 reduce 等方法就派上用场了。
注意我们使用了
map。这是现代开发中最重要的函数之一，尤其在 React 中，用于在不改变原数组的情况下转换数据。
对象：键‑值对
当 arrays 用于有序列表时，objects 用于将与特定实体相关的数据进行分组——比如用户、产品、配置等。我们使用大括号 {} 并定义 key: value 键值对。
你可以使用 dot notation (user.name) 或 bracket notation (user['role']) 来访问属性。当你想访问的键存储在变量中时，方括号符号非常有用。
Reference Types vs. Primitives
这是一个许多开发者都会碰到的概念。你可能已经注意到我在上面使用 const 来声明数组和对象。你可能会好奇：
“如果是
const，为什么我还能修改里面的内容？”
好问题！这正是因为 数组和对象是引用类型。变量并 不 存储值本身；它存储的是一个内存地址（指针），指向数据所在的位置。
当我们修改对象内部的属性时，并没有改变内存地址，只是改变了该地址指向的数据。这就是 const 仍然允许修改的原因。不过，这也意味着如果我们仅仅通过赋值将对象复制给另一个变量，我们复制的只是指针，而不是数据本身。
现代语法：展开运算符与解构赋值
ES6+ 为我们提供了极佳的工具，以更简洁的方式处理这些结构。
展开运算符
如果你想创建一个 真实的副本 对象或合并两个数组，展开运算符就是你的最佳伙伴。
解构赋值
如果你只想从对象中提取特定属性并将其存入变量，解构赋值 可以在一行代码中完成。
// Example of object destructuring
const user = { name: 'Ada', role: 'Developer', age: 30 };
const { name, role } = user; // name = 'Ada', role = 'Developer'结束语
理解 objects 和 arrays 对任何 JavaScript 开发者来说都是基础。掌握它们的现代语法——展开（spread）、剩余（rest）和解构（destructuring）——将使你的代码更易读、可维护且高效。
祝编码愉快！ 🚀
综合运用：对象数组
这里是理论与实践相结合的地方。在几乎所有的应用中，你都会使用 对象数组。可以把它想象成来自 API 的 JSON 响应。
掌握这些结构不仅仅是学习语法，更是理解如何对数据建模。无论是在 Glovo 处理菜单，还是在 Fever 过滤活动，你总会回到这些基础。
希望这能让你有更清晰的认识！在控制台中尝试代码，我们下篇文章再见，敬请关注 CodeSyllabus.com。