js怎么给json赋值

JavaScript 中给 JSON 赋值：从基础到实践**

在 JavaScript 开发中，我们经常需要处理 JSON（JavaScript Object Notation）数据，虽然 JSON 本身是一种数据交换格式，但在 JS 中，我们通常将其理解为“对象字面量”（Object Literal）。“给 JSON 赋值”这个操作，更准确地说，是“给 JavaScript 对象的属性赋值”，本文将详细讲解在 JavaScript 中如何给对象（JSON）赋值，包括基本方法、动态赋值、深层赋值以及注意事项。

理解 JSON 与 JavaScript 对象

我们需要明确 JSON 和 JavaScript 对象的关系。

JSON：是一种轻量级的数据交换格式，它采用完全独立于编程语言的文本格式来存储和表示数据，其语法规则是：
- 数据以键值对的形式存在。
- 键名必须使用双引号包裹。
- 值可以是字符串（双引号）、数字、布尔值、null、数组或对象（遵循 JSON 规范）。
- 数据之间由逗号分隔。
- 花括号保存对象。
- 方括号 [] 保存数组。
JavaScript 对象：是 JavaScript 语言的一种数据类型，用于存储键值对的集合，其语法与 JSON 类似，但更灵活：
- 键名可以是标识符（可以不用引号，或使用单引号、双引号）。
- 值可以是 JavaScript 任何合法的数据类型（包括函数、Date 对象、undefined 等）。
- 属性之间可以用逗号或分号分隔。

**JSON 是 JS 对象的一个子集，并且是更严格、更规范的数据表示形式，在 JS 中，我们直接操作的是 JS 对象，而 JSON 常用于数据传输（如 JSON.stringify() 和 JSON.parse()）。

给 JSON（JS 对象）赋值的基本方法

假设我们有一个 JSON 对象（实际上是 JS 对象）：

let myJson = {
  name: "张三",
  age: 30,
  city: "北京"
};

直接赋值（修改已有属性）

如果对象已经存在某个属性,我们可以直接通过属性名赋值来修改它。

myJson.name = "李四"; // 修改 name 属性
myJson.age = 31;     // 修改 age 属性
console.log(myJson);
// 输出: { name: '李四', age: 31, city: '北京' }

添加新属性

如果对象不存在某个属性,通过赋值会自动添加该属性。

myJson.gender = "男"; // 添加 gender 属性
myJson["job"] = "工程师"; // 也可以使用方括号表示法添加
console.log(myJson);
// 输出: { name: '李四', age: 31, city: '北京', gender: '男', job: '工程师' }

使用点表示法（Dot Notation）

适用于属性名是合法的 JavaScript 标识符（由字母、数字、下划线、美元符号组成，且不以数字开头）的情况。

myJson.name = "王五";

使用方括号表示法（Bracket Notation）

适用于属性名不是合法标识符（包含空格、连字符等）或者属性名存储在变量中的情况。

let propertyName = "country";
myJson[propertyName] = "中国"; // 使用变量作为属性名
myJson["zip-code"] = "100000"; // 属性名包含连字符
console.log(myJson);
// 输出: { name: '王五', age: 31, city: '北京', gender: '男', job: '工程师', country: '中国', 'zip-code': '100000' }

动态赋值与计算属性名

我们需要根据动态的值来设置属性名。

let dynamicKey = "email";
let dynamicValue = "zhangsan@example.com";
myJson[dynamicKey] = dynamicValue; // 动态赋值
console.log(myJson);
// 输出: { name: '王五', age: 31, city: '北京', gender: '男', job: '工程师', country: '中国', 'zip-code': '100000', email: 'zhangsan@example.com' }

在 ES6 中，我们还可以在对象字面量中使用计算属性名：

let prefix = "user_";
let id = 123;
let anotherJson = {
  [prefix + "id"]: id,
  [prefix + "name"]: "赵六"
};
console.log(anotherJson);
// 输出: { user_id: 123, user_name: '赵六' }

给嵌套 JSON 赋值

JSON 对象中包含其他对象或数组（即嵌套结构），我们需要逐层访问才能赋值。

let nestedJson = {
  user: {
    name: "钱七",
    contact: {
      email: "qianqi@example.com",
      phone: "13800138000"
    }
  },
  hobbies: ["reading", "swimming"]
};

修改嵌套对象属性

nestedJson.user.name = "孙八"; // 修改嵌套 name
nestedJson.user.contact.email = "sunba@example.com"; // 修改深层嵌套 email
console.log(nestedJson.user);
// 输出: { name: '孙八', contact: { email: 'sunba@example.com', phone: '13800138000' } }

添加嵌套对象属性

nestedJson.user.contact.address = "上海市浦东新区"; // 添加深层属性
nestedJson.hobbies.push("coding"); // 向数组添加元素
console.log(nestedJson);
// 输出: { user: { name: '孙八', contact: { email: 'sunba@example.com', phone: '13800138000', address: '上海市浦东新区' } }, hobbies: [ 'reading', 'swimming', 'coding' ] }

使用可选链操作符 (Optional Chaining ) (ES2020+)

当不确定深层属性是否存在时,可选链可以避免错误。

// 假设 contact 可能不存在
let newJson = {
  user: {
    name: "周九"
  }
};
// 安全地访问并赋值，contact 不存在，不会报错
newJson.user?.contact?.email = "zhoujiu@example.com"; // 这实际上不会添加 email，因为 contact 是 undefined
// 如果想确保添加，需要先判断或创建
if (!newJson.user.contact) {
  newJson.user.contact = {};
}
newJson.user.contact.email = "zhoujiu@example.com";
console.log(newJson);
// 输出: { user: { name: '周九', contact: { email: 'zhoujiu@example.com' } } }

注意事项

区分赋值与创建新对象：
- myJson.name = "新值" 是修改/添加 myJson 对象的属性。
- let myJson = { ... } 是创建一个新的对象，并将其引用赋给 myJson 变量，如果之前 myJson 有引用，新的赋值会覆盖旧的引用。

不可变性：

有时候我们希望保持原对象不变,创建一个修改后的新对象，这时可以使用展开运算符 () 进行浅拷贝后修改：

let originalJson = { a: 1, b: { c: 2 } };
let newJson = { ...originalJson, a: 3 }; // 浅拷贝，修改顶层属性
console.log(newJson); // { a: 3, b: { c: 2 } }
console.log(originalJson); // { a: 1, b: { c: 2 } }
// 注意：对于嵌套对象，浅拷贝只是复制了引用，修改嵌套对象会影响原对象
let newJson2 = { ...originalJson, b: { ...originalJson.b, c: 4 } }; // 深层修改需要深拷贝或逐层展开
console.log(newJson2); // { a: 1, b: { c: 4 } }
console.log(originalJson.b); // { c: 2 } (这里 originalJson.b 未变，因为我们对 b 进行了展开)