JSON.stringify不适合做深拷贝，还有更多妙用。

已于 2023-06-29 14:48:53 修改
阅读量112 收藏
点赞数
分类专栏： JavaScript 文章标签： json 前端 javascript
于 2023-06-29 11:12:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37680500/article/details/131452514
版权

JSON.stringify特性&妙用

  1. stringify 函数有几个参数，每个参数分别有啥用啊?

  2. stringify 序列化准则有哪些啊?

    • 函数序列化中会如何处理?
    • null、undefined、NaN 等特殊的值又会如何处理?
    • ES6 后增加的 Symbol 类型、BigInt 序列化过程中会有特别处理吗?

  3. stringify 为什么不适合做深拷贝?

  4. 你能想到那些 stringify 的妙用?

    截图.png

一. 三参数

stringify 函数的参数

在日常编程中，我们经常 JSON.stringify 方法将某个对象转换成 JSON 字符串形式。

const stu = {
    name: 'zcxiaobao',
    age: 18
}

// {"name":"zcxiaobao","age":18}
JSON.stringify(stu)

常见的例子

JSON.stringify("foo");  
JSON.stringify({});        
JSON.stringify(true);                      
JSON.stringify([1, "false", false]);   
JSON.stringify({x: 5, y: 6});  // '{"x":5,"y":6}'
JSON.stringify([new Number(1), new String("false"), new Boolean(false)]);
JSON.stringify({x: undefined, y: Object, z: Symbol("")});
JSON.stringify([undefined, Object, Symbol("")]);
JSON.stringify({[Symbol("foo")]: "foo"});
JSON.stringify({[Symbol.for("foo")]: "foo"}, [Symbol.for("foo")]);
JSON.stringify({
  name:'zhangsan',
  age:undefined,
  f:() => { console.log(1) },
  symbol:Symbol('This is a symbol'),
  arr:[1, undefined, 2, this.f, 3, Symbol('This is a symbol in array')]
})

但 stringify 真的就这么简单吗？我们先来看一下 MDN 中对 stringify 的定义。

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

其实，stringify 有三个参数。

咱们来看一下 stringify 语法和参数介绍:

JSON.stringify(value[, replacer [, space]])
  • value: 将要序列后成 JSON 字符串的值。
  • replacer(可选)
  1. 如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；
  2. 如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中
  3. 如果该参数为 null 或者未提供，则对象所有的属性都会被序列化。

replacer

我们来尝试一下 replacer 的使用。

1. replacer 作为函数

replacer 作为函数，它有两个参数，键(key) 和 值(value)，并且两个参数都会被序列化。

在开始时，replacer 函数会被传入一个空字符串作为 key 值，代表着要被 stringify 的这个对象。理解这点很重要，replacer 函数并非是上来就把对象解析成键值对形式，而是先传入了待序列化对象。随后每个对象或数组上的属性会被依次传入。 如果函数返回值为undefined或者函数时，该属性值会被过滤掉，其余按照返回规则。

// repalcer 接受两个参数 key value
// key value 分别为对象的每个键值对
// 因此我们可以根据键或者值的类型进行简单筛选

function replacer(key, value) {
  if (typeof value === "string") {
    return undefined;
  }
  return value;
}
// function 可自己测试
function replacer(key, value) {
  if (typeof value === "string") {
    return undefined;
  }
  return value;
}
const foo = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7};
JSON.stringify(foo, replacer);

对replacer后的返回值进行序列化

JSON 序列化结果为 {"week":45,"month":7}

但如果序列化的是数组，若 replacer 函数返回 undefined 或者函数，当前值不会被忽略，而将会被 null 取代。

const list = [1, '22', 3]
JSON.stringify(list, replacer)

JSON 序列化的结果为 ‘[1,null,3]’

2. replacer 作为数组

作为数组比较好理解，过滤数组中出现的键值。

const foo = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7};
JSON.stringify(foo, ['week', 'month']);

JSON 序列化结果为 {"week":45,"month":7}, 只保留 week 和 month 属性值。

space

  • space(可选): 指定缩进用的空白字符串，用于美化输出
  1. 如果参数是个数字，它代表有多少的空格。上限为10。
  2. 该值若小于1，则意味着没有空格
  3. 如果该参数为字符串（当字符串长度超过10个字母，取其前10个字母），该字符串将被作为空格
  4. 如果该参数没有提供（或者为 null），将没有空格
