1、是什么
JSON.stringify 方法将某个对象转换成 JSON 字符串形式

const userInfo= {name: 'zs',age: 20
}
console.log(JSON.stringify(userInfo));
// {"name":"zs","age":20}

2、语法
语法: 可以有三个参数,第一个是传入要序列化的值,第二个为函数或者数组,第三个是文本添加缩进、空格和换行符

JSON.stringify(value[, replacer[, space]])
  • value:第一个参数,将要序列后成 JSON 字符串的值。
  • replacer:【可选】第二个参数
    (1) 如果该参数是一个函数,则在序列化过程中,被序列化的值的每个属性都会经过该函数的转换和处理;
    (2) 如果参数是一个数组,则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。
    (3) 如果该参数为未提供或者null ,则对象所有的属性都会被序列化。
  • space:【可选】第三个参数,美化文本格式,文本添加缩进、空格和换行符,
    (1) 如果 该参数 是一个数字,则返回值文本在每个级别缩进指定数目的空格
    (2) 该参数最大值为10,如果 该参数大于 10,则文本缩进 10 个空格。
    (3)该参数也可以使用非数字,如:\t。最大值为10

3、replacer用法

参数replacer: 为函数的时候

第一种情况为函数的时候,则它有两个参数,键(key) 和 值(value),并且两个参数都会被序列化。我们可以通过此函数过滤一些我们要操作的键值

 - 序列化传入为对象时,若 replacer 函数返回 undefined 或者函数,则值会被忽略
// repalcer 接受两个参数 key value
function replacer(key, value) {// key value 分别为对象的每个键值对if (typeof value === "string") {return undefined ;}return value;
}
const userInfo= {name: 'zs',age: 20,sex: '男'
}
console.log(JSON.stringify(userInfo, replacer));
// {"age":20}
- 序列化传的是数组,若 replacer 函数返回 undefined ,当前值不会被忽略,而将会被 null 取代。
function replacer(key, value) {// key value 分别为对象的每个键值对if (typeof value === "string") {return undefined ;}return value;
}
const foodList= ['苹果',1,'2',222]
console.log(JSON.stringify(foodList, replacer));
// [null,1,null,222]

参数replacer:为数组时

则仅转换该数组中具有键值的成员

const userInfo= {name: 'zs',age: 20,sex: '男'
}
console.log(JSON.stringify(userInfo, ['name','sex']));
//{"name":"zs","sex":"男"}

4、注意点

  • 布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值
JSON.stringify([new Number(1), new String("String"), new Boolean(true)]);
// [1,"String",true]
  • 转换的值如果存在toJSON(),则toJSON() 方法返回什么值,序列化结果就返回什么值,其余值会被自动忽略
const userInfo= {name: 'zs',age: 20,sex: '男',toJSON(){return '我是toJSON方法的返回值'}
}
console.log(JSON.stringify(userInfo));
// "我是toJSON方法的返回值"
  • 出现Date 对象,则JSON.stringify() 会把Date 的值序列化 为时间格式字符串。
console.log(JSON.stringify(new Date()));
// '"2022-03-11T06:51:12.812Z"'
  • JSON.stringify()只能序列化可枚举属性,不可枚举的属性默认会被自动忽略
const userInfo= {}
Object.defineProperty(userInfo, "work", {content: '遛狗',adrress: '广州',enumerable: false
});
Object.defineProperty(userInfo, "time", {value: '11.am',enumerable: true
});
console.log(JSON.stringify(userInfo));
// {"time":"11.am"}
  • 出现Symbol值,则会被自动忽略
const userInfo= {name: 'zs',[Symbol('ageSymbol')]: 'ageSymbol'
}
console.log(JSON.stringify(userInfo));
// {"name":"zs"}

