广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JS JSON.stringify()的5个使用场景详解
  • 129
分享到

JS JSON.stringify()的5个使用场景详解

json.stringify()使用jsonstringify作用json.stringify 2023-01-28 06:01:18 129人浏览 安东尼
摘要

目录前言第二个参数replacer 为数组第二个参数replacer 为函数第三个参数为 Number第三个参数为 StringtoJSON 方法总结前言 jsON.stringif

前言

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

语法如下:

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

  • 第一个参数 value:将要序列化成 一个 JSON 字符串的值。
  • 第二个参数 replacer:可选参数,如果该参数是一个函数,则在序列化过程中,被序列化的值的每个属性都会经过该函数的转换和处理;如果该参数是一个数组,则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中;如果该参数为 null 或者未提供,则对象所有的属性都会被序列化。
  • 第三个参数 space:可选参数,指定缩进用的空白字符串,用于美化输出(pretty-print);如果参数是个数字,它代表有多少的空格;上限为 10。该值若小于 1,则意味着没有空格;如果该参数为字符串(当字符串长度超过 10 个字母,取其前 10 个字母),该字符串将被作为空格;如果该参数没有提供(或者为 null),将没有空格。

第二个参数replacer 为数组

是的,JSON.stringify() 函数可以有第二个参数,它是要在控制台中打印的对象的键数组。下面来看看示例:

const arrayData = [
    {
        id: "0001",
        type: "donut",
        name: "Cake",
        ppu: 0.55,
        batters: {
            batter: [
                { id: "1001", type: "Regular" },
                { id: "1002", type: "Chocolate" },
                { id: "1003", type: "Blueberry" },
                { id: "1004", type: "Devil's Food" },
            ],
        },
        topping: [
            { id: "5001", type: "None" },
            { id: "5002", type: "Glazed" },
            { id: "5005", type: "Sugar" },
            { id: "5007", type: "Powdered Sugar" },
            { id: "5006", type: "Chocolate with Sprinkles" },
            { id: "5003", type: "Chocolate" },
            { id: "5004", type: "Maple" },
        ],
    },
];
console.log(JSON.stringify(arrayData, ["name"])); // [{"name":"Cake"}]

可以通过在第二个参数中将其作为数组传递仅需要打印的键,而不需要打印整个 JSON 对象。

第二个参数replacer 为函数

还可以将第二个参数作为函数传递,根据函数中编写的逻辑评估每个键值对。如果返回 undefined 键值对将不会打印。请看下面示例:

const user = {
    name: "DevPoint",
    age: 35,
};

const result = JSON.stringify(user, (key, value) =>
    typeof value === "string" ? undefined : value
);
console.log(result); // {"age":35}

上述代码的输出,可以用来过滤 JSON 数据的属性值。

第三个参数为 Number

第三个参数控制最终字符串中的间距。如果参数是一个数字,则字符串化中的每个级别都将缩进此数量的空格字符。

const user = {
    name: "DevPoint",
    age: 35,
    address: {
        city: "Shenzhen",
    },
};

console.log(JSON.stringify(user, null, 4));

输出打印的字符串格式如下:

{
    "name": "DevPoint",
    "age": 35,
    "address": {
        "city": "Shenzhen"
    }
}

第三个参数为 String

如果第三个参数是一个字符串,它将被用来代替上面显示的空格字符。

const user = {
    name: "DevPoint",
    age: 35,
    address: {
        city: "Shenzhen",
    },
};

console.log(JSON.stringify(user, null, "|---"));

输出打印的字符串格式如下:

{
|---"name": "DevPoint",
|---"age": 35,
|---"address": {
|---|---"city": "Shenzhen"
|---}
}

toJSON 方法

有一个名为 toJSON 的方法,它可以是任何对象的一部分作为其属性。 JSON.stringify 返回此函数的结果并将其字符串化,而不是将整个对象转换为字符串。

//Initialize a User object
const user = {
    name: "DevPoint",
    city: "Shenzhen",
    toJSON() {
        return `姓名:${this.name},所在城市:${this.city}`;
    },
};

console.log(JSON.stringify(user)); // "姓名:DevPoint,所在城市:Shenzhen"

总结

到此这篇关于JS JSON.stringify()使用场景详解的文章就介绍到这了,更多相关JSON.stringify()使用场景内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JS JSON.stringify()的5个使用场景详解

