js中json知识点

首先，json是一种数据格式，而不能说是一种对象（object）。这一点是非常重要的。

起源是不同的语言中数据对象的形式是不一样的，我们为了在不同的语言中传递数据，发明了一种json格式用于消除这种差异。比如，在js中，我们把js对象以json的格式来包装，然后把它字符串传递到其他的地方，比如java后台，这样后台取到这个字符串以后，就可以将其转化成一个json格式的java对象，否则java后台是无法识别一个js的对象的。可以说，json是不同的语言之间数据交换的一种桥梁，类似于之前的xml，只不过它比xml要来的更加简洁，方便，好用。

1.js对象

以下是一个js的对象。我们可以看到它是一个键值对

var xiaoming = {
    name: '小明',
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '\"W3C\" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp']
};

接下来我们使用var s = JSON.stringify(xiaoming);语句把上述的js对象包装成一个具有json格式的字符串。如下所示，然后我们就可以将这个字符串传递到其他地方区使用了。

{
  "name": "小明",
  "age": 14,
  "gender": true,
  "height": 1.65,
  "grade": null,
  "middle-school": "\"W3C\" Middle School",
  "skills": [
    "JavaScript",
    "Java",
    "Python",
    "Lisp"
  ]
}

2.json的格式

观察上述的json格式的字符串，我们不难发现，他和js的对象十分接近，除了json格式的字符串需要用双引号包围住键。事实上，上述的json格式的字符串完全也可以的当成一个js对象，因为js并不排斥在键上面包围双引号。只不过这个js对象是json格式的js对象。也就是说，假如我们定义如下代码，是完全可以的。

var a={
  "name": "小明",
  "age": 14,
  "gender": true,
  "height": 1.65,
  "grade": null,
  "middle-school": "\"W3C\" Middle School",
  "skills": [
    "JavaScript",
    "Java",
    "Python",
    "Lisp"
  ]
}
console.log(a.name);

注意我的措辞，我始终没有说json对象，而是js对象，这是因为在js中只有js对象，而没有所谓的json对象。广义的js对象包含所有对象，如字符串，数字，object，而狭义的就只有object。也就是上面我们举例的xiaoming或者a这个对象。

3.格式错误

经常我们再js代码中需要接受一个其他地方传过来的json格式的字符串，然后通过JSON.parse()方法来把它变成json格式的js对象，这时候如果这个字符串不是json格式，就会报错。

常见的错误有以下几种。

a.键没有用双引号包围，这是最常见的错误。

b.最后一个键值对后面多了一个逗号，这是不允许的。如下面例子所示。

JSON.parse('[1, 2, 3, 4, ]');
JSON.parse('{"foo" : 1, }');
// SyntaxError JSON.parse: unexpected character
// at line 1 column 14 of the JSON data

换成这样就不会报错了。

JSON.parse('[1, 2, 3, 4 ]');
JSON.parse('{"foo" : 1 }');

具体错误分析可以看这里：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Errors/JSON_bad_parse

4.几个常用的方法

在js中，主要需要处理的是json格式的对象和json格式的字符串的转换问题。有以下几个常用的方法可以帮助我们做这些事情。

首先要确定的是，这些方法不仅适用于js对象，也试用于js数组。我们以例子来介绍。

--JSON.stringify：这个方法是将js对象转换成json格式的字符串。

//js对象
var xiaoming={
    name: '小明',
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '\"W3C\" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp']
}
//数组对象
var student = [{
    name: '小明',
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '\"W3C\" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp']
},{
    name: '小红',
    age: 13,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '\"W3C\" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp']
}];
var s1=JSON.stringify(xiaoming);
var s2=JSON.stringify(student);
console.log(s1);
console.log(s2);

console.log(s1.name);

上述代码的运行结果是

{"name":"小明","age":14,"gender":true,"height":1.65,"grade":null,"middle-school":"\"W3C\" Middle School","skills":["JavaScript","Java","Python","Lisp"]}
Box.html:66:1
[{"name":"小明","age":14,"gender":true,"height":1.65,"grade":null,"middle-school":"\"W3C\" Middle School","skills":["JavaScript","Java","Python","Lisp"]},{"name":"小红","age":13,"gender":true,"height":1.65,"grade":null,"middle-school":"\"W3C\" Middle School","skills":["JavaScript","Java","Python","Lisp"]}]
Box.html:67:1
undefined

可以看到不管是js对象还是js数组对象，都转换成了标准的json格式的字符串，由于s1和s2都是字符串，自然无法使用s1.name这样的只要js对象才有的取值方式了。

--JSON.parse：该方法用于将json格式的字符串转换成js对象。首先要保证这个字符串是json格式的，否则该方法会报错，参照第3条。

//js对象
var xiaoming={
    name: '小明',
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '\"W3C\" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp']
}
//数组对象
var student = [{
    name: '小明',
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '\"W3C\" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp']
},{
    name: '小红',
    age: 13,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '\"W3C\" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp']
}];
var s1=JSON.stringify(xiaoming);
var s2=JSON.stringify(student);
var o1=JSON.parse(s1);
var o2=JSON.parse(s2);
console.log(o1);
console.log(o2);
console.log(o1.name);

上述代码的执行结果为：

可以看到，转换成了js的标准的对象，键值是没有双引号的。这时候我们使用o1.name 就可以获取到name的值了。

与JSON.parse()相同效果的方法还有jQuery.parseJSON(data)，eval("("+data+")")，其中data是json格式的字符串，不推荐使用最后一种方法。