JSON.stringify用法相关推荐

  1. 前端 JavaScript 中 JSON.stringify() 的基本用法

    前言 在开发工作中,我们可能会碰到这样的需求:需要将某个对象内容弹窗显示或者保存在文件中,这时候如果你直接弹窗的话,很可能就是下面这样的: 因为很多接口它对参数有要求,比如只能是字符串之类的. 这时候 ...

  2. 关于JSON.stringify()的用法

    写页面的时候一直没整明白为什么吗对象格式的要通过JSON.stringify()这个方法转一下有什么好处,最近看其它的博客get到一些实用的技巧 第一种:在数组中提取数据 var data = [{n ...

  3. $.each 循环json以及JSON.parse() JSON.stringify() jQuery.parseJSON()的用法:

    $.each 循环 json 当循环的是 json 对象: var jsonStu = [{"name": "张三","score": &q ...

  4. 理解JSON.stringify()高级用法

    一:JSON.stringify() 该方法是把javascript对象转换成json字符串. 基本语法:JSON.stringify(value, [, replacer], [, space]) ...

  5. JSON.parse()、eval()、JSON.stringify()、jQuery.parseJSON()的用法

    一: JSON数据的两种解析方法 JSON.parse() .eval ()方法 1 :JSON.parse() : 用于将一个 JSON 字符串转换为 JavaScript 对象. var str ...

  6. 关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法

    JSON.parse(jsonString): 在一个字符串中解析出JSON对象 JSON.stringify(obj) : 将一个JSON对象转换成字符串 jQuery.parseJSON(json ...

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

    1.API介绍 MDN官网简介:JSON.stringify(value, replacer, space) 方法将一个 JavaScript 对象或值转换为 JSON 字符串,如果指定了一个 rep ...

  8. JSON.parse和JSON.stringify的用法

    平时我们在接收后端返回的json对象通常是一个字符串类型的object,所以一般我们要对这个object进行类型转化后,我们才能使用object里面的数据,而这其中涉及到两个必不可少的方法就是JSON ...

  9. JSON.stringify()

    写在前边 不言而喻,JSON.stringify() 是用来将合法的JSON数据字符串化的!然而在正常的工作中我们用到的只是最基础的功能:今天我们就探索不一样的JSON.stringify(). 基础 ...

  10. 浅谈 JSON.stringify 方法

    原文:浅谈 JSON.stringify 方法 一.前言 最近项目中,遇到需要将对象转换成字符串进行传递,上次写过一篇文章关于json字符串转换成json对象,json对象转换成字符串,值转换成字符串 ...

最新文章

  1. SmartOS之以太网精简协议栈TinyIP
  2. Android studio | From Zero To One ——简单布局(View和LinearLayout)
  3. 解决redis启动时的警告
  4. [iOS] photoKit获取所有照片
  5. 设计模式工厂方法模式
  6. AJAX无刷新搜索,即输即得(未完善…)
  7. python的进程和线程
  8. vue-cli+uni-app+vue3.0+ts构建自定义条件编译(飞书)小程序
  9. NoSQL数据库原理与应用
  10. 扫描微信二维码实现快速登录
  11. modscan32为主设备
  12. excel汇总报表如何做?
  13. Django推导Django内部模块:wsgiref与jinja2
  14. 上班,老实人和精明人的区别是什么?
  15. 跨国药企在中国 | 京东健康与卫材成立合资公司;西门子医疗、富士胶片参展中国国际医疗器械展...
  16. 【Playwright】关于无痕模式与无头模式
  17. 云主机服务比价与预测系统开发心得--第一周(1)--git技术
  18. 通过修改键盘映射替代损坏按键
  19. 字节校园精选 66 道高频经典笔面试题(含多种思路)(上)
  20. 从零开始学python第13天

热门文章

  1. PyTorch :transforms的二十二个方法
  2. Charles 基础使用
  3. 数学建模PPT(二)
  4. win桌面显示html,win10怎么把ie图标放桌面上 win10桌面添加ie浏览器图标的方法
  5. 电路设计中的防爆设计原理与注意事项分析
  6. 字体arial不支持样式regular的解决方法
  7. 全国计算机等级考试三级数据库知识点总结
  8. 织梦 - PHP开源网站管理系统
  9. 虚拟机中安装windows XP系统
  10. Oracle数据库的【安装包选择、下载】、安装与卸载