前端入门学习笔记（三十二）JavaScript入门（十五）JSON操作

此篇主要参考廖雪峰JavaScript教程的对象JSON

什么是JSON

JSON JavaScript 对象表示法（JavaScript Object Notation） 是一种存储数据的方式。可以将JSON理解为JavaScript对象的一个子集。
不过，在其他语言中也有用JSON。

JSON有着固定的格式，且编码模式规定为UTF-8

• JSON对象由 名称/值对组成 名称和值之间用冒号:隔开
• 名称必须用双引号" 包含起来
• 值可以是任意javascript数据类型，字符串，布尔，数字 ，数组甚至是对象
• 不同的名称/值对之间用 逗号 , 隔开

---

将对象转换为JSON（序列化）

我们将会使用JSON.stringify()
JSON.stringify(value[, replacer[, space]])

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

let json = JSON.stringify(xiaoming);
console.log(json);//{"name":"小明","age":14,"gender":true,"height":1.65,"grade":null,"middle-school":"w3c Middle School","skills":["JavaScript","Java","Python","Lisp"]}

可以转化指定信息

JSON.stringify(xiaoming, ['name', 'skills']);
//{"name":"小明","skills":["JavaScript","Java","Python","Lisp"]}

还可以传入函数，进行预先处理，比如下面演示的是将所有字符串值转化为大写

function convert(key, value) {
    if (typeof value === 'string') {
        return value.toUpperCase();
    }
    return value;
}

JSON.stringify(xiaoming, convert);//{"name":"小明","age":14,"gender":true,"height":1.65,"grade":null,"middle-school":"W3C MIDDLE SCHOOL","skills":["JAVASCRIPT","JAVA","PYTHON","LISP"]}

可以给对象定义序列化方法

var xiaoming = {
    name: '小明',
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '\"W3C\" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp'],
    toJSON: function () {
        return { // 只输出name和age，并且改变了key：
            'Name': this.name,
            'Age': this.age
        };
    }
};

JSON.stringify(xiaoming); // '{"Name":"小明","Age":14}'

---

反序列化

拿到一个JSON格式的字符串，我们直接用JSON.parse()把它变成一个JavaScript对象：

JSON.parse('[1,2,3,true]'); // [1, 2, 3, true]
JSON.parse('{"name":"小明","age":14}'); // Object {name: '小明', age: 14}
JSON.parse('true'); // true
JSON.parse('123.45'); // 123.45

JSON.parse()也可以接受函数进行输出

let obj = JSON.parse('{"name":"小明","age":14}', function (key, value) {
    if (key === 'name') {
        return value + '同学';
    }
    return value;
});
console.log(JSON.stringify(obj)); // {name: '小明同学', age: 14}