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

来源：segmentfault.com

「React 开发者」优达学城硅谷大学，提供Airbnb、Netflix 的前端内容，中文项目审阅，立即抢座 >>>

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',{
            name:'Jansen3',{
            name:'Jansen4',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,{
        "name": "Jansen4","age": 22,{
        "name": "Jansen5",{
        "name": "Jansen6",{
        "name": "Jansen7",{
        "name": "Jansen8","sex": "boy"
    }
];

var newJSON = JSON.parse(JSON.stringify(testJSON,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如何实现再去看看这个链接里的写法