JavaScript 对象增删改查：属性访问、赋值与删除操作

在 JavaScript 编程中，对象（Object）是承载结构化数据的基石。掌握对象属性的增加、删除、修改和查询（CRUD），是每一位前端与全栈开发者必须扎实掌握的核心技能。本文将从底层逻辑出发，系统讲解点语法与中括号语法的选用依据、属性动态赋值与合并机制、delete 操作符的真正边界以及现代 ES 规范中的安全检测与不可变数据实践。

一、底层模型：JavaScript 对象的本质与属性键类型

在深入增删改查的具体语法前，首先需要理解 JavaScript 对象的内存存储模型。JavaScript 中的普通对象本质上是一组无序的“键-值”（Key-Value）映射表。

关于对象的属性名（键名），有两个关键规则决定了后续所有的读写行为：

• 键名类型仅支持两种：字符串（String）和符号（Symbol）。哪怕使用数字或布尔值作为属性名，JavaScript 引擎在底层也会通过 ToPropertyKey 抽象操作将其静默转换为字符串（例如 obj[1] 会自动转化为 obj['1']）。
• 键值可以为任何类型：包括基本原始值、函数、数组、甚至是另一个对象。当函数作为对象的属性值时，该属性常被称为“方法”。

清楚了“键必定是字符串或 Symbol”这一底层逻辑后，在面对变量求值、特殊字符键名时，就能准确选择语法而不致疑惑。

二、查（Read）：属性访问与安全检测

属性查询是业务代码中使用频率最高的操作。JavaScript 提供了两种基础访问符号：点符号（Dot notation）与中括号符号（Bracket notation），两者在语法限制和求值阶段有着本质区别。

1. 点符号与中括号符号的选用准则

点符号语法 obj.propertyName：要求属性名必须是符合 JavaScript 标识符命名规范的静态字面量（不能以数字开头，不能包含连字符 -、空格等特殊字符，不能是保留字）。点符号写法紧凑直观，能获得 IDE 完备的代码补全和类型推导支持。

中括号语法 obj[expression]：方括号内可以放置任意能够求值的表达式，求值结果会被转换为字符串去查找对应属性。以下三种情况必须使用中括号语法：

1. 属性名存储在变量中：例如遍历键名时 for (const key of keys) { console.log(obj[key]); }；
2. 属性名包含特殊字符或空格：例如 HTTP 请求头 headers['content-type'] 或带有空格的键 data['user address']；
3. 属性名为纯数字或 Symbol：例如 list[0] 或 state[Symbol.for('cache')]。

// 示例：点语法与方括号语法的应用边界
const user = {
  name: "张三",
  "auth-token": "xyz_token_987",
  100: "积分等级A"
};

// 1. 点符号访问常规标识符
console.log(user.name); // 输出: "张三"

// 2. 包含连字符时，若用 user.auth-token 会被解析为 (user.auth - token)，报错 ReferenceError
console.log(user["auth-token"]); // 输出: "xyz_token_987"

// 3. 数字键名访问
console.log(user[100]);   // 输出: "积分等级A"
console.log(user["100"]); // 等价，输出: "积分等级A"

// 4. 动态变量访问
const queryField = "name";
console.log(user[queryField]); // 输出: "张三"
console.log(user.queryField);  // 输出: undefined（因为对象没有名为 'queryField' 的属性）

2. 可选链操作符（Optional Chaining `?.`）

当访问不存在的属性时，JavaScript 不会报错，而是直接返回 undefined。但如果试图从 undefined 或 null 上继续读取下一级嵌套属性，JavaScript 引擎会立即抛出致命的 TypeError: Cannot read properties of undefined。

现代 ES2020 引入了可选链操作符 ?.。在链式访问中，如果左侧操作数为 null 或 undefined，表达式会短路停止求值，并安全返回 undefined，极大提升了代码健壮性：

const response = {
  data: {
    profile: null
  }
};

// 传统做法需要层层判断，繁琐臃肿：
const cityOld = response && response.data && response.data.profile && response.data.profile.city;

// 现代可选链写法：
const citySafe = response?.data?.profile?.city;
console.log(citySafe); // 安全输出: undefined，不崩溃

