js温故而知新6(JSON)——学习廖雪峰的js教程

20171112 发布于2019-08-21 11:36 / 1722人阅读

JSON

JSON是JavaScript Object Notation的缩写，它是一种数据交换格式。

道格拉斯·克罗克福特（Douglas Crockford）--雅虎的高级架构师--发明了JSON这种超轻量级的数据交换格式.

序列化

让我们先把小明这个对象序列化成JSON格式的字符串：

</>复制代码 
var xiaoming = {
    name: "小明",
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    "middle-school": ""W3C" Middle School",
    skills: ["JavaScript", "Java", "Python", "Lisp"]
};
JSON.stringify(xiaoming); // "{"name":"小明","age":14,"gender":true,"height":1.65,"grade":null,"middle-school":""W3C" Middle School","skills":["JavaScript","Java","Python","Lisp"]}"

要输出得好看一些，可以加上参数，按缩进输出：

</>复制代码 
JSON.stringify(xiaoming, null, "  ");

结果：

</>复制代码 
{
  "name": "小明",
  "age": 14,
  "gender": true,
  "height": 1.65,
  "grade": null,
  "middle-school": ""W3C" Middle School",
  "skills": [
    "JavaScript",
    "Java",
    "Python",
    "Lisp"
  ]
}

第二个参数用于控制如何筛选对象的键值，如果我们只想输出指定的属性，可以传入Array：

</>复制代码 
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"
  ]
}

如果我们还想要精确控制如何序列化小明，可以给xiaoming定义一个toJSON()的方法，直接返回JSON应该序列化的数据：

</>复制代码 
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()还可以接收一个函数，用来转换解析出的属性：

JSON.parse("{"name":"小明","age":14}", function (key, value) {

</>复制代码 
 // 把number * 2:
    if (key === "name") {
        return value + "同学";
    }
    return value;
}); // Object {name: "小明同学", age: 14}

在JavaScript中使用JSON，就是这么简单！

GPU云服务器云服务器廖雪峰的python教程 python教程廖雪峰 python廖雪峰教程廖雪峰python视频教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86916.html

js温故而知新11(AJAX)——学习廖雪峰的js教程

摘要：在回调函数中，通常我们只需通过判断请求是否完成，如果已完成，再根据判断是否是一个成功的响应。因此我们需要首先在页面中准备好回调函数当前价格最后用函数触发表示本域，也就是浏览器当前页面的域。 Asynchronous JavaScript and XML，意思就是用JavaScript执行异步网络请求。如果仔细观察一个Form的提交，你就会发现，一旦用户点击Submit按钮，表单开始提...

kun_jian 2019-08-20 16:45 评论0 收藏0
js温故而知新8(浏览器)——学习廖雪峰的js教程

摘要：对象不但充当全局作用域，而且表示浏览器窗口。对象有和属性，可以获取浏览器窗口的内部宽度和高度。对象表示当前页面的信息。由于在浏览器中以形式表示为树形结构，对象就是整个树的根节点。这个行为由浏览器实现，主流浏览器均支持选项，从开始支持。浏览器目前主流的浏览器： IE 6~11：从IE10开始支持ES6标准； Chrome：基于Webkit内核，内置了非常强悍的JavaScript引...

charles_paul 2019-08-20 15:07 评论0 收藏0
js温故而知新2——学习廖雪峰的js教程

摘要：让我们拆开写小明正常结果单独调用函数怎么返回了请注意，我们已经进入到了的一个大坑里。如果单独调用函数，比如，此时，该函数的指向全局对象，也就是。函数 1. arguments JavaScript还有一个免费赠送的关键字arguments，它只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数。arguments类似Array但它不是一个Array： function fo...

Caizhenhao 2019-08-21 11:34 评论0 收藏0
js温故而知新——学习廖雪峰的js教程

摘要：在设计时，有两种比较运算符第一种是比较，它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果第二种是比较，它不会自动转换数据类型，如果数据类型不一致，返回，如果一致，再比较。数据类型和变量数据类型计算机顾名思义就是可以做数学计算的机器，因此，计算机程序理所当然地可以处理各种数值。但是，计算机能处理的远不止数值，还可以处理文本、图形、音频、视频、网页等各种各样的数据，不同的数据...

taohonghui 2019-08-21 11:31 评论0 收藏0
js温故而知新3——学习廖雪峰的js教程

摘要：例如，在一个中，删掉偶数，只保留奇数，可以这么写把一个中的空字符串删掉，可以这么写注意以下的版本没有方法可见用这个高阶函数，关键在于正确实现一个筛选函数。回调函数接收的回调函数，其实可以有多个参数。 1.map 由于map()方法定义在JavaScript的Array中，我们调用Array的map()方法，传入我们自己的函数，就得到了一个新的Array作为结果： function po...

zhaot 2019-08-21 11:34 评论0 收藏0