js怎么修改json的键值

JavaScript 浅出：如何修改 JSON 对象的键值

在 Web 开发中，JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，无处不在，我们经常需要从服务器获取 JSON 数据，然后在客户端进行处理，其中最常见的操作之一就是修改其中的键值，本文将全面、地探讨在 JavaScript 中修改 JSON 对象键值的多种方法，从基础的直接赋值到更复杂的动态键操作,并附上清晰的示例。

核心概念：JSON vs. JavaScript 对象

在开始之前，我们必须明确一个非常重要的概念：JSON 和 JavaScript 对象不是一回事。

• JSON：是一种纯文本数据格式，它有严格的语法规则，属性名必须使用双引号 ,不能有尾随逗号等。
• JavaScript 对象 (Object)：是 JavaScript 语言中的一种数据结构，它的语法更灵活，属性名可以使用单引号、双引号或不加引号（如果符合标识符规则）,可以有尾随逗号。

在实际操作中，我们通常所说的“修改 JSON”，其实是指修改一个已经解析为 JavaScript 对象的 JSON 数据。JSON.parse() 方法可以将 JSON 字符串转换成一个 JavaScript 对象，之后我们就可以用 JS 的语法来操作它了。

// 这是一个 JSON 字符串
const jsonString = '{"name": "Alice", "age": 30, "city": "New York"}';
// 使用 JSON.parse() 将其转换为 JavaScript 对象
const jsObject = JSON.parse(jsonString);
// jsObject 是一个可以自由操作的 JS 对象
console.log(jsObject); // 输出: { name: 'Alice', age: 30, city: 'New York' }

基础方法：直接修改键值

这是最直接、最常用的方法，通过 对象.键名 或 对象['键名'] 的方式来访问并重新赋值。

方法 1：使用点表示法 ()

当键名是一个合法的 JavaScript 标识符（不包含空格或特殊字符，且不以数字开头）时,可以使用点表示法。

const user = { name: "Bob", age: 25 };
// 修改 age 的值
user.age = 26;
// 添加一个新的键值对
user.country = "Canada";
console.log(user);
// 输出: { name: 'Bob', age: 26, country: 'Canada' }

方法 2：使用方括号表示法 ([])

方括号表示法更灵活,适用于以下情况：

1. 键名包含空格或特殊字符（如 user-info）。
2. 键名是一个变量。
3. 键名是数字。

const product = { "product-id": "A-101", price: 99.99 };
// 1. 修改包含特殊字符的键值
product["product-id"] = "A-102";
// 2. 使用变量来修改键值
const keyToUpdate = 'price';
const newPrice = 89.50;
product[keyToUpdate] = newPrice;
// 3. 修改数字键值
const scores = { 1: 88, 2: 92 };
scores[1] = 95;
console.log(product);
// 输出: { 'product-id': 'A-102', price: 89.5 }
console.log(scores);
// 输出: { '1': 95, '2': 92 }

进阶操作：动态修改键名

我们可能需要根据逻辑来修改或重命名对象的键名，由于 JavaScript 对象本身没有内置的“重命名键”方法，我们需要通过“创建新对象”或“删除旧键并添加新键”的方式来实现。

方法 1：创建一个新对象（推荐）

这是最清晰、最安全的方法，尤其适用于需要保留原始对象不变的场景，使用 Object.keys() 遍历原始对象,并构建一个新对象。

const oldData = { firstName: "Charlie", last_name: "Brown" };
const newData = {};
// 遍历旧对象的键
Object.keys(oldData).forEach(key => {
  // 根据规则生成新键名
  const newKey = key === 'firstName' ? 'name' : key.replace('_', '-');
  // 将旧值赋给新键
  newData[newKey] = oldData[key];
});
console.log(newData);
// 输出: { name: 'Charlie', 'last-name': 'Brown' }
console.log(oldData); // 原始对象保持不变
// 输出: { firstName: 'Charlie', last_name: 'Brown' }

方法 2：原地修改（不推荐，除非有特殊需求）

这种方法会直接修改原始对象，它分为两步：先将旧键的值赋给新键,然后删除旧键。

const car = { make: "Toyota", model: "Corolla", "year-made": 2020 };
// 1. 将 'make' 重命名为 'brand'
car.brand = car.make; // 创建新键 'brand' 并赋值
delete car.make;     // 删除旧键 'make'
// 2. 将 'year-made' 重命名为 'year'
car.year = car['year-made'];
delete car['year-made'];
console.log(car);
// 输出: { brand: 'Toyota', model: 'Corolla', year: 2020 }

注意：delete 操作会改变原始对象的结构，在某些情况下可能会导致性能问题或意外的副作用,因此通常不推荐使用。

处理嵌套 JSON 对象

当 JSON 对象包含多层嵌套时,修改键值需要逐层访问。

const company = {
  name: "Tech Corp",
  address: {
    street: "123 Main St",
    city: "San Francisco"
  },
  employees: [
    { id: 1, name: "David" },
    { id: 2, name: "Eve" }
  ]
};
// 1. 修改嵌套对象的属性
company.address.city = "San Jose";
// 2. 修改数组内对象的属性
company.employees[0].name = "Daniel";
console.log(company);
/*
输出:
{
  name: 'Tech Corp',
  address: { street: '123 Main St', city: 'San Jose' },
  employees: [ { id: 1, name: 'Daniel' }, { id: 2, name: 'Eve' } ]
}
*/

使用 ES6+ 特性：Object.entries() 和展开运算符 ()

对于更复杂的转换，结合 ES6+ 的新特性可以让代码更简洁、更函数式。

使用 Object.entries() 和 map

Object.entries() 将对象转换为一个 [key, value] 数组，我们可以使用 map 方法来修改这个数组,最后再将其转换回对象。

const userProfile = { userName: "user123", fullName: "Frank Miller" };
const updatedProfile = Object.entries(userProfile).map(([key, value]) => {
  // 将 userName 重命名为 login
  const newKey = key === 'userName' ? 'login' : key;
  return [newKey, value];
}).reduce((acc, [key, value]) => {
  acc[key] = value;
  return acc;
}, {});
console.log(updatedProfile);
// 输出: { login: 'user123', fullName: 'Frank Miller' }

使用展开运算符 ()

展开运算符非常适合用于合并对象或覆盖特定属性。

const defaults = { theme: 'light', notifications: true };
const userSettings = { theme: 'dark', language: 'zh-CN' };
// 创建一个新对象，用 userSettings 覆盖 defaults 中的同名属性
const finalSettings = { ...defaults, ...userSettings };
console.log(finalSettings);
// 输出: { theme: 'dark', notifications: true, language: 'zh-CN' }

在 JavaScript 中修改 JSON（即 JS 对象）的键值，方法多种多样,选择哪种方法取决于具体的需求：