// 可选链同样支持中括号与方法调用：
const field = "email";
const userEmail = response?.data?.[field];
const result = response?.fetchData?.(); // 若方法不存在则返回 undefined，不报错

3. 属性存在性判断：三类检测方案对比

在实际业务中，“属性值为 undefined”与“对象根本没有这个属性”是两码事。选择错误的检测方式极易导致逻辑漏洞：

• 方案 A：Object.hasOwn(obj, prop)（最推荐，ES2022 标准）
  仅检测属性是否属于对象自身，不查找原型链。相比原有的 obj.hasOwnProperty(prop)，Object.hasOwn 能够安全处理 Object.create(null) 创建的无原型对象，且不会受到对象自身被恶意重写同名属性的干扰。
• 方案 B：'prop' in obj
  检查对象及其原型链上是否存在指定属性。即使属性被显式赋值为 undefined，只要键名存在，依然返回 true。适合用于确定原型继承中的方法是否存在。
• 方案 C：obj.prop !== undefined（存在逻辑漏洞，慎用）
  如果对象拥有该属性且属性值恰好就是 undefined（例如 const o = { flag: undefined };），该表达式会得出 false，导致逻辑误判。

三、增与改（Create & Update）：属性赋值与不可变更新

在 JavaScript 中，新增属性与修改已有属性在语法层面上高度统一：如果赋值的目标属性不存在，则该操作为“增”；如果目标属性已存在，则该操作为“改”（覆盖旧值）。

1. 基础赋值与动态计算属性名（Computed Property Names）

通过点符号或中括号直接给属性赋值，如果属性原本不存在，引擎会为对象动态开辟一个可枚举、可写、可配置的新属性槽位：

const settings = {
  theme: "dark"
};

// 1. 修改已有属性
settings.theme = "light";

// 2. 新增属性
settings.fontSize = 14;
settings["auto-save"] = true;

// 3. ES6 计算属性名：在对象字面量创建时直接求值动态键名
const keyPrefix = "env_";
const appConfig = {
  [keyPrefix + "mode"]: "production",
  [keyPrefix + "debug"]: false
};
console.log(appConfig.env_mode); // 输出: "production"

2. 批量合并与更新：`Object.assign()` 与展开运算符 `...`

在业务开发中，很少逐行给对象赋值，通常使用批量合并。现代 JavaScript 提供了两种核心范式：

• Object.assign(target, ...sources)：将所有源对象的可枚举属性复制到目标对象 target 中。注意：该方法会直接修改 target 对象并返回它。
• 对象展开运算符 { ...obj, newKey: value }：推荐写法。它会创建一个崭新的对象浅拷贝，后声明的同名键会自动覆盖前面展开的键，完全不破坏源对象。

// 原始状态对象
const baseConfig = {
  apiUrl: "https://api.example.com",
  timeout: 3000,
  retries: 2
};

// 破坏性更新：直接变异原对象
Object.assign(baseConfig, { timeout: 5000 });

// 非破坏性更新（不可变模式，推荐）：返回全新对象
const nextConfig = {
  ...baseConfig,
  timeout: 8000,
  authToken: "Bearer_SECRET" // 新增字段
};

console.log(baseConfig.timeout); // 5000（保持不变）
console.log(nextConfig.timeout); // 8000（新对象生效）

四、删（Delete）：`delete` 操作符与删除陷阱

从对象中移除属性是一项需要格外谨慎的操作。许多初学者常混淆 delete 操作符与将属性置为 undefined 或 null 的差异。

1. `delete` 操作符的工作原理与限制

delete obj.prop 或 delete obj['prop'] 是 JavaScript 中唯一真正从对象自身物理移除属性的操作。执行后，该属性的键名及其关联值将彻底从对象的内部散列表中被注销。

但是，delete 操作符具有以下几个至关重要的行为特征与限制：

1. 返回值只代表“操作是否成功”，不代表“属性原来是否存在”：删除一个原本就不存在的属性时，delete 依然返回 true。它仅在属性存在且为不可配置（configurable: false）时返回 false（在严格模式下抛出 TypeError）。
2. 无法删除原型链上的属性：delete 仅能作用于对象自身属性。如果对象原型上存在同名属性，试图在子对象上执行 delete child.prop 不会对原型产生任何影响。
3. 无法删除使用 var/let/const 声明的全局变量：例如 var a = 1; delete window.a; 返回 false。

