JSON.stringify() 你不知道的「秘密」和「魔力」

2023-12-09 17:01:48

JSON.stringify() 的基本用法

JSON.stringify() 函数可以将一个 JavaScript 对象转换为一个 JSON 字符串。这个 JSON 字符串可以被其他程序或系统解析和使用。

const obj = {
  name: 'John Doe',
  age: 30,
  city: 'New York'
};

const json = JSON.stringify(obj);

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

上面代码中，我们使用 JSON.stringify() 函数将一个 JavaScript 对象转换为 JSON 字符串。然后，我们将这个 JSON 字符串输出到控制台。

JSON.stringify() 的高级用法

JSON.stringify() 函数还有很多高级用法，可以帮助我们处理和传输更复杂的数据。

1. 序列化复杂数据结构

JSON.stringify() 函数可以序列化复杂的数据结构，如数组、对象和函数。

const arr = [1, 2, 3, 4, 5];

const json = JSON.stringify(arr);

console.log(json);
// 输出: '[1,2,3,4,5]'

const obj = {
  name: 'John Doe',
  age: 30,
  city: 'New York',
  address: {
    street: 'Main Street',
    number: 123
  }
};

const json = JSON.stringify(obj);

console.log(json);
// 输出: '{"name":"John Doe","age":30,"city":"New York","address":{"street":"Main Street","number":123}}'

上面代码中，我们使用 JSON.stringify() 函数将一个数组和一个对象序列化为 JSON 字符串。然后，我们将这两个 JSON 字符串输出到控制台。

2. 使用 replacer 参数自定义序列化过程

JSON.stringify() 函数的第二个参数是一个 replacer 函数。这个函数可以自定义序列化过程。

const obj = {
  name: 'John Doe',
  age: 30,
  city: 'New York',
  address: {
    street: 'Main Street',
    number: 123
  }
};

const json = JSON.stringify(obj, (key, value) => {
  if (key === 'age') {
    return value + 1;
  } else {
    return value;
  }
});

console.log(json);
// 输出: '{"name":"John Doe","age":31,"city":"New York","address":{"street":"Main Street","number":123}}'

上面代码中，我们使用 JSON.stringify() 函数的 replacer 参数自定义了序列化过程。我们让 age 属性的值加 1。然后，我们将这个 JSON 字符串输出到控制台。

3. 使用 replacer 参数过滤数据

JSON.stringify() 函数的 replacer 参数也可以用来过滤数据。

const obj = {
  name: 'John Doe',
  age: 30,
  city: 'New York',
  address: {
    street: 'Main Street',
    number: 123
  }
};

const json = JSON.stringify(obj, (key, value) => {
  if (key === 'age') {
    return undefined;
  } else {
    return value;
  }
});

console.log(json);
// 输出: '{"name":"John Doe","city":"New York","address":{"street":"Main Street","number":123}}'