前端自学笔记_json

本篇博客基于对MDN文档上关于json的学习和总结，侵删

描述：

        首先先来简单地认识一下json这门语言。json是一种轻量级的语言，而且是浏览器原生支持的，无需额外安装。其全名为“JavaScript Object Notation”。但是json并不是js，js也不是json。而且根据开发者说明，只要浏览器支持es6，都可以使用json，并且不会更新，所以完全无需考虑兼容性的问题。

        json对象主要有两个方法，分别是用于解析json的parse（）方法，和用于讲js对象值转换为json中字符串的stringify（）方法。下面我们也将围绕这两个方法进行讲解。

---

对老版本的浏览器兼容方式

        根据MDN文档，josn对象可能不会被老版本的浏览器所兼容，但是不要担心，在老版本的浏览器中我们可以使用如下代码来对json进行兼容。

if (!window.JSON) {
  window.JSON = {
    parse: function(sJSON) { return eval('(' + sJSON + ')'); },
    stringify: (function () {
      var toString = Object.prototype.toString;
      var isArray = Array.isArray || function (a) { return toString.call(a) === '[object Array]'; };
      var escMap = {'"': '\\"', '\\': '\\\\', '\b': '\\b', '\f': '\\f', '\n': '\\n', '\r': '\\r', '\t': '\\t'};
      var escFunc = function (m) { return escMap[m] || '\\u' + (m.charCodeAt(0) + 0x10000).toString(16).substr(1); };
      var escRE = /[\\"\u0000-\u001F\u2028\u2029]/g;
      return function stringify(value) {
        if (value == null) {
          return 'null';
        } else if (typeof value === 'number') {
          return isFinite(value) ? value.toString() : 'null';
        } else if (typeof value === 'boolean') {
          return value.toString();
        } else if (typeof value === 'object') {
          if (typeof value.toJSON === 'function') {
            return stringify(value.toJSON());
          } else if (isArray(value)) {
            var res = '[';
            for (var i = 0; i < value.length; i++)
              res += (i ? ', ' : '') + stringify(value[i]);
            return res + ']';
          } else if (toString.call(value) === '[object Object]') {
            var tmp = [];
            for (var k in value) {
              if (value.hasOwnProperty(k))
                tmp.push(stringify(k) + ': ' + stringify(value[k]));
            }
            return '{' + tmp.join(', ') + '}';
          }
        }
        return '"' + value.toString().replace(escRE, escFunc) + '"';
      };
    })()
  };
}

---

JSON语法规范

        json书写对象时，要将我们所写的对象用一个花括号括起来，对于内部的属性和方法，其名称要用双引号 “ ” 括起来，然后再名称后边写一个冒号 ：在冒号后输入名称对应的值或者方法函数。值的类型可以是字符串，数字等，也可以是数组，数组需要用 [ ] 括起，其中内容可以不是同一数据类型的值。

        每个json对象的属性和方法之间用逗号 ， 隔开。但是在最后不能用逗号结尾，即最后一个属性后边不用加逗号。

        我们写一个json对象做一个示范：

{
    "name": "7042",
    "gender": "male",
    "age": 19,
    "life": ["eat", "sleep", "study", "game"]
}

         如上我们就写好了一个用json对象创建的一个对象

---

JSON.parse（）方法

        JSON.parse（）方法允许我们将json中的字符串在js中按照js的语法正常执行。

        简单讲，我们写的json代码其实是一种字符串，比如我们写一个json的对象如下：

const json = '{"name": "7042", "age": "19"}'

上面这段代码就是一个json对象的创建，但是按照js的语法来看，上面的代码就会像下图一样被识别称一个字符串，并不能正常的识别成为对象

        那么为了能够使json代码正常的被识别为一个 对象，我们就需要调用JSON对象的parse（）方法来将我们的json字符串中的代码转换为js中的对象，代码如下

const json = '{"name": "7042", "age": "19"}';
const obj = JSON.parse(json);

        如上代码便将我们所写的json这个字符串变量通过JSON对象的parse方法变成了一个js对象值，并且存储在了obj这个变量中，那么运行后就可以得到如下效果，可以看到json会被识别为字符串但是obj则会被识别为一个对象变量 

---

 

JSON.stringify()方法

        JSON.stringify()方法允许我们将js中的对象值变成json中的字符串值。

        从功能来看，JSON.stringify()方法和JSON.parse()方法是相互转换的。

        例如，我们先写一个对象

const obj = {
    name: "7042",
    age: 19,
    favorite: "Roast duck"
}

        然后我们通过JSON.stringify()方法将obj放进去，就可以得到其对应转换后的json格式的字符串了。

        

        如图可以看到其可以通过该方法转换成对应的字符串内容。