前端需要知道的JSON.stringify的正确用法

1、API介绍

MDN官网简介：JSON.stringify(value， replacer, space) 方法将一个 JavaScript 对象或值转换为 JSON 字符串，如果指定了一个 replacer 函数，则可以选择性地替换值，或者指定的 replacer 是数组，则可选择性地仅包含数组指定的属性。

2、常见场景

2.1 存入缓存

在一些存储缓存的场景（如：localStorage、sessionStorage、IndexedDB），不能直接存储对象，此时就需要对该对象进行序列化转化为字符串再进行存储：

let obj = {
	name: "sishen",
	age: 18
}
localStorage.setItem("obj", JSON.stringify(obj))
1
2
3
4
5

2.2 深拷贝

对对象进行深拷贝，但其中会存在一些陷阱，需要谨慎使用，详情往下看

let obj = {
	name: "sishen",
	age: 18,
    course: {
        chinese: 98,
        math: 80
    }
}
let obj2 = JSON.parse(JSON.stringify(obj))
obj === obj2		// false
obj.course === obj2.course		// false
1
2
3
4
5
6
7
8
9
10
11

2.3 对写入文件进行格式化

当我们在使用 nodejs 提供的 fs模块 读取一些 json 文件时，在写入 json文件时 可以防止文件的格式很乱，可以使用 stringify 的第三个参数传入一个数字，对输出值做一个格式化处理：

JSON.stringify(obj, null, 4) //使用四个空格缩进
1

3、不能被序列化的属性

在序列化一个对象时，如果该对象包括以下这些值，会导致返回的对象存在异常：

• undefined、函数：当遇到属性值类型为 undefined 或者 函数，无法进行转化，该属性会被移除

  JSON.stringify({a:undefined， b:()=>{}})		// '{}'
  1

• NaN、Infinity、-Infinity：当遇到三个类型任何一个，都会被转化为 null

  JSON.stringify({a:NaN,b:Infinity, c:-Infinity})	
  // '{"a":null,"b":null,"c":null}'
  1
  2

4、当对象循环引用自身解决方案

当一个对象内部的属性指向自身时，会导致序列化的函数执行报错，此时需要使用第二个参数传入一个函数解决：

let obj = {
	name: "sishen",
	age: 18
}
obj.obj = obj
// 直接序列化会报错
JSON.stringify(obj)		// Uncaught TypeError: Converting circular structure to JSON
// 需要传入函数
let cache = []
JSON.stringify(obj, function(key, value) {
    // 返回值如果是对象，则将循环对象执行该函数，并且首次传入对象
    if (typeof value === 'object' && value != null) {
       if(cache.includes(value)) return;
       cache.push(value)   
    }
    return value;
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

5、JSON.parse 问题

在解析字符串时，如果传入一个 undefined 或者 函数 会导致报错，因此如果需要做封装需要注意：

// 以下两种调用方式都会导致报错
JSON.parse(undefined)
JSON.parse(()=>{})
1
2
3

编辑 | sishen
来源 | 前端兔
公众号 | 前端兔

关注公众号查看更多前端知识分享~~