JSON.stringify() 的 5 使用场景

简介: 笔记

20.png


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"


相关文章
|
JSON JavaScript 前端开发
JSON.stringify() 的 5 种使用场景
JSON.stringify() 的 5 种使用场景
347 0
|
XML JSON JavaScript
JSON Path 语法介绍和使用场景
JSON Path 语法介绍和使用场景
2213 0
|
7月前
|
机器学习/深度学习 JSON 监控
淘宝拍立淘按图搜索与商品详情API的JSON数据返回详解
通过调用taobao.item.get接口,获取商品标题、价格、销量、SKU、图片、属性、促销信息等全量数据。
|
6月前
|
JSON API 数据格式
淘宝拍立淘按图搜索API系列,json数据返回
淘宝拍立淘按图搜索API系列通过图像识别技术实现商品搜索功能,调用后返回的JSON数据包含商品标题、图片链接、价格、销量、相似度评分等核心字段,支持分页和详细商品信息展示。以下是该API接口返回的JSON数据示例及详细解析:
|
6月前
|
JSON 算法 API
Python采集淘宝商品评论API接口及JSON数据返回全程指南
Python采集淘宝商品评论API接口及JSON数据返回全程指南
|
6月前
|
JSON API 数据安全/隐私保护
Python采集淘宝拍立淘按图搜索API接口及JSON数据返回全流程指南
通过以上流程,可实现淘宝拍立淘按图搜索的完整调用链路,并获取结构化的JSON商品数据,支撑电商比价、智能推荐等业务场景。
|
7月前
|
JSON 缓存 自然语言处理
多语言实时数据微店商品详情API:技术实现与JSON数据解析指南
通过以上技术实现与解析指南,开发者可高效构建支持多语言的实时商品详情系统,满足全球化电商场景需求。
|
7月前
|
JSON API 数据格式
干货满满!淘宝商品详情数据,淘宝API(json数据返回)
淘宝商品详情 API 接口(如 taobao.item.get)的 JSON 数据返回示例如下
|
8月前
|
JSON 算法 安全
淘宝商品详情API接口系列,json数据返回
淘宝开放平台提供了多种API接口用于获取商品详情信息,主要通过 淘宝开放平台(Taobao Open Platform, TOP) 的 taobao.tbk.item.info.get(淘宝客商品详情)或 taobao.item.get(标准商品API)等接口实现。以下是关键信息及JSON返回示例:
|
6月前
|
JSON 中间件 Java
【GoGin】(3)Gin的数据渲染和中间件的使用:数据渲染、返回JSON、浅.JSON()源码、中间件、Next()方法
我们在正常注册中间件时,会打断原有的运行流程,但是你可以在中间件函数内部添加Next()方法,这样可以让原有的运行流程继续执行,当原有的运行流程结束后再回来执行中间件内部的内容。​ c.Writer.WriteHeaderNow()还会写入文本流中。可以看到使用next后,正常执行流程中并没有获得到中间件设置的值。接口还提供了一个可以修改ContentType的方法。判断了传入的状态码是否符合正确的状态码,并返回。在内部封装时,只是标注了不同的render类型。再看一下其他返回的类型;
333 3

热门文章

最新文章