你不知道的5个JavaScript中JSON的秘密功能分享

1. JSON 对象的 stringify() 方法

定义

我们知道，JavaScript 中的 JSON 对象有一个 stringify() 方法，它的作用是将一个 JavaScript 对象转换成对应的 JSON 字符串。

用法

const obj = { name: 'Lucas', age: 28, hobbies: ['reading', 'coding'] };
const jsonStr = JSON.stringify(obj);
console.log(jsonStr);
// 输出： {"name":"Lucas","age":28,"hobbies":["reading","coding"]}

示例说明

在与后端交互时，常常会需要将一个 JavaScript 对象转换为 JSON 字符串然后发送到服务器。这时，我们可以用 JSON.stringify() 方法来快速地完成这个转换操作，获得符合我们需要的字符串。

2. JSON 对象的 parse() 方法

定义

JSON.parse() 方法用于将符合 JSON 格式的字符串转化为 JavaScript 对象或值。

用法

const jsonStr = '{"name":"Lucas","age":28,"hobbies":["reading","coding"]}';
const obj = JSON.parse(jsonStr);
console.log(obj);
// 输出: {name: 'Lucas', age: 28, hobbies: ['reading', 'coding']}

示例说明

在与后端交互时，常常会需要将一个符合 JSON 格式的字符串解析为 JavaScript 对象。这时，我们可以用JSON.parse() 方法来实现这个过程，在服务端接收到前端发送来的 JSON 字符串时，通过 parse() 方法解析就可以得到对应的 JavaScript 对象，从而进行操作。

3. JSON 的复杂解析

定义

JSON.parse() 方法不仅支持基本的对象和数组类型，还可以解析包括自定义类型的复杂结构。

用法

const Json = '{"name":"Lucas","age":28,"mapper":[{"name":"Amy","age":25},{"name":"Ben","age":30}]}';
let mapper = JSON.parse(Json, (key, value) => {
  if (key === 'age') {
    return value * 2;
  }
  return value;
});
console.log(mapper);
// 输出：{name: 'Lucas', age: 56, mapper: [{name: 'Amy', age: 50}, {name: 'Ben', age: 60}]}

示例说明

JSON.parse() 方法在第二个参数上添加一个函数，这个函数接收两个参数：键值（key）和值（value）。它提供了一种基于上下文动态处理 JSON 数据的方式。在上面的示例中，当这个回调函数的 key 的值为 age 时，就将 value 这个数值乘以 2 后再返回原始数据类型。

4. toJSON() 方法

定义

toJSON() 方法是 JSON 对象中一个内置方法，每个 JavaScript 对象都可以通过实现 toJSON() 方法来自定义它们的 JSON 序列化输出。当一个 JavaScript 对象被 Stringify() 方法序列化时，如果它有toJSON() 方法，则该方法会代替对象本身。

用法

const obj = {
  a: 2,
  b: 4,
  c: 'Hello World!',
  toJSON: function() {
    return this.a + this.b;
  }
};
console.log(JSON.stringify(obj));
// 输出：6

示例说明

如上述代码所示，我们给 obj 对象添加了自定义的 toJSON() 方法，它将对象中的 a 和 b 两个属性相加并返回，这样在调用 JSON.stringify() 函数时，obj 对象的序列化结果正是这个值（即 6），而不是原始的对象本身。

5. JSON 中 NaN，Infinity 以及 -Infinity 解析

定义

NaN（非数字）、正无穷和负无穷是 JavaScript 中的一些特殊情况，在 JSON 中，NaN、Infinity 和 -Infinity 都是不被允许的，如果 JSON.parse() 方法在解析 JSON 字符串时遇到这些特殊值，会抛出异常。

用法

const jsonStr1 = '{"result": NaN}';
const jsonStr2 = '{"result": Infinity}';
const jsonStr3 = '{"result": -Infinity}';
try {
  const result1 = JSON.parse(jsonStr1);
  console.log(typeof result1.result); // 输出：number
} catch (e) {
  console.log('parse error: ' + e);
}
try {
  const result2 = JSON.parse(jsonStr2);
  console.log(typeof result2.result); // 输出：number
} catch (e) {
  console.log('parse error: ' + e);
}
try {
  const result3 = JSON.parse(jsonStr3);
  console.log(typeof result3.result); // 输出：number
} catch (e) {
  console.log('parse error: ' + e);
}

示例说明

上述代码中，我们尝试使用 JSON.parse() 方法解析 JSON 字符串 result 中的不同值。当 result 值为NaN、Infinity 还是 -Infinity 时，JSON.parse() 方法抛出异常。而即便代码中没有任何异常，result 的类型依然是 number 类型。