前端的js如何将数据转json

前端JS中数据转换为JSON的实用指南

在前端开发中,JSON（JavaScript Object Notation）因其轻量级、易读易写的特性，成为数据交互的主流格式，无论是将前端数据传递给后端API，还是将数据存储到本地（如localStorage），都经常需要将JavaScript数据类型转换为JSON字符串，本文将详细介绍前端JS中数据转JSON的核心方法、常见场景及注意事项，帮助开发者快速这一技能。

核心方法：JSON.stringify()

JavaScript提供了内置的JSON.stringify()方法，这是将数据转换为JSON字符串的核心工具，该方法可以将JavaScript对象、数组等数据序列化为JSON格式的字符串，语法如下：

JSON.stringify(value[, replacer[, space]])

参数说明

value（必选）：要转换的数据，可以是对象、数组、基本类型（字符串、数字、布尔值、null）等。
replacer（可选）：用于转换过程的函数或数组，用于控制哪些属性被包含或修改转换结果。
space（可选）：格式化输出，用于美化JSON字符串的可读性，可以是数字（表示缩空格数，最大10）或字符串（用字符串代替空格，最大10个字符）。

基础使用示例

转换对象

const user = {
  name: "张三",
  age: 25,
  isAdmin: false,
  address: null
};
const jsonString = JSON.stringify(user);
console.log(jsonString);
// 输出: {"name":"张三","age":25,"isAdmin":false,"address":null}

转换数组

const fruits = ["apple", "banana", "orange"];
const jsonArr = JSON.stringify(fruits);
console.log(jsonArr);
// 输出: ["apple","banana","orange"]

转换基本类型

字符串：会被双引号包裹（JSON标准要求）
```
JSON.stringify("hello"); // 输出: ""hello""
```

数字、布尔值、null：直接转换

JSON.stringify(123);     // 输出: 123
JSON.stringify(true);    // 输出: true
JSON.stringify(null);    // 输出: null

undefined、函数、Symbol：会被忽略（或在对象中直接删除）

const data = {
a: undefined,
b: function() {},
c: Symbol("sym")
};
JSON.stringify(data); // 输出: {}（所有忽略属性）

进阶用法：replacer与space参数

使用replacer过滤或修改属性

replacer可以是数组或函数：

（1）数组形式：指定要保留的属性名

const user = {
  name: "李四",
  age: 30,
  password: "123456", // 敏感信息，不希望被序列化
  hobby: ["reading", "coding"]
};
// 只保留name和hobby属性
const filteredJson = JSON.stringify(user, ["name", "hobby"]);
console.log(filteredJson);
// 输出: {"name":"李四","hobby":["reading","coding"]}

（2）函数形式：对每个属性值进行处理

函数接收两个参数：key（属性名）和value（属性值），返回值将作为该属性在JSON中的最终值，若返回undefined，则该属性会被忽略。

const product = {
  id: 1001,
  name: "笔记本电脑",
  price: 4999,
  discount: 0.8
};
// 将价格乘以折扣，并过滤掉discount属性
const processedJson = JSON.stringify(product, (key, value) => {
  if (key === "price") {
    return value * product.discount; // 计算折后价
  }
  if (key === "discount") {
    return undefined; // 忽略discount属性
  }
  return value; // 其他属性正常返回
});
console.log(processedJson);
// 输出: {"id":1001,"name":"笔记本电脑","price":3999.2}

使用space美化输出

默认情况下,JSON.stringify()输出的JSON字符串是压缩的（无空格和换行），通过space参数可以格式化输出，便于调试或阅读：

（1）数字参数（1-10，表示缩进空格数）

const data = {
  user: "王五",
  details: {
    age: 28,
    skills: ["JavaScript", "React", "Node.js"]
  }
};
const prettyJson = JSON.stringify(data, null, 2); // 缩进2个空格
console.log(prettyJson);
/* 输出:
{
  "user": "王五",
  "details": {
    "age": 28,
    "skills": [
      "JavaScript",
      "React",
      "Node.js"
    ]
  }
}
*/

（2）字符串参数（用字符串代替空格，最多取前10个字符）

const prettyJsonWithStr = JSON.stringify(data, null, "--"); // 用"--"缩进
console.log(prettyJsonWithStr);
/* 输出:
{
--"user": "王五",
--"details": {
----"age": 28,
----"skills": [
------"JavaScript",
------"React",
------"Node.js"
----]
--}
}
*/

常见场景与注意事项

场景1：将表单数据转换为JSON提交

在表单提交时,常需将表单数据序列化为JSON字符串，可以通过FormData收集数据，再转换为对象后序列化：

const form = document.querySelector("#userForm");
const formData = new FormData(form);
// 将FormData转换为普通对象
const formDataObj = {};
formData.forEach((value, key) => {
  formDataObj[key] = value;
});
// 转换为JSON字符串
const jsonData = JSON.stringify(formDataObj);
console.log(jsonData); //  {"username":"zhangsan","email":"zhangsan@example.com"}

场景2：存储数据到localStorage

localStorage只能存储字符串,因此需将对象/数组转换为JSON字符串存储，读取时再解析：

const userData = { name: "赵六", loginTime: new Date().toISOString() };
// 存储：转换为JSON字符串
localStorage.setItem("user", JSON.stringify(userData));
// 读取：解析为JavaScript对象
const storedUser = JSON.parse(localStorage.getItem("user"));
console.log(storedUser); // { name: "赵六", loginTime: "2023-10-01T12:00:00.000Z" }

注意事项

（1）循环引用问题

如果对象中存在循环引用（例如对象的某个属性指向自身），直接调用JSON.stringify()会抛出错误：

const obj = {};
obj.self = obj; // 循环引用
JSON.stringify(obj); // 报错: TypeError: Converting circular structure to JSON...

解决方案：使用第三方库（如flatted）或手动处理循环引用，在序列化前删除循环属性。

（2）特殊对象的序列化

JavaScript中的一些特殊对象（如Date、Map、Set、RegExp等）会被JSON.stringify()转换为普通对象，可能导致数据丢失：

const data = {
  date: new Date(), // Date对象
  map: new Map([["a", 1]]), // Map对象
  regex: /\d+/ // 正则表达式
};
console.log(JSON.stringify(data));
// 输出: {"date":"2023-10-01T12:00:00.000Z","map":{},"regex":{}} // Map和正则丢失

解决方案：通过replacer函数手动处理这些对象，将其转换为可序列化的格式：

const serializedData = JSON.stringify(data, (key, value) => {
  if (value instanceof Date) {
    return value.toISOString(); // Date转为ISO字符串
  }
  if (value instanceof Map) {
    return Object.fromEntries(value); // Map转为普通对象
  }
  if (value instanceof RegExp) {
    return value.toString(); // 正则转为字符串
  }
  return value;
});
console.log(serializedData);
// 输出: {"date":"2023-10-01T12:00:00.000Z","map":{"a":1},"regex":"/\\d+/"}

（3）undefined、函数、Symbol的忽略

如前所述,这些类型在对象中会被直接忽略，数组中则会被转为null：

const arr = [1, undefined, function() {}, Symbol("sym")];
console.log(JSON.stringify(arr)); // 输出: [1,null,null,null]

JSON.stringify()是前端JS中将数据转换为JSON的核心方法，通过基础用法可以

开元棋牌

开元棋牌下载

开元棋牌官网

开元棋牌电脑版

正文