JSON.stringify使用问题记录

前言

项目中遇到一个 bug，一个组件为了保留一份 JSON 对象，使用 JSON.stringify 将其转换成字符串，这样做当然是为了避免对象是引用类型造成数据源的污染。
但发现后面使用 JSON.parse 方法之后，发现数据有所变化。
代码简化：

let obj = {
  name: 'Gopal',
  age: Infinity
}
let originObj = JSON.stringify(obj)
console.log(originObj) // {"name":"Gopal","age":null}

可以看到，Infinity 变成了 null，从而导致了后面的 bug。其实项目中自己踩 JSON.stringify 的坑已经很多了，借此机会好好整理一下，也给大家一个参考
解决方法1：
简单粗暴，重新给 age 属性赋值
解决方法2：

function censor(key, value) {
  if (value === Infinity) {
    return "Infinity";
  }
  return value;
}
var b = JSON.stringify(a, censor);

var c = JSON.parse(
  b,
  function (key, value) {
    return value === "Infinity"  ? Infinity : value;
  }
);

这就有点绕了，当做参考吧，其实我自己是直接使用了第一种方法。不过这里可以看到 JSON.stringify 实际上还有第二个参数，那它有什么用呢？接下来我们揭开它的神秘面纱。
JSON.stringify 基础语法

JSON.stringify(value[, replacer [, space]])

概念

MDN 中文文档对它的解释如下：
JSON.stringify() 方法将一个 JavaScript 值（对象或者数组）转换为一个 JSON 字符串，如果指定了 replacer 是一个函数，则可以选择性地替换值，或者如果指定了 replacer 是一个数组，则可选择性地仅包含数组指定的属性。
我个人觉得是有所不妥的，不妥之处在于“对象或者数组”，因为实际上对于普通的值，我们也可以使用 JSON.stringify，只是我们很少这么用罢了。不过这个问题不大，我们文中介绍的也都是针对对象或者数组。
JSON.stringify('foo'); // '"foo"'
英文版的解释就会合理很多
The JSON.stringify() method converts a JavaScript object or value to a JSON string, optionally replacing values if a replacer function is specified or optionally including only the specified properties if a replacer array is specified.
简单来说，JSON.stringify() 就是将值转换为相应的 JSON 格式字符串。

JSON.stringify 强大的第二个参数 replacer

这个参数是可选的，可以是一个函数，也可以是一个数组
当是一个函数的时候，则在序列化的过程中，被序列化的每个属性都会经过该函数的转换和处理，看如下代码：

let replacerFun = function (key, value) {
  console.log(key, value)
  if (key === 'name') {
    return undefined
  }
  return value
}

let myIntro = {
  name: 'Gopal',
  age: 25,
  like: 'FE'
}
console.log(JSON.stringify(myIntro, replacerFun))
// {"age":25,"like":"FE"}

这里其实就是一个筛选的作用，利用的是 JSON.stringify 中对象属性值为 undefined 就会在序列化中被忽略的特性（后面我们会提到）
值得注意的是，在一开始 replacer 函数会被传入一个空字符串作为 key 值，代表着要被 stringify 的这个对象
上面 console.log(key, value) 输出的值如下：

 { name: 'Gopal', age: 25, like: 'FE' }
name Gopal
age 25
like FE
{"age":25,"like":"FE"}

可以看出，通过第二个参数，我们可以更加灵活的去操作和修改被序列化目标的值
当第二个参数为数组的时候，只有包含在这个数组中的属性名才会被序列化

JSON.stringify(myIntro, ['name']) // {"name":"Gopal"}

中看不中用的第三个参数

指定缩进用的空白字符串，更多时候就是指定一个数字，代表几个空格：

let myIntro = {
  name: 'Gopal',
  age: 25,
  like: 'FE'
}

console.log(JSON.stringify(myIntro))
console.log(JSON.stringify(myIntro, null, 2))

// {"name":"Gopal","age":25,"like":"FE"}
// {
//   "name": "Gopal",
//   "age": 25,
//   "like": "FE"
// }

JSON.stringify 使用场景

判断对象/数组值是否相等

let a = [1,2,3],
    b = [1,2,3];
JSON.stringify(a) === JSON.stringify(b);// true

localStorage/sessionStorage 存储对象

我们知道 localStorage/sessionStorage 只可以存储字符串，当我们想存储对象的时候，需要使用 JSON.stringify 转换成字符串，获取的时候再 JSON.parse