const car = {
  brand: "Tesla",
  model: "Model 3"
};

// 成功删除自身属性
console.log(delete car.model); // 输出: true
console.log(car.model);        // 输出: undefined
console.log('model' in car);    // 输出: false

// 删除根本不存在的属性
console.log(delete car.color); // 输出: true（注意：依然返回 true）

// 不可配置属性示例
const sealedObj = {};
Object.defineProperty(sealedObj, "id", {
  value: 999,
  configurable: false // 设置为不可配置
});

// 非严格模式下返回 false，严格模式下抛出 TypeError
console.log(delete sealedObj.id); // 输出: false
console.log(sealedObj.id);        // 输出: 999（属性仍完好保留）

2. 现代工程替代方案：解构与 Rest 语法剔除属性

在现代 V8 引擎中，频繁对对象使用 delete 操作符会破坏对象的“隐藏类”（Hidden Class），迫使 V8 将对象优化策略退化为慢速字典模式（Dictionary Mode），从而影响性能。

因此，在 React、Vue3、Redux 以及现代函数式编程实践中，强烈推荐使用解构赋值与 Rest 属性来实现非破坏性的“纯净删除”：

const userRecord = {
  id: 1001,
  username: "developer_01",
  passwordHash: "e10adc3949ba59abbe56e057f20f883e",
  role: "admin"
};

// 从待返回数据中剥离敏感字段 passwordHash
const { passwordHash, ...safeUserData } = userRecord;

// 1. 敏感字段已被提取到独立变量中，safeUserData 成为干净的新对象
console.log(safeUserData);
// 输出: { id: 1001, username: 'developer_01', role: 'admin' }

// 2. 原对象未受任何污染，保持不变（符合不可变数据原则）
console.log('passwordHash' in userRecord);   // 输出: true
console.log('passwordHash' in safeUserData); // 输出: false

五、查与遍历（Bulk Read）：批量查询与枚举对比

除了单个属性的精准读写，日常开发中经常需要对对象的属性集合进行批量查询与遍历。JavaScript 提供了多种枚举方式，其可见性规则各不相同：

遍历 / 查询方式	自身属性	原型链属性	不可枚举属性	Symbol 属性
Object.keys(obj)	✓ 支持	— 忽略	— 忽略	— 忽略
Object.values(obj)	✓ 支持	— 忽略	— 忽略	— 忽略
Object.entries(obj)	✓ 支持（键值对）	— 忽略	— 忽略	— 忽略
for...in 循环	✓ 支持	✓ 支持（需搭配 hasOwn 过滤）	— 忽略	— 忽略
Object.getOwnPropertyNames(obj)	✓ 支持	— 忽略	✓ 支持	— 忽略
Object.getOwnPropertySymbols(obj)	✓ 仅 Symbol	— 忽略	✓ 仅 Symbol	✓ 支持
Reflect.ownKeys(obj)	✓ 全部自身键	— 忽略	✓ 支持	✓ 支持（含 Symbol）

六、全景速查与高频坑点总结

为了在实际开发中能够快速定位最适宜的对象操作语法，下表总结了对象增删改查四类操作的技术选型与安全原则：

核心认知清单

1. 读属性首选点语法，动态与特殊键名用中括号：嵌套层级不可控时，果断采用可选链 ?. 拦截可能产生的空指针崩溃。
2. 判断属性存在性优先使用 Object.hasOwn(obj, key)：坚决杜绝使用 obj[key] !== undefined 进行存在性检查。
3. 增与改区分“就地变异”与“不可变副本”：在追求确定性与组件渲染可预测的现代前端框架中，优先采用对象展开 { ...obj, newKey: val } 进行数据派生。
4. 彻底删除键名使用 delete，业务输出推荐解构 Rest 剔除：不要用赋值 undefined 冒充删除，解构剔除能在保证性能与不可变特性的同时干净利落地过滤不需要的字段。