js如何json数组

JavaScript 中如何操作 JSON 数组：从基础到实用技巧

在 JavaScript 开发中，JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，几乎无处不在，而 JSON 数组（即符合 JSON 格式的数组）更是前端与后端数据交互、本地数据处理的核心结构，本文将从 JSON 数组的基础概念出发，详细讲解如何在 JavaScript 中创建、解析、遍历、修改、筛选 JSON 数组，并总结常见注意事项，助你 JSON 数组的操作技巧。

什么是 JSON 数组？

JSON 数组是符合 JSON 规范的数组结构，本质上是值（value）的有序集合，这些值可以是字符串、数字、布尔值、null、对象，甚至是嵌套的数组，JSON 数组的语法与 JavaScript 原生数组高度相似，但必须遵循 JSON 的严格规范：

• 数组用方括号 [] 表示，元素之间用逗号 分隔；
• 字符串必须用双引号 包裹（单引号不符合 JSON 规范）；
• 键名（如果元素是对象）也必须用双引号包裹。

示例：

[
  { "id": 1, "name": "Alice", "age": 25, "hobbies": ["reading", "coding"] },
  { "id": 2, "name": "Bob", "age": 30, "hobbies": ["sports", "music"] },
  { "id": 3, "name": "Charlie", "age": 28, "isStudent": false }
]

JSON 数组的常见操作场景

在实际开发中,我们通常会遇到以下操作需求：

1. 创建 JSON 数组（从 JavaScript 数组转换为 JSON 数组，或直接构造 JSON 数组）；
2. 解析 JSON 数组（将 JSON 格式的字符串转换为 JavaScript 数组）；
3. 遍历 JSON 数组（访问每个元素进行处理）；
4. 修改 JSON 数组（添加、删除、更新元素）；
5. 筛选与查询 JSON 数组（根据条件过滤元素或查找特定数据）。

详细操作指南

创建 JSON 数组

JSON 数组的创建通常有两种方式：将 JavaScript 数组/对象转换为 JSON 格式，或直接构造符合 JSON 规范的字符串/对象。

（1）从 JavaScript 数组/对象转换为 JSON 数组

JavaScript 提供了 JSON.stringify() 方法，可将 JavaScript 对象或数组转换为 JSON 格式的字符串，如果直接操作 JavaScript 数组（其元素符合 JSON 规范），本质上已经是“JSON 数组”的等价结构（前端开发中常混用，JSON 是字符串格式）。

示例：

// JavaScript 数组（元素为符合 JSON 规范的对象）
const jsArray = [
  { id: 1, name: "Alice", age: 25 },
  { id: 2, name: "Bob", age: 30 }
];
// 转换为 JSON 字符串（严格意义的 JSON 数组）
const jsonArrayString = JSON.stringify(jsArray);
console.log(jsonArrayString);
// 输出: '[{"id":1,"name":"Alice","age":25},{"id":2,"name":"Bob","age":30}]'
// 如果不需要字符串，直接操作 jsArray 即可（前端通常视为 JSON 数组）
console.log(jsArray[0].name); // 输出: Alice

（2）直接构造 JSON 数组

• 构造 JavaScript 数组（推荐）：直接创建数组，元素按 JSON 规范书写（字符串用双引号）。

  const jsonArray = [
    { "productId": "A001", "price": 99.9, "inStock": true },
    { "productId": "B002", "price": 149.0, "inStock": false }
  ];

• 构造 JSON 字符串：如果需要直接使用 JSON 字符串（如从 API 响应中获取），需确保格式正确。

  const jsonString = '[{"productId":"A001","price":99.9,"inStock":true}]';

解析 JSON 数组

当从后端 API 或本地存储中获取 JSON 数组时，通常以字符串形式存在，需使用 JSON.parse() 将其转换为 JavaScript 数组，才能进行操作。

语法：

const jsArray = JSON.parse(jsonString);

示例：

const jsonString = '[{"id":1,"name":"Alice"},{"id":2,"name":"Bob"}]';
const parsedArray = JSON.parse(jsonString);
console.log(parsedArray); // 输出: [{id:1,name:"Alice"}, {id:2,name:"Bob"}]
console.log(parsedArray[0].name); // 输出: Alice

注意事项：

• JSON.parse() 要求数据是有效的 JSON 格式，否则会抛出 SyntaxError。

  const invalidString = "['id':1]"; // 错误：JSON 键名必须用双引号
  JSON.parse(invalidString); // 报错: SyntaxError: Unexpected token ' in JSON

遍历 JSON 数组

遍历是处理 JSON 数组最常用的操作，以下是几种常见方法：

（1）for 循环（基础遍历）

通过索引逐个访问元素,适合需要索引的场景。

const jsonArray = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" }
];
for (let i = 0; i < jsonArray.length; i++) {
  console.log(`ID: ${jsonArray[i].id}, Name: ${jsonArray[i].name}`);
}
// 输出:
// ID: 1, Name: Alice
// ID: 2, Name: Bob

（2）for...of 循环（推荐，简洁直观）

直接遍历数组元素,无需关心索引。

for (const item of jsonArray) {
  console.log(`ID: ${item.id}, Name: ${item.name}`);
}
// 输出同上

（3）forEach() 方法（函数式遍历）

对每个元素执行回调函数,适合需要额外操作（如修改元素）的场景。

jsonArray.forEach(item => {
  console.log(`ID: ${item.id}, Name: ${item.name}`);
});
// 输出同上
// 修改元素（注意：直接修改原数组）
jsonArray.forEach(item => {
  item.name = item.name.toUpperCase();
});
console.log(jsonArray); // 输出: [{id:1,name:"ALICE"}, {id:2,name:"BOB"}]

（4）for...in 循环（不推荐用于数组）

for...in 遍历的是对象的可枚举属性（包括原型链上的属性），用于数组可能产生意外结果，建议仅用于对象遍历。

修改 JSON 数组

JSON 数组的修改本质上是 JavaScript 数组的操作，包括添加、删除、更新元素。

（1）添加元素

• push()：在数组末尾添加一个或多个元素（修改原数组）。

  jsonArray.push({ id: 3, name: "Charlie" });
  console.log(jsonArray);
  // 输出: [{id:1,name:"ALICE"}, {id:2,name:"BOB"}, {id:3,name:"Charlie"}]

• unshift()：在数组开头添加元素（修改原数组）。

  jsonArray.unshift({ id: 0, name: "David" });
  console.log(jsonArray);
  // 输出: [{id:0,name:"David"}, ...]

• splice()：在指定位置添加元素（修改原数组）。

  jsonArray.splice(1, 0, { id: 1.5, name: "Eve" }); // 在索引 1 处插入
  console.log(jsonArray);

（2）删除元素

• pop()：删除数组最后一个元素（修改原数组）。

  jsonArray.pop(); // 删除 {id:3,name:"Charlie"}

• shift()：删除数组第一个元素（修改原数组）。

  jsonArray.shift(); // 删除 {id:0,name:"David"}

• splice()：删除指定位置的元素（修改原数组）。

  jsonArray.splice(1, 1); // 删除索引 1 处的元素（{id:1.5,name:"Eve"}）

（3）更新元素

通过索引直接修改元素值（修改原数组）。

jsonArray[0].name = "Alice Updated"; // 修改第一个元素的 name
console.log(jsonArray);

筛选