1. 从原理看向JSON对象属性机制
1.1 JSON对象的语义与属性模型
核心要点：在 JavaScript 中，JSON 数据其实对应的是一种可序列化的对象结构，真正的“JSON对象”往往指向一个可被 JSON.stringify 转换的普通对象。了解属性是如何存储的、以及可枚举性、可写性与可配置性如何影响向其中添加新属性，是搭建正确实现的前提，这也是向JSON对象添加新属性的正确姿势的完整指南。
当你向一个对象添加新属性时，浏览器会更新对象的属性表和隐藏的内部结构。只要对象没有被冻结或密封，你就可以通过点语法或方括号语法添加新属性。
// 示例：把一个普通对象视为可序列化的 JSON 对象
let obj = { id: 1, name: "Ada" };
obj.age = 30; // dot 语法
obj["city"] = "Shanghai"; // bracket 语法，属性名来自变量
console.log(JSON.stringify(obj)); // {"id":1,"name":"Ada","age":30,"city":"Shanghai"}2. 向JSON对象添加新属性的直接方式
2.1 点语法与方括号语法
在日常开发中，点语法是最直观的方式向对象添加新属性，前提是属性名是一个有效的标识符且你已知属性名。相反，方括号语法则适合属性名来自变量或包含特殊字符的情况。
通过这两种方式添加的新属性，默认在原对象上可见，并且会参与后续的 JSON 序列化，如果后续需要将对象发送给服务器，这一点非常关键。
let obj = { id: 2 };
let propName = "nickname";
obj.age = 25; // 点语法
obj[propName] = "Ally"; // Bracket 语法，属性名来自变量
console.log(obj); // { id: 2, age: 25, nickname: "Ally" }2.2 动态属性名的处理注意点
当你需要根据运行时条件动态决定属性名时，方括号语法是首选，同时请注意命名冲突和同名属性覆盖等问题。
在处理 JSON 字符串时，若将字符串解析后的对象作为目标，需要确保在序列化时不会丢失新增的属性。
const data = JSON.parse('{ "user": "Tom" }');
data.age = 29; // 动态添加
console.log(JSON.stringify(data)); // {"user": "Tom","age":29}3. 不可变原则与不可枚举属性
3.1 使用 Object.defineProperty 进行细粒度控制
如果你需要更精确的控制，可以使用 Object.defineProperty 来设定新的属性描述符，例如 enumerable、writable、configurable 等。
通过定义，新增的属性可以是不可枚举、不可写或不可配置，这在保护对象结构、避免误修改时非常有用。
let obj = { id: 1 };
Object.defineProperty(obj, "version", {value: "1.0.0",enumerable: true,writable: true,configurable: true
});
console.log(obj); // { id: 1, version: "1.0.0" }3.2 不可枚举属性与冻结对象的影响
如果对象被 Object.freeze 冻结，则无法再添加新属性，即使使用赋值也会失败，且在严格模式下会抛出错误。
在实现只读配置对象时，冻结对象是一种简单有效的策略，但需要考虑业务的可扩展性。
const cfg = { mode: "auto" };
Object.freeze(cfg);
cfg.newProp = 123; // 不会生效，在严格模式下抛错
console.log(cfg); // { mode: "auto" }4. 使用对象扩展实现“向JSON对象添加新属性”的不可变写法
4.1 使用展开运算符实现不可变更新
为实现不可变更新，使用展开运算符来创建一个新对象，将原对象的属性复制到新对象，然后再追加新属性。
这样做的好处是不会修改原始对象，便于状态管理和调试，尤其在前端框架中很常见。
const base = { a: 1, b: 2 };
const updated = { ...base, c: 3 }; // 不修改 base
console.log(base); // { a: 1, b: 2 }
console.log(updated); // { a: 1, b: 2, c: 3 }4.2 使用 Object.assign 的兼容性写法
另一种广泛兼容的方式是 Object.assign，它将一个或多个源对象属性合并到目标对象中，通常用于创建新对象或对现有对象进行扩展。
const base = { x: 9 };
const extended = Object.assign({}, base, { y: 10 });
console.log(extended); // { x: 9, y: 10 }5. 当对象来自JSON字符串时
5.1 parse 与 stringify 的协同工作
当你处理来自服务器的 JSON 字符串时，通常先用 JSON.parse 将字符串转成对象，再对该对象添加新属性，最后用 JSON.stringify 将结果转回字符串发送回服务器。
关键点在于，JSON.parse 得到的对象是可变的，你可以像普通对象一样扩展，但不要忘记在需要时进行再序列化。
const response = '{"user":"Liu","roles":["admin"]}';
let data = JSON.parse(response);
data.active = true;
const payload = JSON.stringify(data);
console.log(payload); // {"user":"Liu","roles":["admin"],"active":true}6. 实战场景：向一个JSON对象添加新属性的完整流程
6.1 场景：用户配置对象合并
在实际场景中，常需要把来自不同来源的配置合并到一个“JSON风格”的对象中。目标是保留原始配置的同时添加自定义项，因此多采用不可变更新的思路。这段场景案例可以视为向JSON对象添加新属性的完整指南。
第一步，定义基础对象，例如默认主题、分页等。第二步，接收外部覆盖，将外部对象与基础对象合并。第三步，序列化用于网络传输，确保新的属性随对象一起被发送。
// 基础配置
const baseConfig = { theme: "dark", perPage: 20 };// 外部覆盖（如用户偏好）
const userConfig = { theme: "light", language: "en" };// 不修改原始对象，使用展开运算符实现不可变更新
const finalConfig = { ...baseConfig, ...userConfig };console.log(finalConfig); // { theme: 'light', perPage: 20, language: 'en' }// 如需发送到服务器
const payload = JSON.stringify(finalConfig);
console.log(payload); // {"theme":"light","perPage":20,"language":"en"}7. 兼容性与性能注意事项
7.1 浏览器差异与性能提示
在考虑向 JSON 对象添加新属性时，不同浏览器对对象属性扩展的实现细节可能略有差异，但主流浏览器的行为一致性较好。关注点包括写入成本、序列化成本与垃圾回收。
对于大对象和频繁更新的场景，推荐使用不可变更新模式，减少直接变更带来的副作用，并在需要时把要发送的数据通过序列化传输。
// 测试性能：简单属性扩展的成本较低
let obj = { a: 1 };
for (let i = 0; i < 1000; i++) {obj = { ...obj, i };
}
console.log(obj.i);