json对象怎么操作

JSON对象怎么操作：从基础到实践的全面指南

初识JSON：什么是JSON对象？

JSON（JavaScript Object Notation，JavaScript对象表示法）是一种轻量级的数据交换格式，以易于阅读和编写的文本形式存储和传输数据，它的核心是JSON对象，本质上是“键值对”的集合，结构类似于JavaScript中的对象，但更简洁、规范。

一个典型的JSON对象示例如下：

{
  "name": "张三",
  "age": 25,
  "isStudent": false,
  "courses": ["数学", "英语"],
  "address": {
    "city": "北京",
    "district": "海淀区"
  }
}

键（Key）：必须是字符串，必须用双引号包裹（单引号会导致语法错误）。
值（Value）：可以是字符串、数字、布尔值、数组、对象、null，但不能是函数、undefined或JavaScript特有的对象（如Date、RegExp）。

创建JSON对象：从“无”到“有”

JSON对象的创建方式主要有两种：直接声明和动态构造。

直接声明JSON对象

直接使用花括号和键值对语法创建,适合静态数据：

const person = {
  "name": "李四",
  "age": 30,
  "hobbies": ["阅读", "跑步"]
};

注意：键可以省略双引号（但不符合严格JSON规范，仅JavaScript允许），例如{name: "李四"}也能运行，但推荐始终用双引号以保证兼容性。

动态构造JSON对象

通过JavaScript对象操作动态添加/修改键值对：

let user = {}; // 空对象
user.id = 1001; // 添加数字属性
user["username"] = "王五"; // 添加字符串属性（方括号语法可动态键名）
user["is-active"] = true; // 键名含特殊字符时，必须用方括号
// 动态键名示例
const dynamicKey = "role";
user[dynamicKey] = "admin"; // 动态赋值
console.log(user); 
// 输出：{ id: 1001, username: "王五", "is-active": true, role: "admin" }

读取JSON对象数据：精准获取键值

读取JSON对象数据主要通过“键名访问”，支持点语法和方括号语法。

点语法（）

适用于键名为合法标识符（无空格、特殊字符、数字开头）的情况：

const student = {
  "name": "赵六",
  "age": 20,
  "score": 95.5
};
console.log(student.name); // "赵六"
console.log(student.age);  // 20
console.log(student.score); // 95.5

方括号语法（`[]`）

键名含特殊字符（如、空格）或数字开头时，必须使用方括号；

键名可以是变量,支持动态访问：

const data = {
"user-info": { "name": "钱七" },
"1st-place": "冠军",
dynamicKey: "动态值"
};

// 特殊字符键名 console.log(data["user-info"].name); // "钱七" console.log(data["1st-place"]); // "冠军"

// 动态键名访问 const key = "dynamicKey"; console.log(data[key]); // "动态值"


#### 3. 安全读取：避免“未定义”错误  
直接访问不存在的键会返回`undefined`，可通过逻辑或`||`、空值合并运算符`??`或可选链操作符`?.`处理：  
```javascript
const obj = { name: "孙八" };
// 传统方式：|| 提供默认值（注意：0、false、""会被覆盖）
console.log(obj.age || 18); // 18（obj.age为undefined）
// 空值合并运算符：?? 仅对undefined和null生效
console.log(obj.age ?? 18); // 18
// 可选链：多层嵌套安全访问
const deepObj = { user: { address: { city: "上海" } } };
console.log(deepObj.user?.address?.city); // "上海"
console.log(deepObj.user?.contact?.phone); // undefined（不会报错）

修改JSON对象数据：更新与扩展

JSON对象是“可变的”，可直接修改已有键值或添加新键值。

修改已有属性

通过键名直接赋值,覆盖原值：

const product = {
  "id": 101,
  "name": "手机",
  "price": 2999
};
product.price = 2499; // 修改数字
product["name"] = "智能手机"; // 修改字符串
console.log(product); 
// 输出：{ id: 101, name: "智能手机", price: 2499 }

添加新属性

直接赋值不存在的键即可：

const product = { id: 101, name: "手机" };
product.price = 2499; // 添加数字属性
product["stock"] = 100; // 添加字符串属性
product.specs = { "ram": "8GB", "storage": "128GB" }; // 添加对象属性
console.log(product); 
// 输出：{ id: 101, name: "手机", price: 2499, stock: 100, specs: { ram: "8GB", storage: "128GB" } }

删除属性

使用delete操作符（会改变原对象）：

const car = { brand: "特斯拉", model: "Model 3", year: 2023 };
delete car.year; // 删除year属性
console.log(car); // { brand: "特斯拉", model: "Model 3" }
// 注意：delete无法删除原型链上的属性，且无法删除const声明的变量（只能删除对象属性）

遍历JSON对象：逐个处理键值

当需要操作对象的所有属性时,可通过循环遍历实现。

`for...in`循环

遍历对象“可枚举”的自有属性和继承属性（可通过hasOwnProperty过滤）：

const student = { name: "周九", age: 22, gender: "男" };
for (let key in student) {
  // 过滤掉继承属性（推荐）
  if (student.hasOwnProperty(key)) {
    console.log(`${key}: ${student[key]}`);
  }
}
// 输出：
// name: 周九
// age: 22
// gender: 男

`Object.keys()` + `forEach`

获取对象所有“自有可枚举属性”的键数组，再遍历数组（更推荐，避免继承属性干扰）：

const student = { name: "周九", age: 22, gender: "男" };
Object.keys(student).forEach(key => {
  console.log(`${key}: ${student[key]}`);
});
// 输出同上

`Object.entries()` + `for...of`

获取键值对数组（[key, value]形式），适合同时处理键和值：

const student = { name: "周九", age: 22, gender: "男" };
for (const [key, value] of Object.entries(student)) {
  console.log(`${key}: ${value}`);
}
// 输出同上

JSON对象与字符串转换：跨数据交换的核心

JSON对象主要用于JavaScript内部操作,而网络传输或存储时需转换为字符串（序列化），接收后再转换回对象（反序列化）。

序列化：对象 → 字符串（`JSON.stringify`）

const user = {
  name: "吴十",
  age: 28,
  hobbies: ["编程", "旅行"],
  address: null
};
// 基本序列化
const jsonString = JSON.stringify(user);
console.log(jsonString); 
// 输出：{"name":"吴十","age":28,"hobbies":["编程","旅行"],"address":null}
// 格式化输出（美化）
const prettyJson = JSON.stringify(user, null, 2); // 参数2：过滤函数，参数3：缩进空格
console.log(prettyJson); 
/*
{
  "name": "吴十",
  "age": 28,
  "hobbies": ["编程", "旅行"],
  "address": null
}
*/
// 过滤属性（只保留name和age）
const filteredJson = JSON.stringify(user, ["name", "age"]);
console

欧易欧易欧易欧易下载欧易app 欧易下载欧易app

正文

json对象怎么操作