JavaScript数组和对象基础：数据存储与访问方法

一、两种数据结构的逻辑存储模型

在 JavaScript 内存机制中，无论是数组还是普通对象，本质上都是引用类型（Object 派生形态）。但它们在设计目的和逻辑排布上有本质区别：

• 数组（Array）：专为存储有序集合而设计。数组内的每一个元素都与一个从 0 开始递增的整数索引严格绑定。当我们需要维护数据的排列先后次序（如排队序列、时间线记录、排行榜）时，数组是最佳载体。
• 对象（Object）：专为表达具名属性的实体而设计。对象由无序的“键值对（Key-Value Pairs）”组成。键通常是字符串（也可以是 Symbol），每个键清晰地描述了其对应值的业务含义（如用户的 name、age、email）。

二、数组的数据存储与元素访问

在 JavaScript 中创建数组最常见的方式是使用数组字面量 []。由于数组内部通过非负整数索引管理元素，所有基础读写操作均依托方括号下标完成。

1. 基于索引的基础读写

数组索引起始于 0。访问第一个元素下标为 0，访问最后一个元素的标准公式为 array.length - 1。

// 1. 初始化数组
const languages = ["JavaScript", "Python", "Rust"];

// 2. 读取指定索引的元素
console.log(languages[0]); // 输出: "JavaScript"
console.log(languages[2]); // 输出: "Rust"

// 3. 修改已有元素
languages[1] = "Go";
console.log(languages); // 输出: ["JavaScript", "Go", "Rust"]

// 4. 读取末尾元素（现代语法也可使用 .at(-1)）
console.log(languages[languages.length - 1]); // 输出: "Rust"
console.log(languages.at(-1));                 // 输出: "Rust"

2. 核心增删操作对存储结构的影响

数组除了通过 arr[i] 赋值，通常使用内置方法来维护队列或栈行为：

• push(val)：将元素追加到数组末尾，length 递增 1，原索引无需变动。
• pop()：移除并返回末尾元素，length 递减 1。
• unshift(val)：在数组开头插入新项，后续所有已有元素的索引必须整体向后平移 1 位。
• shift()：移除并返回首项，后续所有元素索引向前平移 1 位。

三、对象的数据存储与属性访问

对象是 JavaScript 中的键值字典。对象属性名在底层均会被强制转换为字符串类型（或保持为 Symbol）。访问对象属性有两种标准语法：点语法（Dot Notation）与方括号语法（Bracket Notation）。初学者常误认为二者完全等价，实则有严苛的适用边界。

1. 点语法 vs 方括号语法

2. 两种语法的实战示例对比

const book = {
  title: "深入浅出设计模式",
  "publish-year": 2024,
  101: "仓库架位编号"
};

// 1. 点语法访问常规属性
console.log(book.title); // 输出: "深入浅出设计模式"

// 2. 含有连字符的属性，点语法会引发 SyntaxError，必须用方括号
// console.log(book.publish-year); // 语法错误！解析为减法运算
console.log(book["publish-year"]); // 正确输出: 2024

// 3. 数字形式的键名，必须使用方括号访问
console.log(book[101]);   // 正确输出: "仓库架位编号" (101 隐式转为 "101")
console.log(book["101"]); // 同样输出: "仓库架位编号"

// 4. 使用变量动态访问
const dynamicKey = "title";
console.log(book[dynamicKey]); // 动态解析为 book["title"]，输出: "深入浅出设计模式"
console.log(book.dynamicKey);  // 错误！尝试查找名为 "dynamicKey" 的字面属性，返回 undefined

3. 属性的新增、更新、删除与存在性检查

由于 JavaScript 对象的动态特性，直接对未声明的属性名赋值即可完成新增；使用 delete 操作符可移除已有属性。

const profile = { name: "李雷" };

// 1. 新增属性
profile.age = 28;
profile["city"] = "杭州";

// 2. 更新已有属性
profile.name = "李小雷";

// 3. 删除属性
delete profile.city;
console.log(profile.city); // 输出: undefined

// 4. 判定属性是否真实存在于对象上
console.log("name" in profile);                 // 输出: true
console.log(Object.hasOwn(profile, "city"));     // 输出: false (现代推荐方法)

四、复杂业务中的组合嵌套与提取实战

在真实的 Web 接口交互中，数据几乎总是以“对象数组”或“嵌套对象”的形式呈现。例如电商订单、用户权限清单或配置项。此时必须将数组的索引访问与对象的键名访问链式组合。

链式层级访问与可选链（Optional Chaining）

考虑以下典型的后端返回用户数据集：

const apiResponse = {
  status: 200,
  data: [
    {
      id: 1001,
      name: "王工程师",
      skills: ["Vue", "Node.js", "Docker"],
      contact: {
        email: "wang@example.com",
        location: { city: "深圳" }
      }
    },
    {
      id: 1002,
      name: "赵设计师",
      skills: ["Figma", "Photoshop"],
      contact: null // 缺失联系信息
    }
  ]
};

// 1. 组合提取：第一个用户的第 2 个技术栈
const firstUserSecondSkill = apiResponse.data[0].skills[1];
console.log(firstUserSecondSkill); // 输出: "Node.js"

// 2. 深入对象层级读取城市
const firstUserCity = apiResponse.data[0].contact.location.city;
console.log(firstUserCity); // 输出: "深圳"

// 3. 避免深层读取异常：使用可选链操作符 (?.)
// 若直接写 apiResponse.data[1].contact.location.city，会因为 contact 为 null 导致代码抛出 TypeError
const secondUserCity = apiResponse.data[1].contact?.location?.city;
console.log(secondUserCity); // 安全输出: undefined，程序不崩溃

五、选型原则与常见认知误区

掌握数组与对象不仅在于记诵语法，更在于面对特定业务场景时能做出正确的数据选型。