前端兔

V1

2022/11/02阅读:23主题:默认主题

前端需要知道的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))

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

2.3 对写入文件进行格式化

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

JSON.stringify(obj, null4//使用四个空格缩进

3、不能被序列化的属性

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

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

    JSON.stringify({a:undefined, b:()=>{}})  // '{}'
  • NaN、Infinity、-Infinity:当遇到三个类型任何一个,都会被转化为 null

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

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;
});

5、JSON.parse 问题

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

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

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

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

分类:

前端

标签:

JavaScript

作者介绍

前端兔
V1