小技巧之JSON.stringify()/parse()

CNZPH 发布于2019-08-20 17:06 / 1021人阅读

摘要：它基于制定的规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得成为理想的数据交换语言。用于把一个对象恩，中万物皆对象，转化为一个字符串。可以查看到来自于。

JSON

JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于 ECMAScript (w3c制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

JSON.stringify()

用于把一个JSON对象（恩，javascript中万物皆对象），转化为一个字符串。

JSON._proto_可以查看到JSON来自于Object。

直接使用

    var obj = [
        {
            name:"Jansen1",
            age:18,
            sex:"boy"
        },
        {
            name:"Jansen2",
            age:18,
            sex:"boy"
        },
        {
            name:"Jansen3",
            age:18,
            sex:"boy"
        },
        {
            name:"Jansen4",
            age:18,
            sex:"boy"
        }
    ];
   var myStringObj = JSON.stringify(obj);

可以看到，通过该操作就可以把obj转化为字符串啦。

第二个参数replacer

JSON.stringify呢不仅仅可以直接转化字符串，还能有条件的转化字符串，这个时候就要用到第二个参数了.

当参数为一个数组的时候，可以通过key来筛选最终要转化的字符串JSON.stringify(obj,["name","age"])

当参数为一个函数的时候，转化的结果，全依赖于函数的返回值。处理顺序是如果是个数组，处理到数组第一号元素发现还是数组或是对象的时候就进去循环，直到所有的能遍历的都被处理到再进行下一个运算。JSON.stringify(obj,(key,val)=>{if(key!="sex")return val})

第三个参数-space格式化参数

文本添加缩进、空格和换行符,如果space是个数字的化，最大值是10，过10为10

JSON.stringify(obj,null,4)

可以看到，在控制台输出的代码变的很规整了。

JSON.parse()

JSON.parse只拥有两个参数，第一个就是把这个字符串转换为JSON对象，第二个就是筛选对象
那么现在如果再有这样的需求，把一个JSON对象下的所有属性为sex中的boy，替换为male，girl替换为female，age大于20的age条目不显示，只要20以下的小鲜肉，那么就很好处理啦

    var testJSON = [
    {
        "name": "Jansen1",
        "age": 18,
        "sex": "boy"
    },
    {
        "name": "Jansen2",
        "age": 2,
        "sex": "girl"
    },
    {
        "name": "Jansen3",
        "age": 19,
        "sex": "girl"
    },
    {
        "name": "Jansen4",
        "age": 22,
        "sex": "boy"
    },
    {
        "name": "Jansen5",
        "age": 22,
        "sex": "boy"
    },
    {
        "name": "Jansen6",
        "age": 22,
        "sex": "girl"
    },
    {
        "name": "Jansen7",
        "age": 19,
        "sex": "boy"
    },
    {
        "name": "Jansen8",
        "age": 19,
        "sex": "boy"
    }
];

var newJSON = JSON.parse(JSON.stringify(testJSON,(key,val)=>{
  if(key === "sex"){
    return val === "boy" ? "male" : "female";
  }
  if(key === "age" && val < 20){
    return val
  }
  else if(key !== "age"){
    return val;
  }
},4))

是不是很容易呢

兼容性

这两个方法在IE8级以上都能够实用，需要兼容低版本的浏览器，可以在代码里引用json2.js

链接里的代码就是自己实现的一个JSON，当浏览器能检测到有JSON的时候，就会用现在的，如果检测不到，才会执行代码。
有兴趣的可以先想想不带参数的JSON.stringify如何实现再去看看这个链接里的写法

云服务器 GPU云服务器小技巧全集 PowerShell小技巧 ios小技巧 jquery小技巧

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83406.html

JS使用技巧1——使用fast-json-stringify代替JSON.stringify

摘要：使用的思考使用过对象的程序员最常做的一项工作便是，将对象转化为字符串。该字符串的用途很多，例如可以使用在的中，在多个页面间进行传递。因为模式是固定的，那么定义模式的空间开销一定比使用该模式生成字符串的时间开销代价要小很多。使用JSON.stringify的思考使用过JSON对象的程序员最常做的一项工作便是，将JSON对象转化为字符串。该字符串的用途很多，例如可以使用在WEB的URL...

cnTomato 2019-08-23 14:00 评论0 收藏0
原生javascript的一些好用的小技巧1

摘要：以下我经常用，又总是记不住的几个方法转成数组形式获取中的内容关键在页面标签加载完成事件关键在阻止浏览器事件默认行为关键，记忆方法阻止事件冒泡关键，记忆方法数组的几个常用方法是数组的每一项如的下标，每一个元素的顺序等同于一个单纯的循环可以对进以下我经常用，又总是记不住的几个方法 document.querySelectorAll 转成数组形式； [].slice.call(docume...

qujian 2019-08-21 17:47 评论0 收藏0
JavaScript专题之深浅拷贝

摘要：专题系列第六篇，讲解深浅拷贝的技巧和以及实现深浅拷贝的思路前言拷贝也是面试经典呐数组的浅拷贝如果是数组，我们可以利用数组的一些方法比如返回一个新数组的特性来实现拷贝。所以我们可以看出使用和是一种浅拷贝。 JavaScript 专题系列第六篇，讲解深浅拷贝的技巧和以及实现深浅拷贝的思路前言拷贝也是面试经典呐！数组的浅拷贝如果是数组，我们可以利用数组的一些方法比如：slice、co...

RancherLabs 2019-08-21 11:47 评论0 收藏0
工作中的小技巧整理

摘要：一控制台输出数据转换二用法常规用法情况执行逻辑情况执行逻辑情况执行逻辑执行逻辑多种情况共用一套逻辑写法情况情况这样为情况或者情况时都是走执行逻辑执行逻辑情况执行逻辑执行逻辑三在线编辑软件四时间格式转换特殊时间格式转换为标准时间方法转换为某天一、控制台输出json数据转换 console.info(JSON.stringify(provinceList).replace(/,/g, ,...

zgbgx 2019-08-26 13:27 评论0 收藏0
关于JSON.parse()和JSON.stringify()的性能小测试

摘要：我们一般用来深拷贝，其过程说白了，就是利用将对象序列化字符串，再使用来反序列化还原对象。至于这行代码为什么能实现深拷贝，以及它有什么局限性等等，不是本文要介绍的。小结论能不用和就不用，采用替代方案且性能更优的。 JSON.parse(JSON.stringify(obj))我们一般用来深拷贝，其过程说白了，就是利用 JSON.stringify 将js对象序列化（JSON字符串），再使...

oogh 2019-08-26 13:37 评论0 收藏0