JS操作JSON总结

封面图 • 2025-09-24 • JavaScript

在JavaScript中，操作JSON（JavaScript Object Notation）是一种非常常见的需求。JSON 是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。以下是关于如何在 JavaScript 中操作 JSON 的一些总结：

### 1. JSON 数据的创建

#### 1.1 使用对象字面量创建 JSON
```javascript
let obj = {
    name: "Alice",
    age: 25,
    hobbies: ["reading", "traveling"]
};
```

#### 1.2 将普通对象转换为 JSON 字符串
可以使用 `JSON.stringify()` 方法将 JavaScript 对象转换为 JSON 字符串。
```javascript
let jsonString = JSON.stringify(obj);
console.log(jsonString); // 输出: {"name":"Alice","age":25,"hobbies":["reading","traveling"]}
```

### 2. JSON 数据的解析

#### 2.1 将 JSON 字符串转换为 JavaScript 对象
可以使用 `JSON.parse()` 方法将 JSON 字符串转换为 JavaScript 对象。
```javascript
let parsedObj = JSON.parse(jsonString);
console.log(parsedObj); 
// 输出: { name: 'Alice', age: 25, hobbies: [ 'reading', 'traveling' ] }
```

### 3. 操作 JSON 数据

#### 3.1 访问 JSON 数据
可以通过点符号或方括号访问 JSON 数据中的值。
```javascript
console.log(parsedObj.name); // 输出: Alice
console.log(parsedObj["age"]); // 输出: 25
```

#### 3.2 修改 JSON 数据
可以直接修改 JSON 数据中的值。
```javascript
parsedObj.age = 26;
console.log(parsedObj); 
// 输出: { name: 'Alice', age: 26, hobbies: [ 'reading', 'traveling' ] }
```

#### 3.3 添加新的键值对
可以向 JSON 数据中添加新的键值对。
```javascript
parsedObj.city = "New York";
console.log(parsedObj); 
// 输出: { name: 'Alice', age: 26, hobbies: [ 'reading', 'traveling' ], city: 'New York' }
```

#### 3.4 删除键值对
可以使用 `delete` 操作符删除 JSON 数据中的键值对。
```javascript
delete parsedObj.city;
console.log(parsedObj); 
// 输出: { name: 'Alice', age: 26, hobbies: [ 'reading', 'traveling' ] }
```

### 4. 遍历 JSON 数据

#### 4.1 遍历对象的键值对
可以使用 `for...in` 循环遍历 JSON 对象的属性。
```javascript
for (let key in parsedObj) {
    if (parsedObj.hasOwnProperty(key)) {
        console.log(`${key}: ${parsedObj[key]}`);
    }
}
// 输出:
// name: Alice
// age: 26
// hobbies: reading,traveling
```

#### 4.2 遍历数组
如果 JSON 数据中包含数组，可以使用 `for` 或 `forEach` 遍历数组。
```javascript
parsedObj.hobbies.forEach(hobby => {
    console.log(hobby);
});
// 输出:
// reading
// traveling
```

### 5. JSON 数据的嵌套

#### 5.1 创建嵌套的 JSON 数据
```javascript
let nestedJson = {
    person: {
        name: "Bob",
        age: 30,
        address: {
            city: "Los Angeles",
            zipCode: "90001"
        }
    },
    hobbies: ["sports", "music"]
};
```

#### 5.2 访问嵌套数据
可以通过多层点符号访问嵌套的 JSON 数据。
```javascript
console.log(nestedJson.person.name); // 输出: Bob
console.log(nestedJson.person.address.city); // 输出: Los Angeles
```

### 6. JSON 数据的安全性

#### 6.1 防止恶意代码注入
在使用 `eval()` 解析 JSON 数据时要小心，因为可能会执行恶意代码。推荐使用 `JSON.parse()` 来安全地解析 JSON 数据。

```javascript
// 不推荐的方式：可能会有安全风险
let unsafeJson = '{ name: "Eve", age: 35 }';
let user = eval('(' + unsafeJson + ')');

// 推荐的方式：更安全
let safeJson = '{"name":"Eve","age":35}';
let safeUser = JSON.parse(safeJson);
```

### 7. JSON 的实际应用场景

#### 7.1 发送和接收 HTTP 请求
在前端开发中，通常会使用 `fetch` 或 `XMLHttpRequest` 来发送 HTTP 请求，并且服务器返回的数据通常是 JSON 格式。可以使用 `JSON.parse()` 将响应数据解析为 JavaScript 对象。

```javascript
fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));
```

#### 7.2 存储和传输数据
JSON 是一种轻量级的数据交换格式，常用于存储和传输数据。例如，可以将用户数据存储为 JSON 文件，或者通过 AJAX 请求将数据发送到服务器。

### 总结
- 使用 `JSON.stringify()` 将 JavaScript 对象转换为 JSON 字符串。
- 使用 `JSON.parse()` 将 JSON 字符串转换为 JavaScript 对象。
- 可以通过点符号或方括号访问 JSON 数据。
- 可以使用 `for...in` 循环或 `forEach` 遍历 JSON 数据。
- 注意 JSON 数据的安全性，避免使用 `eval()` 来解析 JSON 数据。

希望这些总结对你有所帮助！