const secondItem = { 
    title: 'Transformers', 
    year: 2007, 
    starring: new Map([[0, 'Shia LaBeouf'],[1, 'Megan Fox']]) 
};
console.log(JSON.stringify(secondItem))
console.log(JSON.stringify(secondItem, null, 6))  //使用6个空格来缩进
console.log(JSON.stringify(secondItem, null, '🐷')) 
console.log(JSON.stringify(secondItem, null, '\t'))  // 使用制表符（\t）来缩进
console.log(JSON.stringify(secondItem, null, '\n'))  // 使用换行符（\n）来缩进

二、九特性

特性一: undefined、函数、Symbol值

  1. 出现在非数组对象属性值中: undefined、任意函数、Symbol 值在序列化过程中将会被忽略
  2. 出现在数组中: undefined、任意函数、Symbol值会被转化为 null
  3. 单独转换时: 会返回 undefined

// 1. 对象属性值中存在这三种值会被忽略

// 1. 对象属性值中存在这三种值会被忽略
const obj = {
  name: 'zc',
  age: 18,
  // 函数会被忽略
  sayHello() {
    console.log('hello world')
  },
  // undefined会被忽略
  wife: undefined,
  // Symbol值会被忽略
  id: Symbol(111),
  // [Symbol('zc')]: 'zc',
}
// 输出结果: {"name":"zc","age":18}
console.log(JSON.stringify(obj));

// 2. 数组中这三种值会被转化为 null
const list = [
  'zc', 
  18, 
  // 函数转化为 null
  function sayHello() {
    console.log('hello world')
  }, 
  // undefined 转换为 null
  undefined, 
  // Symbol 转换为 null
  Symbol(111)
]

// ["zc",18,null,null,null]
console.log(JSON.stringify(list))

// 3. 这三种值单独转化将会返回 undefined

console.log(JSON.stringify(undefined))  // undefined
console.log(JSON.stringify(Symbol(111))) // undefined
console.log(JSON.stringify(function sayHello() { 
  console.log('hello world')
})) // undefined

特性二: toJSON() 方法

如果一个被序列化的对象拥有 toJSON 方法，那么该

toJSON 方法就会覆盖该对象默认的序列化行为：不是该对象被序列化，而是调用

toJSON 方法后的返回值会被序列化，其余值会被忽略。

const obj = {
  name: 'zc',
  toJSON(a){
    console.log(this)
    return this
  }
}
// return toJSON
JSON.stringify(obj)

特性三: 布尔值、数字、字符串的包装对象

布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值

JSON.stringify([new Number(1), new String("zcxiaobao"), new Boolean(true)]);
// [1,"zcxiaobao",true]

特性四: NaN Infinity null

特性四主要针对 JavaScript 里面的特殊值，例如 Number 类型里的 NaN 和 Infinity 及 null 。此三种数值序列化过程中都会被当做 null 。

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

// 特性三讲过布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值
// 隐式类型转换就会调用包装类，因此会先调用 Number => NaN
// 之后再转化为 null
// 1/0 => Infinity => null
JSON.stringify([Number('123a'), +'123a', 1/0])

原始值: Number('123a').valueof()

特性五: Date对象

Date 日期调用了 toJSON() 将其转换为了 string 字符串（同Date.toISOString()），因此 JSON.stringify() 将会序列化 Date 的值为时间格式字符串。

// "2022-03-06T08:24:56.138Z"
JSON.stringify(new Date())

特性六: Symbol

特性一提到，Symbol 类型当作值来使用时，对象、数组、单独使用分别会被忽略、转换为 null 、转化为 undefined。

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

const obj = {
  name: 'zcxiaobao',
  age: 18,
  [Symbol('lyl')]: 'unique'
}
function replacer(key, value) {
  if (typeof key === 'symbol') {
    return value;
  }
}

// undefined
JSON.stringify(obj, replacer);

通过上面案例，我们可以看出，虽然我们通过 replacer 强行指定了返回 Symbol 类型值，但最终还是会被忽略掉。

特性七: BigInt

JSON.stringify 规定: 尝试去转换 BigInt 类型的值会抛出 TypeError

