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

目录
  • 前言
  • 第二个参数replacer 为数组
  • 第二个参数replacer 为函数
  • 第三个参数为 Number
  • 第三个参数为 String
  • toJSON 方法
  • 总结

前言

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()使用场景内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JSON.stringify()方法讲解

    JSON.stringify()方法是什么呢? 我们在向服务器发送数据时一般是字符串. 我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串. 语法 JSON.stringify(value[, replacer[, space]]) 参数说明: value: 必需,一个有效的 JSON 对象. replacer: 可选.用于转换结果的函数或数组. 如果 replacer 为函数,则 JSON.stringify 将调用该函数,并传入每个成员的键和值.使

  • JSON.parse()和JSON.stringify()使用介绍

    parse用于从一个字符串中解析出json对象,如 var str = '{"name":"huangxiaojian","age":"23"}' 结果: JSON.parse(str) Object age: "23" name: "huangxiaojian" __proto__: Object 注意:单引号写在{}外,每个属性名都必须用双引号,否则会抛出异常. stringify(

  • JSON.stringify 语法实例讲解

    认识javascript也不短的时间了,可是这个用法说实在的,我还是第一次见过,惭愧啊惭愧啊.于是乎,在网上找了写资料,写了些例子 希望能给园子们一些帮助. 作用:这个函数的作用主要是为了系列化对象的. 可能有些人对系列化这个词过敏,我的理解很简单.就是说把原来是对象的类型转换成字符串类型(或者更确切的说是json类型的).就这么简单.打个比方说,你有一个类,那么你可以通过这个方法转换成相应的json类型的.很简单吧. 接着看. 语法: JSON.stringify(value [, repla

  • 你可能不知道的JSON.stringify()详解

    前言 JSON已经逐渐替代XML被全世界的开发者广泛使用.本文深入讲解JavaScript中使用JSON.stringify的一些细节问题.首先简单回顾一下JSON和JavaScript: 不是所有的合法的JSON都是有效的JavaScript: JSON只是一个文本格式: JSON中的数字是十进制. 1. JSON.stringify let foo = { a: 2, b: function() {} }; JSON.stringify(foo); // "{ "a":

  • js JSON.stringify()基础详解

    JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串,如果指定了replacer是一个函数,则可以选择性的替换值,或者如果指定了replacer是一个数组,可选择性的仅包含数组指定的属性. 语法 JSON.stringify(value[, replacer [, space]]) 参数 value 将要序列化成 一个JSON 字符串的值. replacer 可选 如果该参数是一个函数,则在序列化过程中,被序列化的值的每个属性都会经过该函

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

    目录 前言 第二个参数replacer 为数组 第二个参数replacer 为函数 第三个参数为 Number 第三个参数为 String toJSON 方法 总结 前言 JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串,如果指定了一个 replacer 函数,则可以选择性地替换值,或者指定的 replacer 是数组,则可选择性地仅包含数组指定的属性. 语法如下: JSON.stringify(value[, replacer [, spac

  • JSON.stringify实现深拷贝的巨坑详解

    目录 当对象中有时间类型的元素时候-----时间类型会被变成字符串类型数据 当对象中有undefined类型或function类型的数据时 --- undefined和function会直接丢失 当对象中有NaN.Infinity和-Infinity这三种值的时候 --- 会变成null 当对象循环引用的时候 --会报错 总结 当对象中有时间类型的元素时候-----时间类型会被变成字符串类型数据 const obj = { date:new Date() } typeof obj.date ==

  • 简易版本JSON.stringify的实现及其六大特性详解

    目录 前言 JSON.stringify六大特性 特性一 特性二 特性三 特性四 特性五 特性六 手动实现stringify 总结 前言 JSON.stringify是一个使用非常高频的API,但是其却存在一个特性,我们在使用的过程中需要留意这些特性以避免为代码程序埋雷,那么接下来便一起动手实现一个简易版本的jsonStringify函数 JSON.stringify六大特性 特性一 布尔值.数字.字符串的包装对象在序列化过程中会自动转换成对应的原始值 现在有这么一个对象: const obj

  • 纯js实现高度可扩展关键词高亮方案详解

    目录 关键词高亮 1. 实现的主要功能: 2. 效果演示 高级定制用法 用法 1. react中使用 2. 原生js使用innerHTML 源码 核心源码 渲染方案 1. react组件渲染 2. innerHTML渲染 showcase演示组件 关键词高亮 日常需求开发中常见需要高亮的场景,本文主要记录字符串渲染时多个关键词同时高亮的实现方法,目的是实现高度可扩展的多关键词高亮方案. 1. 实现的主要功能: 关键词提取和高亮 多个关键词同时高亮 关键词支持正则匹配 每个关键字支持独立样式配置,

  • JS中对象与字符串的互相转换详解

    在使用 JSON2.JS 文件的 JSON.parse(data) 方法时候,碰到了问题: throw new SyntaxError('JSON.parse'); 查询资料,大概意思如下: JSON.parse方法在遇到不可解析的字符串时,会抛出SyntaxError异常. 即:JSON.parse(text, reviver),This method parses a JSON text to produce an object or array. t can throw a SyntaxE

  • JS中实现浅拷贝和深拷贝的代码详解

    (一)JS中基本类型和引用类型 JavaScript的变量中包含两种类型的值:基本类型值 和 引用类型值,在内存中的表现形式在于:前者是存储在栈中的一些简单的数据段,后者则是保存在堆内存中的一个对象. 基本类型值 在JavaScript中基本数据类型有 String , Number , Undefined , Null , Boolean ,在ES6中,又定义了一种新的基本数据类型 Symbol ,所以一共有6种. 基本类型是按值访问的,从一个变量复制基本类型的值到另一个变量后,这两个变量的值

  • Volley源码之使用方式和使用场景详解

    概述 Volley是Google在2013年推出的一个网络库,用于解决复杂网络环境下网络请求问题.刚推出的时候是非常火的,现在该项目的变动已经很少了.项目库地址为https://android.googlesource.com/platform/frameworks/volley 通过提交历史可以看到,最后一次修改距离今天已经有一段时间了.而volley包的release版本也已经很久没有更新了. author JeffDavidson<jpd@google.com> SunMar1316:3

  • JS中的防抖与节流及作用详解

    概念 函数防抖(debounce)是指在一定时间内,在动作被连续频繁触发的情况下,动作只会被执行一次,也就是说当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间,所以短时间内的连续动作永远只会触发一次,比如说用手指一直按住一个弹簧,它将不会弹起直到你松手为止. 函数节流是指一定时间内执行的操作只执行一次,也就是说即预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期,一个比较形象的例子是如果将水龙头拧紧直到水是以水滴的形式流出

  • Node.js基础入门之使用方式及模块化详解

    目录 什么是Node.js ? Node.js下载 Node.js和JavaScript的区别 Node.js安装与验证 Node.js使用方式 1. REPL模式 2. 文件模式 Node.js模块化 1. 什么是模块? 2. 模块分类 3. 创建自定义模块 4. 调用自定义模块 5. 模块测试 6. 主模块 7. 模块组成 在这个竞争日益激烈的今天,已经不是一门语言,一项技术走天下的时代了.正所谓艺多不压身,今天开始学习Node.js,学而时习之,不亦乐乎,希望可以借鉴经验,学以致用,如有不

  • Android Rxjava3 使用场景详解

    目录 一.Rxjava使用场景 1.多任务嵌套回调 2.多任务合并处理 3.轮询 4.其他小场景 1)倒计时 2)打字机效果 二.结合Rxbinding的使用场景 1.点击事件防抖 2.输入搜索优化 3.联合判断 三.防泄漏 1.Observable.unsubscribeOn 2.disposable.dispose 3.CompositeDisposable 参考了以下文章,表示感谢: 一.Rxjava使用场景 为了模拟实际场景,从wanandroid网站找了二个接口,如下:(对Wanand

随机推荐