本文链接: https://www.lsjlt.com/news/178337.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JS JSON.stringify()的5个使用场景详解
    目录前言第二个参数replacer 为数组第二个参数replacer 为函数第三个参数为 Number第三个参数为 StringtoJSON 方法总结前言 JSON.stringif...
    99+
    2023-01-28
    json.stringify()使用 jsonstringify作用 json.stringify
  • 聊聊Js解构赋值的5个常见场景和实例
    本篇文章给大家带来了关于JavaScript的相关知识,其中主要跟大家聊一聊js解构赋值的5个常见场景和实例,感兴趣的朋友下面一起来看一下吧,希望对大家有帮助。解构赋值语法是一种 JavaScript 表达式,通过解构赋值, 可以将属性/值...
    99+
    2023-05-14
    JavaScript Vue.js
  • AndroidRxjava3使用场景详解
    目录一、Rxjava使用场景1、多任务嵌套回调2、多任务合并处理3、轮询4、其他小场景1)倒计时2)打字机效果二、结合Rxbinding的使用场景1、点击事件防抖2、输入搜索优化3、...
    99+
    2022-11-13
  • 45个GIT经典操作场景使用详解
    目录正文我刚才提交了什么我的提交信息(commit message)写错了我提交(commit)里的用户名和邮箱不对我想从一个提交(commit)里移除一个文件我想删除我的的最后一次...
    99+
    2022-11-13
  • JS前端中的设计模式和使用场景示例详解
    目录引言策略模式1.绩效考核2.表单验证策略模式的优缺点:代理模式1.图片懒加载:2.缓存代理总结引言 相信大家在日常学习和工作中都多多少少听说/了解/使用过 设计模式,我们都知道,...
    99+
    2022-11-13
    JS前端设计模式场景 前端设计模式使用场景
  • JavaScript解构赋值的5个常见场景与实例教程
    目录前言1. 提取数据 2. 别名取值 3. 动态属性 4. 对象解构中的 Rest 5. 默认值 总结 前言 解构赋值语法是一种 JavaScript 表达式,通过解构赋值, 可以...
    99+
    2022-11-12
  • 详解Golang中Context的三个常见应用场景
    目录超时取消取消后续操作上下文传值超时取消 假设我们希望HTTP请求在给定时间内完成,超时自动取消。 首先定义超时上下文,设定时间返回取消函数(一旦超时用于清理资源)。调用取消函数取...
    99+
    2022-12-29
    Golang Context应用场景 Golang Context应用 Golang Context
  • Redis中5种数据结构的使用场景
    这篇文章给大家分享的是有关Redis中5种数据结构的使用场景的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。一、redis 数据结构使用场景原来看过 redisbook 这本书,对...
    99+
    2022-10-18
  • 详解Spring的@Value作用与使用场景
    目录1 简介2 三种形式3 使用场景4 引入配置文件5 使用举例1 简介 不得不说,Spring为大家提供许多开箱即用的功能,@Value就是一个极其常用的功能,它能将配置信息注入到...
    99+
    2023-05-19
    Spring @Value @Value 作用
  • js中symbol类型以及symbol的三大应用场景详解
    目录1.什么是symbol2.注意点3. symbol的应用4.symbol自带的方法总结1.什么是symbol 1.什么Symbol Symbol是ES6中新增的一种数据类型, 被...
    99+
    2022-11-13
  • 详解Java中$符的各种使用场景
    目录前言1. $符号七大应用场景1.1 内部类与匿名内部类1.2 Lambda表达式与方法引用1.3. 自动生成的字段与方法1.4. 自定义类名与变量名1.5. 生成的代码和工具1....
    99+
    2023-05-17
    Java $符使用场景 Java $符使用 Java $符
  • 详解Linux中atime,mtime,ctime的使用场景
    目录一、文件与文件夹三个时间:atime,mtime,ctime的含义二、stat命令查看文件的时间三、ll命令查看文件时间(对照stat命令可验证)四、测试创建/修改文件的时间五、常用命令关于文件时间相关一、文件与文件...
    99+
    2022-10-13
  • JVM钩子函数的使用场景详解
    目录一、问题引入背景原始思路二、JVM钩子使用场景正常关闭异常关闭强制关闭三、回归问题一、问题引入 背景 在编写一个需要持续在后台运行的程序的时候遇到了这样的场景:我的程序在主函...
    99+
    2022-11-12
  • 详解Java的引用类型及使用场景
    目录1. 强引用(Strong Reference)2. 软引用(Soft Reference)3. 弱引用(Weak Reference)4. 虚引用(Phantom Refere...
    99+
    2022-11-12
  • ReactRefCallback使用场景最佳实践详解
    目录引言ref callback使用场景1. DOM 元素挂载并滚动到它所在的位置2. 当 DOM 元素变化时的重新渲染3. 在 render 中访问 DOM 元素4. 共享 DOM...
    99+
    2023-01-12
    React Ref Callback场景实践 React Ref Callback
  • vue中filter的应用场景详解
    filter一般用于过滤某些值,比如我这个字段是空,可是我想在前端显示“–”,就可以使用到它了。 最近碰到一个需求就是要给某些字段可以设置权限去以其他形式显示,比如以“***”显示...
    99+
    2022-11-12
  • C++高精度算法的使用场景详解
    目录描述1. 高精度加法1. 思路2. 代码2. 高精度减法1. 思路2. 代码3. 如果出现被减数的位数小于减数时呢描述 如果要计算的数超过了long long怎么解决 &mdas...
    99+
    2022-11-13
  • MySQL使用表锁和行锁的场景详解
    目录前言全局锁表级锁表锁元数据锁意向锁行级锁总结前言 MySQL Innodb 的锁可以说是执行引擎的并发基础了,有了锁才能保证数据的一致性。众所周知,我们都知道 Innodb 有全...
    99+
    2022-11-13
  • Redis中5种数据结构的使用场景介绍
    一、redis 数据结构使用场景 原来看过 redisbook 这本书,对 redis 的基本功能都已经熟悉了,从上周开始看 redis 的源码。目前目标是吃透 redis 的数据结构。我们都知道,在 re...
    99+
    2022-06-04
    种数 场景 结构
  • SpringBoot Aop 详解和多种使用场景解析
    前言 aop面向切面编程,是编程中一个很重要的思想本篇文章主要介绍的是SpringBoot切面Aop的使用和案例 什么是aop AOP(Aspect OrientedProgramm...
    99+
    2022-11-12
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作