const bigNumber = BigInt(1)
// Uncaught TypeError: Do not know how to serialize a BigInt
console.log(JSON.stringify(bigNumber))

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ffh3MAIR-1688008122204)(http://ztcbbs.ztccloud.com.cn/developers-server/rest/file/group1/2023/06/28/1FC80174FFFFA67A7B4D6797B1B7B2AE0392.png)]

特性八: 循环引用

特性八指出: 对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误

日常开发中深拷贝最简单暴力的方式就是使用 JSON.parse(JSON.stringify(obj))，但此方法下的深拷贝存在巨坑，关键问题就在于 stringify 无法处理循环引用问题。

const obj = {
  name: 'zcxiaobao',
  age: 18,
}

const loopObj = {
  obj
}
// 形成循环引用
obj.loopObj = loopObj;
JSON.stringify(obj)

/* Uncaught TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    |     property 'loopObj' -> object with constructor 'Object'
    --- property 'obj' closes the circle
    at JSON.stringify (<anonymous>)
    at <anonymous>:10:6
*/

特性九: 可枚举属性

对于对象(包括 Map/Set/WeakMap/WeakSet)的序列化，除了上文讲到的一些情况，stringify 也明确规定，仅会序列化可枚举的属性

// {"age":18}
JSON.stringify(
    Object.create(
        null,
        {
            name: { value: 'zcxiaobao', enumerable: false },
            age: { value: 18, enumerable: true }
        }
    )
);

三、六妙用

localStorage

localStorage 对象用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。通常我们以对象形式进行存储。

  1. 单纯调用 localStorage 对象方法

    const obj = {
  name: 'zcxiaobao',
  age: 18
}
// 单纯调用 localStorage.setItem()

localStorage.setItem('zc', obj);

// 最终返回结果是 [object Object]
// 可见单纯调用localStorage是失败的
console.log(localStorage.getItem('zc'))

属性过滤

来假设这样一个场景，后端返回了一个很长的对象，对象里面属性很多，而我们只需要其中几个属性，并且这几个属性我们要存储到 localStorage 中。

  1. 方案一: 解构赋值+ stringify
// 我们只需要 a,e,f 属性
const obj = {
  a:1, b:2, c:3, d:4, e:5, f:6, g:7
}
// 解构赋值
const {a,e,f} = obj;
// 存储到localStorage
localStorage.setItem('zc', JSON.stringify({a,e,f}))
// {"a":1,"e":5,"f":6}
console.log(localStorage.getItem('zc'))
  1. 使用 stringify 的 replacer 参数

// 借助 replacer 作为数组形式进行过滤

localStorage.setItem('zc', JSON.stringify(obj, ['a','e','f']))
// {"a":1,"e":5,"f":6}
console.log(localStorage.getItem('zc'))

当 replacer 是数组时，可以简单的过滤出我们所需的属性，是一个不错的小技巧。

三思而后行之深拷贝

使用 JSON.parse(JSON.stringify) 是实现对象的深拷贝最简单暴力的方法之一。但也正如标题所言，使用该种方法的深拷贝要深思熟虑。

  1. 循环引用问题，stringify 会报错
  2. 函数、undefined、Symbol 会被忽略
  3. NaN、Infinity 和 -Infinity 会被序列化成 null
  4. …

因此在使用 JSON.parse(JSON.stringify) 做深拷贝时，一定要深思熟虑。如果没有上述隐患，JSON.parse(JSON.stringify) 是一个可行的深拷贝方案。

对象的 map 函数

在使用数组进行编程时，我们会经常使用到 map 函数。有了 replacer 参数后，我们就可以借助此参数，实现对象的 map 函数。

const ObjectMap = (obj, fn) => {
  if (typeof fn !== "function") {
    throw new TypeError(`${fn} is not a function !`);
  }
  // 先调用 JSON.stringify(obj, replacer) 实现 map 功能
  // 然后调用 JSON.parse 重新转化成对象
  return JSON.parse(JSON.stringify(obj, fn));
};

// 例如下面给 obj 对象的属性值乘以2

const obj = {
  a: 1,
  b: 2,
  c: 3
}
console.log(ObjectMap(obj, (key, value) => {
  if (typeof value === "number") {
    return value * 2;
  }
  return value;
}))

很多人有可能会很奇怪，为什么里面还需要多加一部判断，直接 return value * 2 不可吗？

上文讲过，replacer 函数首先传入的是待序列化对象，对象 *** 2 => NaN => toJSON(NaN) => undefined => 被忽略**，就没有后续的键值对解析了。

删除对象属性

借助 replacer 函数，我们还可以删除对象的某些属性。

const obj = {
  name: 'zcxiaobao',
  age: 18
}
// {"age":18}
JSON.stringify(obj, (key, val) => {
  // 返回值为 undefined时，该属性会被忽略 
  if (key === 'name') {
    return undefined;
  }
  return val;
})

对象判断

JSON.stringify 可以将对象序列化为字符串，因此我们可以借助字符串的方法来实现简单的对象相等判断。

//判断数组是否包含某对象
const names = [
  {name:'zcxiaobao'},
  {name:'txtx'},
  {name:'mymy'},
];
const zcxiaobao = {name:'zcxiaobao'};
// true
JSON.stringify(names).includes(JSON.stringify(zcxiaobao))
 
// 判断对象是否相等
const d1 = {a: 'div', b: 'span'}
const d2 = {b: 'span', a: 'div'}

// true
JSON.stringify(d1) === JSON.stringify(d2);

四、其他更多用法参考：

MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

肖土豆皮
关注
专栏目录
JS中的深拷贝实现方式
为技术而生
04-26 385
以上就是几种常见的JS深拷贝实现方式。在实际使用中，我们需要根据具体的需求和场景选择合适的方式。同时，我们也要注意深拷贝可能带来的性能问题，因为深拷贝需要复制对象的所有子对象，如果对象很大，那么深拷贝可能会消耗大量的内存和时间。
千万不要用JSON.stringify()去实现深拷贝！有巨坑！！
CSDN_KONGlX的博客
07-07 1708
.markdown-body { color: rgba(89, 89, 89, 1); font-size: 15px; font-family: -apple-system, system-ui, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-se...
JSON.stringify() 和 JSON.parse()
m0_61343119的博客
08-14 1945
我们知道，JSON.stringify() 和 JSON.parse() 是一对处理JSON数据的方法，前者是将JSON对象序列化为字符串，而后者是将JSON字符串解析为JSON对象。但是你有较为深入地去了解过它们吗？它们分别可以传入几个参数以及每个参数对应的作用是什么呢？
java json.stringify_详解关于JSON.parse()和JSON.stringify()的性能小测试
weixin_39616961的博客
02-16 485
JSON.parse(JSON.stringify(obj))我们一般用来深拷贝，其过程说白了，就是利用 JSON.stringify 将js对象序列化(JSON字符串)，再使用JSON.parse来反序列化(还原)js对象。至于这行代码为什么能实现深拷贝，以及它有什么局限性等等，不是本文要介绍的。本文要探究的是，这行代码的执行效率如何？如果随意使用会不会造成一些问题？先上两个js性能测试的依赖函...
json.stringify()的妙用，json.stringify()与json.parse()的区别
qq_47443027的博客
09-11 315
localStorage/sessionStorage默认只能存储字符串，而实际开发中，我们往往需要存储的数据多为对象类型，那么这里我们就可以在存储时利用json.stringify()将对象转为字符串，而在取缓存时，只需配合json.parse()转回对象即可。其次，JSON.stringify()的受众更多是对象，而toString()虽然可以将数组转为字符串，但并不能对{name:'天子笑'}这类对象实现你想要的操作，它的受众更多是数字。需要注意一点，由于此方法是将JSON字符串转换成对象，所以。
掌握JavaScript的JSON.stringify鲜为人知的技巧，让前端开发更加高效和灵活
前端达人
08-12 964
在日常开发中，我们经常会使用到 JSON.stringify 这个方法，特别是在需要进行序列化（深拷贝）的时候。它可以把我们的对象转换成一个 JSON 字符串，这个方法确实非常方便，但它也有一些不常被注意到的缺点。首先，JSON.stringify 的使用场景非常广泛，比如说当我们需要把对象保存到本地存储时，或者需要在前后端之间传输数据时，都会用到它。它就像是一个神奇的转换器，让我们可以轻松地处理...
如何提升 JSON.stringify() 的性能？
05-04 677
在一些性能敏感的场合下（例如服务端处理大量并发），或面对大量 stringify 的操作时，我们会希望它的性能更好，速度更快。这也催生了一些优化的 stringify 方案/库，下图是它们与原生方法的性能对比
你不知道的 JSON.stringify 特性
无
01-05 3613
前言   JSON.stringify可配合JSON.parse来进行对象深拷贝，也可以用于字符串转换为对象，但是会有很多问题。 语法特性   JSON.stringify 用于将JavaScript对象或值转换为JSON字符串。 undefined、函数、Symbol 作为对象属性值   undefined、函数或者Symbol在序列化时会被忽略，换句话说会丢失掉。 const object = { foo: undefined, bar: function () { console.l.
浅拷贝和深拷贝，JSON.parse(JSON.stringify(obj))
weixin_47451403的博客
08-08 622
浅拷贝和深拷贝浅拷贝另一种方法：es6新增的方法深拷贝用一行代码实现深拷贝 浅拷贝和深拷贝 1.浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用（内存地址） 2.深拷贝拷贝多层，每一级别的数据都会拷贝 浅拷贝 var obj = { id:1, name: ‘andy’, msg: { age:18 } } var o = {} for (var k in obj) { // k 是属性名 obj[k] 属性值 o[k] = obj[k] } console.log(o) 浅拷贝只拷贝一层更深
详解关于JSON.parse()和JSON.stringify()的性能小测试
10-17
如果操作的不是跨域数据交换或存储，而只是在内存中的对象操作，那么寻找更高效的方法（如使用专门的深拷贝库或直接克隆技术）可能是更好的选择。 总的来说，理解这两个方法的工作原理和性能特性对于优化JavaScript...
JSON.parse(JSON.stringify(obj))实现深拷贝的坑
Shaoyouiqng的博客
08-24 761
说到JSON.parse(JSON.stringify(obj)),真的是太多的坑了，主要是这个坑你不知道你就完了，这个面试经常被问到，除了把深拷贝的源码写出来就是问JSON.parse(JSON.stringify(obj))的坑了，今天就谈一谈这个该死的坑 其实JSON.parse(JSON.stringify(obj))简而言之就是stringify部分把它冰冻起来，然后pasrse部分给他解冻罢了，但是有些精华的部分就被丢失了。那今天主要找一下那些东西容易被丢失，是蛋白质还是脂肪还是无机盐？？？.
前端开发：在JavaScript 中JSON.stringify()和JSON.parse() 的使用总结
软贱开发攻城狮
08-08 2329
前言 在前端开发过程中，对于JSON的处理使用的场景是比较多的，也是比较常见的需求。JSON 是用于存储和传输数据的格式，JSON 通常用于服务端向网页传递数据，而且它是一种轻量级的数据交换格式。尤其是在JS开发相关的时候，将JSON 数据转换为 JavaScript 对象是非常常见的处理方式。那么本文就来分享一下前端对于JSON处理的常用方法JSON.stringify()和JSON.parse() 的使用总结。 功能介绍 1、JSON.stringify() JSON.stringify
JSON.parse() 与 JSON.stringify()用法
weixin_44040583的博客
03-15 330
JSON.stringify()与JSON.parse()的区别 JSON.stringify()的作用是将 JavaScript 对象转换为 JSON 字符串，而JSON.parse()是将JSON字符串转为一个对象。 两者作用是相对的，可以用JSON.stringify()将对象a变成字符串c，也可以用JSON.parse()将字符串c还原成对象a var msg = {"message": ...
Gson转换
09-13 310
gson格式转换.create());@Overridetry {
Vue使用query传参Boolean类型，刷新之后转换为String问题
q879936814的博客
09-12 400
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
C++与QML的数据交互
qq_50679120的博客
09-11 525
这里没什么好说的，在C++中组合好json后，通过信号发送到qml中，qml中是可以解析json的。通过Q_PROPERTY属性，可以轻松地在QML中读取和修改数据，并将其更新到C++中，先创建一个类。在QML接收，直接通过data.can_id这样的形式去访问结构体中的元素。这两个也没什么好说的，在C++中直接发送信号就好了，在C++中声明并注册一个结构体。然后发送信号到QML中。
sqlalchemy JSON 字段写入时中文序列化问题
llc的博客
09-12 369
_table_args__ = ({"comment": "表名称"})...extra = Column(JSON, comment="其他属性")...
使用 uni-app 开发微信小程序的详细指南
最新发布
2301_79685859的博客
09-16 533
uni-app是一个使用 Vue.js 框架开发跨平台应用的前端框架。开发者通过编写一套代码，可以生成多端应用，包括 H5、iOS、Android、微信小程序、支付宝小程序、字节跳动小程序等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值