json如何新增删除键值对

轻松JSON：键值对的添加与删除技巧**

JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，因其简洁和易读性而被广泛应用于现代软件开发中，在处理JSON数据时，经常需要对其进行动态修改，其中最常见的就是新增和删除键值对，虽然JSON本身是一种数据格式，而非编程语言，但我们通常在编程语言（如JavaScript、Python等）中操作JSON对象或字典来实现这些功能，本文将以JavaScript为例,详细介绍如何高效地新增和删除JSON数据中的键值对。

JSON简介

在开始操作之前，简单回顾一下JSON的基本结构，JSON数据由键值对组成，键（key）必须是字符串，值（value）可以是字符串、数字、布尔值、数组、另一个JSON对象或null，多个键值对用逗号分隔，包裹在花括号中,形成一个JSON对象。

{
  "name": "张三",
  "age": 30,
  "isStudent": false,
  "courses": ["数学", "英语"]
}

在JavaScript中，我们可以直接使用这种对象字面量来表示JSON对象，或者通过JSON.parse()将JSON字符串转换为JavaScript对象进行操作。

如何新增键值对

向JSON对象（JavaScript对象）中新增键值对非常简单,主要有以下几种方法：

使用点表示法或方括号表示法直接赋值

这是最直观、最常用的方法，如果键不存在，则会创建该键并赋值；如果键已存在,则会更新对应的值。

示例代码：

let person = {
  "name": "张三",
  "age": 30
};
// 使用点表示法新增
person.city = "北京";
console.log(person);
// 输出: { name: '张三', age: 30, city: '北京' }
// 使用方括号表示法新增（适用于键名包含特殊字符或变量名的情况）
person["zip-code"] = "100001";
console.log(person);
// 输出: { name: '张三', age: 30, city: '北京', 'zip-code': '100001' }
// 新增一个复杂类型的值
person.skills = ["JavaScript", "Python"];
console.log(person);
// 输出: { name: '张三', age: 30, city: '北京', 'zip-code': '100001', skills: [ 'JavaScript', 'Python' ] }

使用 Object.assign() 方法

Object.assign() 方法用于将一个或多个源对象的所有可枚举属性复制到目标对象，如果目标对象中已有同名属性，则会被覆盖,我们可以利用它来新增键值对。

示例代码：

let person = {
  "name": "张三",
  "age": 30
};
let newProperties = {
  "city": "上海",
  "occupation": "工程师"
};
Object.assign(person, newProperties);
console.log(person);
// 输出: { name: '张三', age: 30, city: '上海', occupation: '工程师' }

如果不想修改原对象,可以创建一个空对象作为目标对象：

let person = { "name": "张三", "age": 30 };
let newProperties = { "city": "广州" };
let updatedPerson = Object.assign({}, person, newProperties);
console.log(updatedPerson); // { name: '张三', age: 30, city: '广州' }
console.log(person);       // { name: '张三', age: 30 } (原对象不变)

使用展开运算符 (Spread Operator, )

ES6 引入的展开运算符提供了一种更简洁的方式来合并对象并新增键值对。

示例代码：

let person = {
  "name": "张三",
  "age": 30
};
let newProperties = {
  "city": "深圳",
  "hobby": "阅读"
};
let updatedPerson = { ...person, ...newProperties };
console.log(updatedPerson);
// 输出: { name: '张三', age: 30, city: '深圳', hobby: '阅读' }
// 也可以直接新增一个键值对
let anotherUpdatedPerson = { ...person, "city": "杭州", "isMarried": false };
console.log(anotherUpdatedPerson);
// 输出: { name: '张三', age: 30, city: '杭州', isMarried: false }

如何删除键值对

从JSON对象（JavaScript对象）中删除键值对同样有多种方法：

使用 delete 操作符

delete 是最直接的方法，用于删除对象的属性，删除成功后，该属性将从对象中移除，delete 表达式会返回 true，如果尝试删除不存在的属性，也会返回 true（但不会报错）。

示例代码：

let person = {
  "name": "张三",
  "age": 30,
  "city": "北京"
};
console.log("删除前:", person);
// 输出: 删除前: { name: '张三', age: 30, city: '北京' }
delete person.age;
console.log("删除后:", person);
// 输出: 删除后: { name: '张三', city: '北京' }
// 尝试删除不存在的属性
delete person.nonExistentKey;
console.log("再次删除后:", person);
// 输出: 再次删除后: { name: '张三', city: '北京' }

注意： delete 操作可能会影响性能，特别是在处理大量数据时，因为它会在对象上直接操作，在需要高性能的场景下，可以考虑将不需要的属性设置为 undefined 或 null（但这与真正的删除有区别，属性名仍然存在）。

使用对象解构赋值 (Destructuring Assignment) 结合剩余属性 (Rest Operator)

这是一种更现代、更简洁的方式，尤其是在需要删除多个键值对时，我们可以提取出需要保留的属性，将其他属性“剩余”到一个新对象中，从而达到“删除”不需要属性的目的。

示例代码：

let person = {
  "name": "张三",
  "age": 30,
  "city": "北京",
  "occupation": "工程师",
  "hobby": "篮球"
};
// 假设我们要删除 'age' 和 'occupation'
const { age, occupation, ...updatedPerson } = person;
console.log(updatedPerson);
// 输出: { name: '张三', city: '北京', hobby: '篮球' }
console.log(age);       // 30
console.log(occupation); // "工程师"

这种方法不会修改原对象，而是创建了一个新对象，其中不包含被解构出去的属性,这在函数式编程和不可变数据模式中非常有用。

使用 Object.fromEntries() 和 Object.entries() 组合

这是一种稍微迂回但有效的方法，适用于更复杂的筛选场景，首先将对象转换为键值对数组，然后过滤掉不需要的键值对,最后再将过滤后的数组转换回对象。

示例代码：

let person = {
  "name": "张三",
  "age": 30,
  "city": "北京",
  "isStudent": false
};
// 删除 'age' 属性
const entries = Object.entries(person);
const filteredEntries = entries.filter(([key, value]) => key !== 'age');
const updatedPerson = Object.fromEntries(filteredEntries);
console.log(updatedPerson);
// 输出: { name: '张三', city: '北京', isStudent: false }

这种方法代码量稍多，但提供了极大的灵活性,可以在过滤过程中进行更复杂的条件判断。

注意事项

1. 区分JSON对象和JSON字符串：上述操作都是针对JavaScript对象（即JSON对象）进行的，如果数据是JSON字符串（例如从API获取的），需要先用JSON.parse()将其转换为JavaScript对象，操作完成后，如果需要JSON字符串，再用JSON.stringify()转换回去。

   let jsonString = '{"name": "张三", "age": 30}';
   let obj = JSON.parse(jsonString);
   obj.city = "上海";
   let newJsonString = JSON.stringify(obj);
   console.log(newJsonString); // '{"name":"张三","age":30,"city":"上海"}'

2. 不可变性：在实际开发中，尤其是在React等前端框架中，推荐使用不可变数据操作，这意味着不要直接修改原对象，而是创建一个新的对象。Object.assign({}, ...)、展开运算符以及对象解构赋值都是实现不可变操作的好方法。

3. 原型链属性：使用delete操作符可以删除对象自身的属性，但如果属性存在于原型链上，delete可能不会达到预期效果（在严格模式下会报错），通常我们操作的是对象自身的