博主信息
编程三昧
博文
9
粉丝
0
评论
0
访问量
2865
积分:0
P豆:18

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

2021年06月29日 20:07:32阅读数:495博客 / 编程三昧/ JavaScript

前言

在开发工作中,我们可能会碰到这样的需求:需要将某个对象内容弹窗显示或者保存在文件中,这时候如果你直接弹窗的话,很可能就是下面这样的:image-20210629184729132

因为很多接口它对参数有要求,比如只能是字符串之类的。

这时候,就需要我们将对象转换为字符串进行输出,JSON.stringify() 方法就可以帮我们实现将对象转为字符串的过程。

方法描述

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

语法

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

参数说明

  • value   将要序列化成 一个 JSON 字符串的值。

  • replacer(可选)

    • 如果该参数是一个函数,则在序列化过程中,被序列化的值的每个属性都会经过该函数的转换和处理;

    • 如果该参数是一个数组,则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中;

    • 如果该参数为 null 或者未提供,则对象所有的属性都会被序列化。

  • space(可选)    指定缩进用的空白字符串,用于美化输出(pretty-print);如果参数是个数字,它代表有多少的空格;上限为10。

    • 如果省略space,则将生成返回值文本,而没有任何额外空格。

    • 如果 space是一个数字,则返回值文本在每个级别缩进指定数目的空格。 如果 space 大于 10,则文本缩进 10 个空格。

    • 如果 space是一个非空字符串(例如“\t”),则返回值文本在每个级别中缩进字符串中的字符。

    • 如果 space 是长度大于 10个字符的字符串,则使用前 10 个字符。

返回值

一个表示给定值的JSON字符串。

常规用法

console.log(JSON.stringify({name: "obj"}))// '{"name": "obj"}'

repalacer 参数

replacer 参数可以是一个函数或者一个数组。作为函数,它有两个参数,键(key)和值(value),它们都会被序列化。

在开始时, replacer 函数会被传入一个空字符串作为 key 值,代表着要被 stringify 的这个对象。随后每个对象或数组上的属性会被依次传入。

函数应当返回JSON字符串中的value, 如下所示:

  • 如果返回一个 Number,转换成相应的字符串作为属性值被添加入 JSON 字符串。

  • 如果返回一个 String,该字符串作为属性值被添加入 JSON 字符串。

  • 如果返回一个 Boolean, “true” 或者 “false” 作为属性值被添加入 JSON 字符串。

  • 如果返回任何其他对象,该对象递归地序列化成 JSON 字符串,对每个属性调用 replacer 方法。除非该对象是一个函数,这种情况将不会被序列化成 JSON 字符串。

  • 如果返回 undefined,该属性值不会在 JSON 字符串中输出。

有以下对象:

const data = [    {        name: "person1",        sex: 0,        age: 18,        isStudent: true    },    {        name: "person2",        sex: 1,        age: 25,        isStudent: false    },    {        name: "person3",        sex: 0,        age: 15,        isStudent: true    }]

接下来我们针对这个对象做各种需求实现。

只输出姓名和性别

const res = JSON.stringify(data, ["name", "sex"])console.log(res);// `[{"name":"person1","sex":0},{"name":"person2","sex":1},{"name":"person3","sex":0}]`

JSON.stringify() 提供了分离出自己需要的那部分数据。

将性别转为中文字符

const res = JSON.stringify(data, (key, value) => {    if (key == 'sex') {        return ["女", '男'][value];    }    return value;})console.log(res);// `[{"name":"person1","sex":"女","age":18,"isStudent":true},{"name":"person2","sex":"男","age":25,"isStudent":false},{"name":"person3","sex":"女","age":15,"isStudent":true}]`

JSON.stringify() 提供了回调函数做一个映射关系。

space 参数

const res = JSON.stringify(data, ["name", "sex"],4)console.log(res);

输出如下:

image-20210629193959927

这里使用了 4 个空格作为层级缩进。

注意:使用 “\t” 得到的结果和使用 4 个空格得到的结果看起来很像,但实际不是一回事。

总结

JSON.stringify() 方法可以通过参数控制输出的数据和格式,灵活应用它会大大提高我们的工作效率。

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • javascript,可以使JSON.stringify()”方来将json对象转为字符串,然后返回包含JSON文字符串;语格式“JSON.stringify(value)”。
    web开发需要学习技术有:1、HTML础知识,主要包含每个标签使;2、div和css知识,这是web础;3、javascript编程,主要包括jquery和其它框架。
    javascript,可以使JSON.stringify()”方来将对象转为json,语格式“JSON.stringify(value)”;该方于将JavaScript值转换为JSON字符串
    javascript,可以使转化函数“JSON.stringify()”来将数组转为json格式,语格式“JSON.stringify(数组)”;该函数可以对数组或对象进行转换,然后返回包含JSON
    Bootstrap,来自 Twitter,是目最受欢迎框架。Bootstrap 是于 HTML、CSS、JAVASCRIPT ,它简洁灵活,使得 Web 开发更加快捷。
    javascript是运行在浏览器上语言,连续多年,被评为全球最受欢迎编程语言。是开发必备三大,最具杀伤力。如果开发是降龙十八掌,好么javascript就是第18掌:亢龙有悔。
    jQueryEasyUI是指一个js框架,于jQuery实现,该框架集成了各种户界面插件;easyui还提供了建立现代化具有交互性javascript必要功能。
    区别:1、bootstrap是于HTML、CSS、JAVASCRIPT框架;而html5是一种语言。
    javascript有:1、嵌入动态文于HTML页面;2、对浏览器事件做出响应;3、读写HTML元素;4、在数据被提交到服务器之验证数据;5、检测访客浏览器信息;6、于Node.js技术进行服务器编程
    篇文章给大家介绍一下TypeScriptEnum(枚举)语,聊聊Enum,如何使原生JavaScript来实现Enum。
    Vue是JavaScript于构建户界面渐进式框架,支持响应式数据操作,uni-app是使Vue开发框架,也支持定义和动态绑定属性和方
    JavaScript技术非常重要内容,于实现各种动态效果,提升户体验感;若关闭JavaScript会造成页面上很多功能无使,使得网站体验差或网站部分功能无使
    JavaScript技术非常重要内容,于实现各种动态效果,提升户体验感;若关闭JavaScript会造成页面上很多功能无使,使得网站体验差或网站部分功能无使
    在过去十年,我最热衷事情之一就是开发(特别是JavaScript)。作为一个“匠人”,我喜欢专研各种工具。在文,我会为你介绍一些老式console来debug技巧。
    TCP服务在网络应十分常见,目大多数都是于TCP搭建而成。net模块提供了一个异步网络包装器,于TCP网络编程,它包含了创建服务器和客户
    javascript删除当节点:1、新建一个html文档并写入结构;2、在script标签写绑定事件函数;3、获取div父节点,然后removeChild函数删除节点即可。
    JavaScriptsplit函数可以使正规表达规则进行各种模式分割,该函数是“字符串.split(分隔符)”。
    JSON,JavaScript对象表示JavaScript Object Notation】。
    php实现上传进度条:首先向服务器上传一个文件;然后PHP将此次文件上传详细信息存储在session当;接着Ajax周期性请求一个服务器;最后通过浏览器Javascript显示更新进度条即可
    读取对象属性和访问数组项是常见操作。销毁分配使这些操作变得更加轻松和简洁。在,除了之外,我还将介绍JavaScript5种有趣解构