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 数组的常见操作场景
在实际开发中,我们通常会遇到以下操作需求:
- 创建 JSON 数组(从 JavaScript 数组转换为 JSON 数组,或直接构造 JSON 数组);
- 解析 JSON 数组(将 JSON 格式的字符串转换为 JavaScript 数组);
- 遍历 JSON 数组(访问每个元素进行处理);
- 修改 JSON 数组(添加、删除、更新元素);
- 筛选与查询 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);



还没有评论,来说两句吧...