js中如何生成json数组

JavaScript中如何生成JSON数组

在JavaScript开发中,生成JSON数组是一项常见且重要的技能，JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，也易于机器解析和生成，本文将详细介绍在JavaScript中生成JSON数组的多种方法，并提供实际示例。

直接创建JSON数组

最简单的方法是直接使用JavaScript数组字面量语法创建数组,然后将其转换为JSON格式。

// 创建JavaScript数组
let jsArray = [
  { id: 1, name: "张三", age: 25 },
  { id: 2, name: "李四", age: 30 },
  { id: 3, name: "王五", age: 28 }
];
// 转换为JSON字符串
let jsonArray = JSON.stringify(jsArray);
console.log(jsonArray);

输出结果：

[
  {"id":1,"name":"张三","age":25},
  {"id":2,"name":"李四","age":30},
  {"id":3,"name":"王五","age":28}
]

使用循环动态生成JSON数组

当需要根据条件或数据源动态生成JSON数组时,可以使用循环结构。

let employees = [];
let employeeCount = 3;
for (let i = 1; i <= employeeCount; i++) {
  employees.push({
    id: i,
    name: `员工${i}`,
    department: `部门${Math.ceil(i/2)}`
  });
}
let jsonEmployees = JSON.stringify(employees);
console.log(jsonEmployees);

从现有数据结构生成JSON数组

在实际应用中,我们经常需要从现有数据结构（如DOM元素、API响应等）生成JSON数组。

示例1：从DOM元素生成JSON数组

// 假设有以下HTML结构
/*
<div class="item" data-id="1">商品1</div>
<div class="item" data-id="2">商品2</div>
<div class="item" data-id="3">商品3</div>
*/
let items = document.querySelectorAll('.item');
let itemsArray = Array.from(items).map(item => ({
  id: item.dataset.id,
  name: item.textContent
}));
let jsonItems = JSON.stringify(itemsArray);
console.log(jsonItems);

示例2：从API响应生成JSON数组

// 假设这是从API获取的数据
let apiResponse = {
  code: 200,
  message: "success",
  data: [
    { userId: 1, title: "任务1" },
    { userId: 2, title: "任务2" },
    { userId: 3, title: "任务3" }
  ]
};
// 直接使用data字段作为JSON数组
let jsonTasks = JSON.stringify(apiResponse.data);
console.log(jsonTasks);

使用函数封装JSON数组生成逻辑

为了提高代码复用性,可以将生成JSON数组的逻辑封装成函数。

function generateUserArray(userCount) {
  let users = [];
  for (let i = 1; i <= userCount; i++) {
    users.push({
      id: i,
      username: `user${i}`,
      email: `user${i}@example.com`,
      isActive: i % 2 === 0
    });
  }
  return JSON.stringify(users);
}
// 使用函数
let jsonUsers = generateUserArray(5);
console.log(jsonUsers);

处理复杂数据结构生成JSON数组

当需要处理嵌套对象或复杂数据结构时,递归是一个有用的工具。

function flattenNestedData(nestedData) {
  let result = [];
  function processItem(item) {
    let processed = {
      id: item.id,
      name: item.name
    };
    if (item.children && item.children.length > 0) {
      processed.children = item.children.map(child => ({
        id: child.id,
        name: child.name
      }));
    }
    result.push(processed);
  }
  nestedData.forEach(processItem);
  return JSON.stringify(result);
}
// 示例数据
let nestedData = [
  {
    id: 1,
    name: "分类1",
    children: [
      { id: 11, name: "子分类1-1" },
      { id: 12, name: "子分类1-2" }
    ]
  },
  {
    id: 2,
    name: "分类2",
    children: [
      { id: 21, name: "子分类2-1" }
    ]
  }
];
let jsonNested = flattenNestedData(nestedData);
console.log(jsonNested);

使用ES6+特性生成JSON数组

现代JavaScript提供了许多便捷的特性来简化JSON数组的生成。

使用map和箭头函数

let numbers = [1, 2, 3, 4, 5];
let squaredNumbers = numbers.map(n => ({ value: n, square: n * n }));
let jsonSquared = JSON.stringify(squaredNumbers);
console.log(jsonSquared);

使用解构赋值

let users = [
  { id: 1, fullName: "张三", email: "zhangsan@example.com" },
  { id: 2, fullName: "李四", email: "lisi@example.com" }
];
let simplifiedUsers = users.map(({ id, fullName }) => ({ id, name: fullName }));
let jsonSimplified = JSON.stringify(simplifiedUsers);
console.log(jsonSimplified);

生成格式化的JSON数组

有时我们需要生成格式化的JSON字符串,以提高可读性。

let data = [
  { product: "手机", price: 2999, stock: 100 },
  { product: "笔记本", price: 5999, stock: 50 },
  { product: "平板", price: 1999, stock: 200 }
];
// 使用JSON.stringify的第三个参数进行格式化
let prettyJson = JSON.stringify(data, null, 2);
console.log(prettyJson);

输出结果：

[
  {
    "product": "手机",
    "price": 2999,
    "stock": 100
  },
  {
    "product": "笔记本",
    "price": 5999,
    "stock": 50
  },
  {
    "product": "平板",
    "price": 1999,
    "stock": 200
  }
]

注意事项

数据类型转换：JSON只支持有限的数据类型（字符串、数字、布尔值、null、数组和对象），在生成JSON数组时，确保所有值都是这些支持的类型。
循环引用：如果对象包含循环引用，JSON.stringify会抛出错误。
函数和undefined：JSON.stringify会忽略函数和undefined值。
日期对象：日期对象会被转换为字符串，可能不是你期望的格式，如果需要特定格式，可以手动转换。

let dataWithDate = [
  { id: 1, event: "会议", date: new Date() }
];
// 自定义日期转换
let jsonWithDate = JSON.stringify(dataWithDate, (key, value) => {
  if (key === "date") {
    return value.toISOString();
  }
  return value;
});
console.log(jsonWithDate);

在JavaScript中生成JSON数组有多种方法,从简单的直接创建到复杂的动态生成，可以根据具体需求选择最适合的方式，这些技巧将帮助你更高效地处理数据交换和存储需求，记住JSON格式的限制，并根据需要处理数据类型转换和特殊格式要求。