JSON.stringify与JSON.parse详解与实践

目录

JSON.stringify

简介

主要用途：

API

实践1：

实践2：

JSON.parse

简介

API

实践1

实践2

---

JSON.stringify

简介

用于把JavaScript对象、数组、值、布尔值等序列化成字符串形式。

主要用途：

得到的数据通常有以下主要用途：

数据传输：在客户端和服务器之间传递数据时，通常需要把数据序列化为字符串进行传输。JSON是一种常见的数据交换格式，而JSON.stringify 可以很方便的将javascript 的对象等数据转换成JSON字符串，以便在网络上传输。

本地存储： 在浏览器端，localStorage 或 sessionStorage 存储的数据必须是字符串形式。JSON.stringify 可以用来将 JavaScript 对象转为字符串，以便在本地存储中使用。

保存数据： 将数据存储到本地文件或数据库时，经常需要将数据转为字符串形式。JSON 格式的字符串是一个通用的选择，而 JSON.stringify 可以用来生成符合标准的 JSON 字符串。

JSON.stringify() - JavaScript | MDN

API

JSON.stringify(value: any, replacer?: (string | number)[] | null | undefined, space?: string | number | undefined): string

实践1：

const data = {
  key1: 'value1',
  key2: 'value2',
  key3: {
    subKey1: 'subValue1',
    subKey2: 'subValue2'
  }
};
//改变内容，把所有的value值变为大写
const jsonString = JSON.stringify(data, (key, value) => {
  // 使用 replacer 函数，将所有字符串值转为大写
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  return value;
}, 2);  // 使用缩进为2的空格

console.log(jsonString);

实践2：

const data = {
  key1: 'value1',
  key2: 'value2',
  key3: {
    subKey1: 'subValue1',
    subKey2: 'subValue2'
  }
};

//不改变内容，缩进4空格，便于阅读
const jsonString = JSON.stringify(data, null, 4);  // 使用缩进为4的空格

console.log(jsonString);

JSON.parse

简介

将JSON的字符串转换为 JavaScript的 对象。需要注意 必现符合JSON字符串格式的数据才行。

JSON.parse() - JavaScript | MDN

API

JSON.parse(text: string, reviver?: ((this: any, key: string, value: any) => any) | undefined): any

实践1

const jsonString = '{"name": "John", "age": 30, "city": "New York"}';

const reviver = (key, value) => {
  // 将 age 属性的值加倍
  if (key === 'age') {
    return value * 2;
  }
  return value;
};

const parsedObject = JSON.parse(jsonString, reviver);

console.log(parsedObject);
// 输出: { name: 'John', age: 60, city: 'New York' }

实践2

const jsonString = '{"name": "John", "age": 30, "city": "New York"}';


const parsedObject = JSON.parse(jsonString);

console.log(parsedObject);
// 输出: { name: 'John', age: 30, city: 'New York' }