精华内容
下载资源
问答
  • JSON.Stringify

    2021-01-27 14:18:09
    JSON.stringify 是日常开发中经常用到的 JSON 对象中的一个方法,JSON 对象包含两个方法:一是用于解析成 JSON 对象的 parse();二是用于将对象转换为 JSON 字符串方法的 stringify() JSON.parse 【参考链接: ...

    JSON.stringify 是日常开发中经常用到的 JSON 对象中的一个方法,JSON 对象包含两个方法:一是用于解析成 JSON 对象的 parse();二是用于将对象转换为 JSON 字符串方法的 stringify()

    JSON.parse
    【参考链接: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse】

    JSON.parse() 方法用来解析JSON字符串,构造由字符串描述的JavaScript值或对象。提供可选的 reviver 函数用以在返回之前对所得到的对象执行变换(操作)。

    const json = '{"result":true, "count":42}';
    const obj = JSON.parse(json);
    
    console.log(obj.count);
    // expected output: 42
    
    console.log(obj.result);
    // expected output: true
    -------
    JSON.parse('{"p": 5}', function (k, v) {
        if(k === '') return v;     // 如果到了最顶层,则直接返回属性值,
        return v * 2;              // 否则将属性值变为原来的 2 倍。
    });                            // { p: 10 }
    

    JSON.stringify
    【参考链接:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify】

    JSON.stringify 方法是将一个 JavaScript 对象或值转换为 JSON 字符串,默认该方法其实有三个参数:第一个参数是必选,后面两个是可选参数非必选。第一个参数传入的是要转换的对象;第二个是一个 replacer 函数,比如指定的 replacer 是数组,则可选择性地仅处理包含数组指定的属性;第三个参数用来控制结果字符串里面的间距,后面两个参数整体用得比较少。

    JSON.stringify({ x: 1, y: 2 });
    // "{"x":1,"y":2}"
    JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] })
    // "{"x":[10,null,null,null]}"
    /* 第二个参数的例子 */
    function replacer(key, value) {
      if (typeof value === "string") {
        return undefined;
      }
      return value;
    }
    var foo = {foundation: "Mozilla", model: "box", week: 4, transport: "car", month: 7};
    var jsonString = JSON.stringify(foo, replacer);
    console.log(jsonString);
    // "{"week":4,"month":7}"
    /* 第三个参数的例子 */
    JSON.stringify({ a: 2 }, null, " ");
    /* "{
     "a": 2
    }"*/
    JSON.stringify({ a: 2 }, null, "");
    // "{"a":2}"
    

    手动实现一个JSON.Stringify

    function jsonStringify(data) {
      let type = typeof data;
    
      if(type !== 'object') {
        let result = data;
        //data 可能是基础数据类型的情况在这里处理
        if (Number.isNaN(data) || data === Infinity) {
           //NaN 和 Infinity 序列化返回 "null"
           result = "null";
        } else if (type === 'function' || type === 'undefined' || type === 'symbol') {
          // 由于 function 序列化返回 undefined,因此和 undefined、symbol 一起处理
           return undefined;
        } else if (type === 'string') {
           result = '"' + data + '"';
        }
        return String(result);
      } else if (type === 'object') {
         if (data === null) {
            return "null"  // 第01讲有讲过 typeof null 为'object'的特殊情况
         } else if (data.toJSON && typeof data.toJSON === 'function') {
            return jsonStringify(data.toJSON());
         } else if (data instanceof Array) {
            let result = [];
            //如果是数组,那么数组里面的每一项类型又有可能是多样的
            data.forEach((item, index) => {
            if (typeof item === 'undefined' || typeof item === 'function' || typeof item === 'symbol') {
                   result[index] = "null";
               } else {
                   result[index] = jsonStringify(item);
               }
             });
             result = "[" + result + "]";
             return result.replace(/'/g, '"');
          } else {
             // 处理普通对象
             let result = [];
             Object.keys(data).forEach((item, index) => {
                if (typeof item !== 'symbol') {
                  //key 如果是 symbol 对象,忽略
                  if (data[item] !== undefined && typeof data[item] !== 'function' && typeof data[item] !== 'symbol') {
                    //键值如果是 undefined、function、symbol 为属性值,忽略
                    result.push('"' + item + '"' + ":" + jsonStringify(data[item]));
                  }
                }
             });
             return ("{" + result + "}").replace(/'/g, '"');
            }
        }
    }
    

    测试:

    let nl = null;
    console.log(jsonStringify(nl) === JSON.stringify(nl));
    // true
    let und = undefined;
    console.log(jsonStringify(undefined) === JSON.stringify(undefined));
    // true
    let boo = false;
    console.log(jsonStringify(boo) === JSON.stringify(boo));
    // true
    let nan = NaN;
    console.log(jsonStringify(nan) === JSON.stringify(nan));
    // true
    let inf = Infinity;
    console.log(jsonStringify(Infinity) === JSON.stringify(Infinity));
    // true
    let str = "jack";
    console.log(jsonStringify(str) === JSON.stringify(str));
    // true
    let reg = new RegExp("\w");
    console.log(jsonStringify(reg) === JSON.stringify(reg));
    // true
    let date = new Date();
    console.log(jsonStringify(date) === JSON.stringify(date));
    // true
    let sym = Symbol(1);
    console.log(jsonStringify(sym) === JSON.stringify(sym));
    // true
    let array = [1,2,3];
    console.log(jsonStringify(array) === JSON.stringify(array));
    // true
    let obj = {
        name: 'jack',
        age: 18,
        attr: ['coding', 123],
        date: new Date(),
        uni: Symbol(2),
        sayHi: function() {
            console.log("hi")
        },
        info: {
            sister: 'lily',
            age: 16,
            intro: {
                money: undefined,
                job: null
            }
        }
    }
    console.log(jsonStringify(obj) === JSON.stringify(obj));
    // true
    

    注:
    在这里插入图片描述

    1. 由于 function 返回 ‘null’, 并且 typeof function 能直接返回精确的判断,故在整体逻辑处理基础数据类型的时候,会随着 undefined,symbol 直接处理了;
    2. 由于 typeof null 的时候返回’object’,故 null 的判断逻辑整体在处理引用数据类型的逻辑里面;
    3. 关于引用数据类型中的数组,由于数组的每一项的数据类型又有很多的可能性,故在处理数组过程中又将 undefined,symbol,function 作为数组其中一项的情况做了特殊处理;
    4. 同样在最后处理普通对象的时候,key (键值)也存在和数组一样的问题,故又需要再针对上面这几种情况(undefined,symbol,function)做特殊处理;
    5. 最后在处理普通对象过程中,对于循环引用的问题暂未做检测,如果是有循环引用的情况,需要抛出 Error;
    6. 根据官方给出的 JSON.stringify 的第二个以及第三个参数的实现,本段模拟实现的代码并未实现
    展开全文
  • JSON.stringify

    2019-10-17 11:03:41
    JSON.stringify是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串。 1.方法的定义 JSON.stringify(value,replace,space) 参数一:将要转换成JSON字符串的值 参数二:可选,为函数时,被序列化的值的每个...

    JSON.stringify是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串。

    1.方法的定义

    JSON.stringify(value,replace,space)

    参数一:将要转换成JSON字符串的值

    参数二:可选,为函数时,被序列化的值的每个属性都会经过该函数的转换和处理;

                  为数组时,则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中。

    参数三:可选,格式化输出,用于美化输出。

                   为数字时,表示每个属性前面添加n个空格(最多不超过10个);

                   为字符串时,则该字符串会添加在每行前面(最多不超过10个)。

    返回值:JSON字符串

    2.方法的使用

    第一个参数

    JSON.stringify(true); // 'true'
    JSON.stringify({name: "Sara",age: 14}); // 输出结果:  "{"name":"Sara","country":14}"
    JSON.stringify("json string!"); // 输出结果: ""json string!""
    JSON.stringify([1,2,"open","the","door"]); // 输出结果: "[1,2,"open","the","door"]"
    JSON.stringify([new Number(1), new String("false"), new Boolean(false)]); 
    // '[1,"false",false]'
    
    // 单独出现undefined、任意的函数以及 symbol 值,会返回undefined
    // 在数组中会返回null值;在对象中会被忽略
    JSON.stringify(function(){}); //undefined
    JSON.stringify({x: undefined, y: Object, z: Symbol("")}); // '{}'
    JSON.stringify([undefined, Object, Symbol("")]); // '[null,null,null]' 
    
    // 正则对象会被转换成空对象
    JSON.stringify(/foo/) // "{}"
    
    // 不可枚举的属性会被忽略
    let obj = {};
    Object.defineProperties(obj, {
      'foo': {
        value: 1,
        enumerable: true
      },
      'bar': {
        value: 2,
        enumerable: false
      }
    });
    JSON.stringify(obj); // {"foo":1}
    

    第二个参数

    // 函数参数,更改默认的字符串化的行为
    function replacer(key, value) {
      if (typeof value === "string") {
        return undefined;
      }
      return value;
    }
    let foo = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7};
    let jsonString = JSON.stringify(foo, replacer); //"{"week":45,"month":7}"
    
    // 数组参数,指定需要转成字符串的属性
    JSON.stringify(foo, ["Mozilla", 7]); // "{"foundation":"Mozilla","month":7}"
    
    
    // 多级嵌套的对象
    let o1 = {a: {b:1}};
    // 1.递归处理所有的键
    function f(key, value) {
      // 处理三次,依次输出 []:{"a":{"b":1}};  [a]:{"b":1};   [b]:1;
      console.log("["+ key +"]:" + JSON.stringify(value));
      return value;
    }
    JSON.stringify(o1, f); // "{"a":{"b":1}}"
    
    let o2 = {a: 1};
    // 2.递归处理中,每一次处理的对象,都是前一次返回的值。
    // 函数修改了对象o2为{b:2},接着JSON.stringify方法就递归处理修改后的对象o2,
    // 此时key为b,value为2,所以value*2=4,即结果为{b:4}
    function f(key, value){
      if (typeof value === "object"){
        return {b: 2};
      }
      return value*2;
    }
    JSON.stringify(o2,f); // '{"b":4}'
    
    // 3.如果处理函数返回undefined或没有返回值,则该属性会被忽略。
    function f(key, value) {
      if (typeof(value) == "string") {
        return undefined;
      }
      return value;
    }
    JSON.stringify({ a:"abc", b:123 }, f); // '{"b":123}'

    第三个参数

    JSON.stringify({ a: 2 }, null, " ");   // '{\n"a": 2\n}'
    // 数字参数
    JSON.stringify({ a: 2 }, null, 2);   // '{\n  "a": 2\n}'
    
    // 字符串参数
    JSON.stringify({ p1:1, p2:2 }, null, "|-");
    // "{
    // |-"p1": 1,
    // |-"p2": 2
    // }"
    
    //\t表示用制表符进行缩进
    JSON.stringify({ uno: 1, dos : 2 }, null, '\t')
    // '{            \
    //     "uno": 1, \
    //     "dos": 2  \
    // }' 
    

    JSON.stringify 方法处理的对象,包含一个 toJSON 方法

    let obj = {
      foo: 'foo',
      toJSON: function () {
        return 'bar';
      }
    };
    JSON.stringify(obj);      // '"bar"'
    JSON.stringify({x: obj}); // '{"x":"bar"}'
    
    // Date对象就部署了一个自己的toJSON方法。
    JSON.stringify(new Date("2011-07-29")); // "2011-07-29T00:00:00.000Z"
    
    // toJSON方法的一个应用是,可以将正则对象自动转为字符串。
    RegExp.prototype.toJSON = RegExp.prototype.toString;
    JSON.stringify(/foo/); // "/foo/"
    //分析:在正则对象的原型上面部署了toJSON方法,将其指向toString方法,
    //那么toJSON就实现了返回正则表达式的字符串值,因此遇到转换成JSON时,
    //正则对象就先调用toJSON方法转为字符串,然后再被JSON.stingify方法处理。
    

    3.常用的使用场景

    1)判断数组是否包含某对象,或者判断对象是否相等。

    let dataArr =[{name:'Tom'},{name:'Lucky'},{name:"Lili"}]
    let obj ={name:'Tom'};
    let flag = JSON.stringify(dataArr).indexOf(JSON.stringify(obj));
    console.log(flag);
    
    let arr1 = [1,2,3];
    let arr2 =[1,2,3];
    console.log(JSON.stringify(arr1)===JSON.stringify(arr2));

    2)使用localStorage/sessionStorage时可以存储对象。

    let val =[1,2,3];
    function setLocalStorage(key,val){
        window.localStorage.setItem(key,JSON.stringify(val));
    };
    function getLocalStorage(key){
        let val = JSON.parse(window.localStorage.getItem(key));
        return val;
    };
    setLocalStorage('demo',[1,2,3]);
    getLocalStorage('demo')

    3)实现对象深拷贝

    function deepClone(data){
       let jsonStr = JSON.stringify(data);
       let obj = JSON.parse(jsonStr);
       return obj;
     }
     let arr = [1,2,3];
     let arrClone = deepClone(arr);
     arr[0] = 2;
     console.log(arr,arrClone); //[2, 2, 3]  [1, 2, 3]

     

     

    展开全文
  • JSON.stringify()

    2020-12-14 05:31:40
    JSON.stringify() JSON 通常用于与服务端交换数据。 在向服务器发送数据时一般是字符串。 我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。 语法 JSON.stringify(value[, replacer[, space]])...
  • 字符串化是eval作为JSON.stringify是JSON.parse 。 安装 npm install javascript-stringify --save 用法 import { stringify } from "javascript-stringify" ; 该API与JSON.stringify类似: value转换为字符串的...
  • 本文给大家简单描述了下JSON.parse()和JSON.stringify()的异同点,十分的实用,有需要的小伙伴可以参考下
  • json-stringify-safe, 在循环引用( 如 JSON.stringify ) 上,但不引发 json-stringify-safe类似 JSON.stringify,但不引发循环引用。用法采用与 JSON.stringify 相同的参数。var stringify = require('json-...
  • 主要介绍了详解关于JSON.parse()和JSON.stringify()的性能小测试,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 今天终于把JSON.stringify()跟JSON.parse()这两个方法给搞清楚了,下面小编在此记录下! JSON.tringify():把一个json数据转化成JSON string JSON.stringify({uno:1,dos:2},null,'\t') "{ "uno": 1, "dos": 2 }...
  • 本文深入讲解JavaScript中使用JSON.stringify的一些细节问题。首先简单回顾一下JSON和JavaScript: 不是所有的合法的JSON都是有效的JavaScript; JSON只是一个文本格式; JSON中的数字是十进制。 1. JSON....
  • 调用JSON.stringify将对象转为对应的字符串时,如果包含时间对象,时间对象会被转换为国家标准时间(ISO),而不是当前国家区域的时间,测试代码如下: 代码如下: [removed]  //var o = new Date();  //console....
  • JSON.stringify是浏览器高版本带的一个将JS的Objtect对象转换为JSON字符串的一个方法,不过再IE6下面,并不存在JSON这一对象,因此,用到此方法时,需要写一套兼容性的代码。接下来通过本文给大家分享JS实现JSON....
  • 主要介绍了JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能,结合实例形式分析了JSON.parse()与JSON.stringify()方法实现深拷贝的相关实现技巧与操作注意事项,需要的朋友可以参考下
  • JSON.stringify和JSON.parse

    2020-11-04 22:59:21
    typeof JSON.stringify// "function" 一、JSON.stringify JSON.stringify() 将一个JavaScript对象/值转化为字符串,字符串为JSON格式。 ()中可以填的内容 JSON.stringify('abc') // ""abc"" JSON

    JSON介绍

    JSON是JavaScript标准内置对象。它自带两个函数parse和stringify

    typeof JSON // "object"
    typeof JSON.parse // "function"
    typeof JSON.stringify// "function"
    

    一、JSON.stringify

    1. JSON.stringify()
      将一个JavaScript对象/值转化为字符串,字符串为JSON格式。
    2. ()中可以填的内容
    JSON.stringify('abc') // ""abc""
    JSON.stringify(1) // "1"
    JSON.stringify(null) // "null"
    JSON.stringify(false) // "false"
    JSON.stringify([]) // "[]"
    JSON.stringify({}) // "{}"
    JSON.stringify({ name: "Tom" })// '{"name":"Tom"}'
    

    二、JSON.parse

    1. JSON.parse()
      将一个字符串转化为JavaScript对象/值,字符串为JSON格式。
    2. ()中可以填的内容
    JSON.parse('"1"')  // "1"
    JSON.parse("1") //  1
    JSON.parse("null") // null
    JSON.parse("false") // false
    JSON.parse("[]") // []
    JSON.parse("{}") // {}
    JSON.parse('{"name":"Tom"}') // {name: "Tom"}
    
    展开全文
  • JSON.prune是针对特定情况的修剪JSON.stringify ,在这种情况下,您需要对大型或递归javascript对象进行字符串化,而实际上并不需要完成结果。 var json = JSON.stringify(window); // fails var json = JSON....
  • JSON.parse 和JSON.stringify

    2020-07-15 18:09:17
    JSON.parse(“要转换的数据”) JSON.stringify(“要转化的数据”) 这两个方法的用法是有差别的: ①.JSON.stringify是从一个对象中解析出字符串 ②.JSON.parse是从一个字符串中解析出json(键值对)

    JSON.parse(“要转换的数据”)

    JSON.stringify(“要转化的数据”)

    这两个方法的用法是有差别的:

    ①.JSON.stringify是从一个对象中解析出字符串

    ②.JSON.parse是从一个字符串中解析出json(键值对)

    展开全文
  • json.stringify与json.parse

    2020-03-26 15:19:39
    json.stringify()与json.parse() JSON.stringify()的作用是将 JavaScript 对象转换为 JSON 字符串,而JSON.parse()可以将JSON字符串转为一个对象。 let arr = [1,2,3]; JSON.stringify(arr);//'[1,2,3]' typeof ...
  • qs.stringify 和 JSON.stringify 我小时候其实是一个不是很找人喜欢的人,逃学、打架,但我还记得我小学六年级毕业,我班主任给我写了一句话:天高任鸟飞,海阔凭鱼跃。 qs.stringify 和 JSON.stringify 的使用和...
  • JavaScript如何实现JSON.stringify导语:JavaScript如何实现JSON.stringify呢?通过下面教程大家会有所收获,更多详情请关注应届毕业生考试网。JSON.stringify是浏览器高版本带的一个将JS的Objtect对象转换为JSON字符...
  • 主要介绍了深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解的相关资料,需要的朋友可以参考下
  • JSON.parse和JSON.stringify

    2020-06-15 16:49:56
    一:JSON.parse()【从一个字符串中解析出json对象】 ...二:JSON.stringify()【从一个对象中解析出字符串】 var data={name:‘goatling’} JSON.stringify(data) 结果是: ‘{“name”:“goatling”}’ ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,460
精华内容 7,384
关键字:

json.stringify