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

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如何实现再去看看这个链接里的写法