前端需要知道的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, null, 4) //使用四个空格缩进
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
来源 | 前端兔
公众号 | 前端兔
关注公众号查看更多前端知识分享~~
前端需要知道的JSON.stringify的正确用法相关推荐
- [面试专题]前端需要知道的web安全知识
前端需要知道的web安全知识 标签(空格分隔): 未分类 安全 [Doc] Crypto (加密) [Doc] TLS/SSL [Doc] HTTPS [Point] XSS [Point] CSRF ...
- 大多数开发人员都不知道的JSON.stringify 秘密
作为前端开发工程师,你一定用过JSON.stringify,但你知道它的全部秘密吗? 基本上,JSON.stringify 将对象转换为 JSON 字符串.同时,JSON.stringify 有如下规 ...
- 前端 JavaScript 中 JSON.stringify() 的基本用法
前言 在开发工作中,我们可能会碰到这样的需求:需要将某个对象内容弹窗显示或者保存在文件中,这时候如果你直接弹窗的话,很可能就是下面这样的: 因为很多接口它对参数有要求,比如只能是字符串之类的. 这时候 ...
- 那些前端应该知道的HTTP知识
前言 这篇文章本来是我一年前看<图解HTTP>做的笔记,但记完后放在文件夹的某个角落一直没管.前段时间撸项目练手的时候,在状态码上碰到了问题,因此又拿了出来翻了翻,同时又在原有的基础上做了 ...
- 前端需要知道的CSS函数大全
之前一直以为css没有几个函数,今天才发现css现在竟然已经有86个函数了,意不意外,惊不惊喜!!! 我一直比较喜欢用css来解决之前js实现的效果,这样对性能时一种优化,自己也有成就感,希望这些函数 ...
- html怎么做包含块,字节前端都知道的CSS包含块规则
你是否曾对CSS中的百分比单位非常疑惑?是否简单认为百分比的基准值就是所在元素的宽高?本文将从包含块角度帮助大家理解记忆百分比单位的计算规则,便于巧妙运用包含块规则解决实际开发中的布局问题! 一.确立 ...
- JSON.parse()的正确用法
昨天晚上在项目中使用JSON.parse()来将字符串格式的数据转换成json,结果悲剧了,总感觉方法没有用错,可是就是报错!想了好久,最后发现原来是json字符串格式不标准! 如:var a = & ...
- JSON.stringify()
写在前边 不言而喻,JSON.stringify() 是用来将合法的JSON数据字符串化的!然而在正常的工作中我们用到的只是最基础的功能:今天我们就探索不一样的JSON.stringify(). 基础 ...
- 前端必知必会--JSON.stringify()犀利的第三个参数
作者: 小华坚决上王者 建议阅读时间: 2 min 博客原文 JSON.stringify()是个经常使用的前端方法,这个函数可以传入三个参数,这里我安利下第三个参数,专门用来美化输出,先看下语法: ...
最新文章
- EMC CLARiiON 的 Alignment offset
- SAP 电商云 UI 如何知道当前的 breakpoint 是 xl - extremely large?
- jenkins 执行构建 并查看结果
- 解决在Android Studio 3.2找不到Android Device Monitor工具
- java原生的ajax怎么写,用原生js实现 ajax方法
- 程序员必须掌握的 CPU 硬核干货!
- 简单易用的ASP.NET UBB编辑器
- 什么是Asp.net Core?和 .net core有什么区别?(转)
- 解决树莓派 no wireless interfaces found问题
- Java打印斐波那契数列
- 文件_文件的上传及下载
- android 车票预定接口,聚合数据Android SDK 12306火车票查询订票演示示例 编辑
- 记录一些 arm64指令的用法
- Javaweb自驾游景点查询网站设计与实现
- VC dll 注入之钩子注入
- webhook是什么_敏锐度调度,Webhook和使整个业务按计划进行
- ipad越狱常用软件
- htcvr设备计算机配置,【HTC-VIVE】02-设备的安装与配置(上)
- ZIP压缩包密码加密、解密
- CES Asia直击:像飞机的水下机器人你见过吗
热门文章
- it之家评论在线搜索
- linux screen 窗口名称,linux下screen如何显示当前处在哪个screen(如何显示当前screenid...
- 汽车潮流新能向,“大魔王”实力出道
- 软件测试入坑建议!!!
- i.mx6 lvds接口的DE模式液晶屏驱动调试
- 如何取消wow3.0后与服务器设置的同步(设置、键位、宏)
- Wireshark数据流追踪和信息说明
- 建立DbLink 时报ORA-01017/ORA-02063分析及解决
- 运筹说 第85期 | 只有初中学历的数学家
- 【MindSpore易点通】如何实现梯度不回传以及梯度回传后不更新权重功能