zoukankan      html  css  js  c++  java
  • JSON.stringify()

    概述

    JSON.stringify() 方法可以将任意的 JavaScript 值序列化成 JSON 字符串。

    语法

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

    参数

    value
    将要序列化成 JSON 字符串的值。
    replacer 可选
    如果该参数是一个函数,则在序列化过程中,被序列化的值的每个属性都会经过该函数的转换和处理;如果该参数是一个数组,则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中。关于该参数更详细的解释和示例,请参考使用原生的 JSON 对象一文。
    space 可选
    指定缩进用的空白字符串,用于美化输出(pretty-print)。

     具体可以参考 MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

    一、通常情况下,我们只使用如下代码进行简单的 JSON 字符串化:

    var JSONobj = {"name" : "value","arr" : ['str1','str2']};
    console.log(JSON.stringify(JSONobj));
    //结果为{"name":"value","arr":["str1","str2"]} 

    二、实际上,第二个参数也有很重要的用途,比如对对象内的key-value 依次进行处理后转换为字符串:

    var JSONobj = {"name" : "value","name2":"value2","arr" : ['str1','str2',{'arrObj' : 'arrObj'}]};
    JSON.stringify(JSONobj,function(key,value){
       console.log(key,value)
    });    
    //结果为:JSONobj对象(value值),key无值

    三、当需要展示的 json 串对用户友好,增加可读性时,可以使用第三个参数:

    var JSONobj = {"name" : "value","arr" : ['str1','str2',{'arrObj' : 'arrObj'}]};
    JSON.stringify(JSONobj, null, '	');
    /* "{
        "name": "value",
        "arr": [
            "str1",
            "str2",
            {
                "arrObj": "arrObj"
            }
        ]
    }" */

    实际上以上结果经过了两次处理:

    1. 为每一个 ‘{’、‘}’、value 后的‘,’ 末尾添加一个

    2. 为每一个一级 key 前面添加一个 (tab制表符,即本例中第三个参数值),二级 key 前面加两个 ,以此类推。

    为了更清晰的验证以上两点,进行如下测试:

    var JSONobj = {"name" : "value","arr" : ['str1','str2',{'arrObj' : 'arrObj'}]};
    JSON.stringify(JSONobj, null, '	').replace(/
    /g,'|--N--|').replace(/	/g,'|--T--|');
    //结果为"{|--N--||--T--|"name": "value",|--N--||--T--|"arr": [|--N--||--T--||--T--|"str1",|--N--||--T--||--T--|"str2",|--N--||--T--||--T--|{|--N--||--T--||--T--||--T--|"arrObj": "arrObj"|--N--||--T--||--T--|}|--N--||--T--|]|--N--|}"
  • 相关阅读:
    react-redux源码解析
    redux的源码解析
    react + dva + ant架构后台管理系统(一)
    fetch 代替 XMLHttpRequest (json-server 模拟后台接口)
    Es6 Generator函数
    java 的数据类型
    vue为app做h5页面,如何做到同域名对应不同版本的h5代码
    vue-devtools 的安装和使用
    jq源码解析之绑在$,jQuery上面的方法
    jquery的extend方法(源码解析)
  • 原文地址:https://www.cnblogs.com/zldream1106/p/JSON_stringify.html
Copyright © 2011-2022 走看看