// 存
function setLocalStorage(key,val) {
    window.localStorage.setItem(key, JSON.stringify(val));
};
// 取
function getLocalStorage(key) {
    let val = JSON.parse(window.localStorage.getItem(key));
    return val;
};

实现对象深拷贝

let myIntro = {
  name: 'Gopal',
  age: 25,
  like: 'FE'
}

function deepClone() {
  return JSON.parse(JSON.stringify(myIntro))
}

let copyMe = deepClone(myIntro)
copyMe.like = 'Fitness'
console.log(myIntro, copyMe)

// { name: 'Gopal', age: 25, like: 'FE' } { name: 'Gopal', age: 25, like: 'Fitness' }

路由（浏览器地址）传参

因为浏览器传参只能通过字符串进行，所以也是需要用到 JSON.stringify

JSON.stringify 使用注意事项

看了上面，是不是觉得 JSON.stringify 功能很强大，立马想在项目中尝试了呢？稍等稍等，先看完以下的注意事项再做决定吧，可能在某些场景下会触发一些难以发现的问题

转换属性值中有 toJSON 方法，慎用

转换值中如果有 toJSON 方法，该方法返回的值将会是最后的序列化结果

// toJSON
let toJsonMyIntro = {
  name: "Gopal",
  age: 25,
  like: "FE",
  toJSON: function () {
    return "前端";
  },
};

console.log(JSON.stringify(toJsonMyIntro)); // "前端"

被转换值中有 undefined、任意的函数以及 symbol 值，慎用

分为两种情况
一种是数组对象，undefined、任意的函数以及 symbol 值会被转换成 null

JSON.stringify([undefined, Object, Symbol("")]);
// '[null,null,null]'

一种是非数组对象，在序列化的过程中会被忽略

JSON.stringify({ x: undefined, y: Object, z: Symbol("") });
// '{}'

对于这种情况，我们可以使用 JSON.stringify 的第二个参数，使其达到符合我们的预期

const testObj = { x: undefined, y: Object, z: Symbol("test") }

const resut = JSON.stringify(testObj, function (key, value) {
  if (value === undefined) {
    return 'undefined'
  } else if (typeof value === "symbol" || typeof value === "function") {
    return value.toString()
  }
  return value
})

console.log(resut)
// {"x":"undefined","y":"function Object() { [native code] }","z":"Symbol(test)"}

包含循环引用的对象，慎用

let objA = {
  name: "Gopal",
}

let objB = {
  age: 25,
}

objA.age = objB
objB.name = objA
JSON.stringify(objA)

会报以下错误：

Uncaught TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    |     property 'age' -> object with constructor 'Object'
    --- property 'name' closes the circle
    at JSON.stringify (<anonymous>)
    at <anonymous>:1:6

以 symbol 为属性键的属性，慎用

所有以 symbol 为属性键的属性都会被完全忽略掉，即便 replacer 参数中强制指定包含了它们。

JSON.stringify({ [Symbol.for("foo")]: "foo" }, [Symbol.for("foo")])
// '{}'

JSON.stringify({ [Symbol.for("foo")]: "foo" }, function (k, v) {
  if (typeof k === "symbol") {
    return "a symbol";
  }
})
// undefined

值为 NaN 和 Infinity，慎用

数组的值，或者非数组对象属性值为 NaN 和 Infinity 的，会被转换成 null

let me = {
  name: "Gopal",
  age: Infinity,
  money: NaN,
};
let originObj = JSON.stringify(me);
console.log(originObj); // {"name":"Gopal","age":null,"money":null}

JSON.stringify([NaN, Infinity])
// [null,null]

具有不可枚举的属性值时，慎用

不可枚举的属性默认会被忽略：

let person = Object.create(null, {
  name: { value: "Gopal", enumerable: false },
  age: { value: "25", enumerable: true },
})

console.log(JSON.stringify(person))
// {"age":"25"}

总结

JSON.stringify 在实际应用中确实很方便的解决了我们很多问题，比如简单的深拷贝等。但是我们在使用时候，也需要知道它有哪些不足之处，在目标值如果是一些特殊值的情况下，可能序列化后的结果会不符合我们的预期，这个时候就需要慎用
原文链接：https://mp.weixin.qq.com/s/i0D40LQMe7a3SpzE_T6u5A

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,132评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,802评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,566评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,858评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,867评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,695评论 1赞 282
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,064评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,705评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,915评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,432评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,041评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2赞 343