Vue学习JSON.stringify()将Object类型转换成String类型

Vue学习JSON.stringify（）将Object类型转换成String类型

• 一、前言
• • 1、基本用法
  • 2、复杂对象转换
  • 3、过滤器函数
  • 4、序列化函数

一、前言

JSON.stringify() 是一个 JavaScript 函数，用于将 JavaScript 值转换为 JSON 字符串。它接受一个 JavaScript 值（通常是对象或数组）作为参数，并返回一个对应的 JSON 字符串。

1、基本用法

const obj = { name: 'John', age: 30 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // 输出: {"name":"John","age":30}

2、复杂对象转换

JSON.stringify() 还可以用于将嵌套的对象或数组转换为 JSON 字符串。

const nestedObj = {
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    country: 'USA'
  }
};
const jsonString = JSON.stringify(nestedObj);
console.log(jsonString); 
// 输出: {"name":"John","age":30,"address":{"city":"New York","country":"USA"}}

3、过滤器函数

JSON.stringify() 还可以接受一个过滤器函数作为第二个参数，该函数可以控制哪些属性将被包含在 JSON 字符串中。

const obj = { name: 'John', age: 30, password: '12345' };
const jsonString = JSON.stringify(obj, (key, value) => {
  if (key === 'password') {
    return undefined; // 过滤掉密码字段
  }
  return value;
});
console.log(jsonString); // 输出: {"name":"John","age":30}

4、序列化函数

JSON.stringify() 还可以接受一个序列化函数作为第三个参数，该函数可以在每个键值对被字符串化之前转换值。

const obj = { name: 'John', age: 30 };
const jsonString = JSON.stringify(obj, (key, value) => {
  if (typeof value === 'number') {
    return value * 2; // 将数字属性值加倍
  }
  return value;
});
console.log(jsonString); // 输出: {"name":"John","age":60}

总之，JSON.stringify() 是一个非常实用的函数，用于将 JavaScript 值转换为 JSON 字符串，是进行数据传输和存储的常见方式之一。