js如何创建json数组

从零开始：JavaScript 中如何创建和使用 JSON 数组

在现代 Web 开发中，JSON（JavaScript Object Notation）已经成为数据交换的事实标准，它轻量、易于人阅读和编写，也易于机器解析和生成，JSON 数组是存储和操作列表形式数据（如用户列表、商品目录、文章评论等）的核心数据结构，本文将详细讲解在 JavaScript 中如何创建 JSON 数组，并介绍相关的常用操作。

什么是 JSON 数组？

在代码之前,我们先明确一下 JSON 数组的定义。

• JSON 数组：在 JSON 格式中，数组是由方括号 [] 包围的一组值，这些值可以是字符串、数字、布尔值、null，甚至是另一个 JSON 对象或 JSON 数组，值与值之间用逗号 分隔。

一个简单的 JSON 数组示例：

[
  "苹果",
  "香蕉",
  "橙子"
]

一个包含 JSON 对象的数组示例（这在实际应用中更为常见）：

[
  {
    "id": 1,
    "name": "张三",
    "email": "zhangsan@example.com"
  },
  {
    "id": 2,
    "name": "李四",
    "email": "lisi@example.com"
  }
]

在 JavaScript 中创建 JSON 数组

在 JavaScript 中，创建 JSON 数组非常直接，因为 JSON 本身就是 JavaScript 的一个子集，JavaScript 中的字面量数组和 JSON 数组的语法几乎完全相同。

使用数组字面量（最常用）

这是最简单、最直观的方法，直接使用方括号 [] 来定义数组。

示例 1：创建一个简单的字符串数组

// 创建一个包含水果名称的数组
const fruits = ["苹果", "香蕉", "橙子"];
console.log(fruits); // 输出: ["苹果", "香蕉", "橙子"]
console.log(fruits[0]); // 输出: "苹果" (通过索引访问元素)

示例 2：创建一个包含对象的数组（模拟 JSON 数据） 这是模拟从服务器接收到的 JSON 数据最常见的方式，每个对象代表一个独立的实体。

// 创建一个用户列表数组
const users = [
  {
    "userId": 101,
    "username": "dev_user",
    "isActive": true
  },
  {
    "userId": 102,
    "username": "designer_pro",
    "isActive": false
  }
];
console.log(users);
// 输出:
// [
//   { userId: 101, username: 'dev_user', isActive: true },
//   { userId: 102, username: 'designer_pro', isActive: false }
// ]

注意：虽然 JavaScript 对象的属性名可以用引号也可以不用，但在严格的 JSON 格式中，属性名必须是双引号包裹的字符串，在 JavaScript 中，我们通常省略引号以简化代码，但为了保持与 JSON 的一致性，尤其是在处理字符串形式的 JSON 时，记住这一点很重要。

使用 new Array() 构造函数

你也可以使用 JavaScript 的 Array 构造函数来创建数组，但这种方法不常用，因为它有时会产生意想不到的行为。

// 创建一个长度为 3 的空数组
const arr1 = new Array(3); // 结果: [empty × 3]
// 创建一个包含初始元素的数组
const arr2 = new Array("苹果", "香蕉", "橙子");
console.log(arr2); // 输出: ["苹果", "香蕉", "橙子"]

警告：当传递一个数字给 new Array() 时，它会创建一个指定长度的空数组，而不是包含该数字的数组。new Array(5) 会创建 [empty × 5]，而不是 [5]。强烈推荐使用数组字面量 []，因为它更清晰、更安全。

如何操作 JSON 数组？

创建数组后,我们通常需要对它进行增、删、改、查等操作。

访问元素

使用索引（从 0 开始）来访问数组中的元素。

const users = [
  { id: 1, name: "张三" },
  { id: 2, name: "李四" }
];
console.log(users[0].name); // 输出: "张三"

添加元素

• push()：在数组末尾添加一个或多个元素。

  users.push({ id: 3, name: "王五" });
  console.log(users); // 王五被添加到了最后

• unshift()：在数组开头添加一个或多个元素。

  users.unshift({ id: 0, name: "赵六" });
  console.log(users); // 赵六被添加到了最前面

删除元素

• pop()：删除并返回数组的最后一个元素。

  const lastUser = users.pop();
  console.log(lastUser); // 输出: { id: 3, name: "王五" }
  console.log(users); // 王五被移除了

• shift()：删除并返回数组的第一个元素。

  const firstUser = users.shift();
  console.log(firstUser); // 输出: { id: 0, name: "赵六" }
  console.log(users); // 赵六被移除了

• splice()：最强大的删除/插入方法，可以删除任意位置的元素。

  // 删除索引为 1 的一个元素
  const removedUser = users.splice(1, 1);
  console.log(removedUser); // 输出: [{ id: 2, name: "李四" }]
  console.log(users); // 李四被移除了

遍历数组

使用 forEach 或 for...of 循环来遍历数组中的每一个元素。

const products = [
  { id: 1, name: "笔记本电脑", price: 5999 },
  { id: 2, name: "无线鼠标", price: 99 }
];
// 使用 forEach
products.forEach(product => {
  console.log(`商品: ${product.name}, 价格: ¥${product.price}`);
});
// 使用 for...of
for (const product of products) {
  console.log(`商品: ${product.name}, 价格: ¥${product.price}`);
}

JSON 字符串与 JavaScript 数组的转换

有时,我们从服务器获取的数据是 JSON 格式的字符串，需要将其转换为 JavaScript 数组才能进行操作，反之，我们也需要将 JavaScript 数组转换为 JSON 字符串才能发送给服务器。

将 JSON 字符串解析为 JavaScript 数组

使用 JSON.parse() 方法。

const jsonString = '[{"id":1,"name":"张三"},{"id":2,"name":"李四"}]';
const usersArray = JSON.parse(jsonString);
console.log(usersArray);
// 输出: [{ id: 1, name: '张三' }, { id: 2, name: '李四' }]
console.log(usersArray[0].name); // 现在可以像普通 JS 数组一样操作了

将 JavaScript 数组转换为 JSON 字符串

使用 JSON.stringify() 方法。

const usersArray = [
  { id: 1, name: "张三" },
  { id: 2, name: "李四" }
];
const jsonString = JSON.stringify(usersArray);
console.log(jsonString);
// 输出: '[{"id":1,"name":"张三"},{"id":2,"name":"李四"}]'

JSON.stringify() 还可以接收另外两个参数，用于格式化输出，使 JSON 字符串更具可读性。

const prettyJsonString = JSON.stringify(usersArray, null, 2); // 缩进 2 个空格
console.log(prettyJsonString);
// 输出 (格式化后):
// [
//   {
//     "id": 1,
//     "name": "张三"
//   },
//   {
//     "id": 2,
//     "name": "李四"
//   }
// ]

在 JavaScript 中创建和使用 JSON 数组是前端开发的一项基础技能。

1. 创建：最简单的方式是使用数组字面量 []，它直观且高效。
2. 操作：JavaScript 提供了丰富的数组方法（如 push, pop, map, filter 等）来方便地对数组进行增、删、改、查和遍历。
3. 转换：JSON.parse() 和 JSON.stringify() 是连接字符串形式 JSON 和 JavaScript 对