廖雪峰js教程笔记9json

讲义大魔王      2022-02-07     678

关键词:

 


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

在JSON出现之前,大家一直用XML来传递数据。因为XML是一种纯文本格式,所以它适合在网络上交换数据。XML本身不算复杂,但是,加上DTD、XSD、XPath、XSLT等一大堆复杂的规范以后,任何正常的软件开发人员碰到XML都会感觉头大了,最后大家发现,即使你努力钻研几个月,也未必搞得清楚XML的规范。

终于,在2002年的一天,道格拉斯·克罗克福特(Douglas Crockford)同学为了拯救深陷水深火热同时又被某几个巨型软件企业长期愚弄的软件工程师,发明了JSON这种超轻量级的数据交换格式。

道格拉斯同学长期担任雅虎的高级架构师,自然钟情于JavaScript。他设计的JSON实际上是JavaScript的一个子集。在JSON中,一共就这么几种数据类型:

  • number:和JavaScript的number完全一致;
  • boolean:就是JavaScript的truefalse
  • string:就是JavaScript的string
  • null:就是JavaScript的null
  • array:就是JavaScript的Array表示方式——[]
  • object:就是JavaScript的{ ... }表示方式。

以及上面的任意组合。

并且,JSON还定死了字符集必须是UTF-8,表示多语言就没有问题了。为了统一解析,JSON的字符串规定必须用双引号"",Object的键也必须用双引号""

由于JSON非常简单,很快就风靡Web世界,并且成为ECMA标准。几乎所有编程语言都有解析JSON的库,而在JavaScript中,我们可以直接使用JSON,因为JavaScript内置了JSON的解析。

把任何JavaScript对象变成JSON,就是把这个对象序列化成一个JSON格式的字符串,这样才能够通过网络传递给其他计算机。

如果我们收到一个JSON格式的字符串,只需要把它反序列化成一个JavaScript对象,就可以在JavaScript中直接使用这个对象了。

序列化

让我们先把小明这个对象序列化成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}

廖雪峰js教程笔记7基本类型和包装类型

在JavaScript的世界里,一切都是对象。但是某些对象还是和其他对象不太一样。为了区分对象的类型,我们用typeof操作符获取对象的类型,它总是返回一个字符串:typeof123;//‘number‘typeofNaN;//‘number‘typeof‘str‘;//‘string‘typeoftr... 查看详情

廖雪峰js教程笔记8date对象介绍和处理

在JavaScript中,Date对象用来表示日期和时间。要获取系统当前时间,用:varnow=newDate();now;//WedJun24201519:49:22GMT+0800(CST)now.getFullYear();//2015,年份now.getMonth();//5,月份,注意月份范围是0~11,5表示六月now.getDate();//24,表示24号now.getDay(); 查看详情

廖雪峰js教程笔记14file文件操作

在HTML表单中,可以上传文件的唯一控件就是<inputtype="file">。注意:当一个表单包含<inputtype="file">时,表单的enctype必须指定为multipart/form-data,method必须指定为post,浏览器才能正确编码并以multipart/form-data格式发送表单的... 查看详情

廖雪峰js教程笔记13插入dom

当我们获得了某个DOM节点,想在这个DOM节点内插入新的DOM,应该如何做?如果这个DOM节点是空的,例如,<div></div>,那么,直接使用innerHTML=‘<span>child</span>‘就可以修改DOM节点的内容,相当于“插入”了新的DOM... 查看详情

廖雪峰js教程笔记10浏览器对象

JavaScript可以获取浏览器提供的很多对象,并进行操作。windowwindow对象不但充当全局作用域,而且表示浏览器窗口。window对象有innerWidth和innerHeight属性,可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏... 查看详情

廖雪峰js教程笔记5arrowfunction(箭头函数)

为什么叫ArrowFunction?因为它的定义用的就是一个箭头:x=>x*x上面的箭头函数相当于:function(x){returnx*x;}箭头函数阅读:45060ES6标准新增了一种新的函数:ArrowFunction(箭头函数)。为什么叫ArrowFunction?因为它的定义用的就是一个... 查看详情

廖雪峰教程笔记:js中map和reduce的用法

举例说明,比如我们有一个函数f(x)=x2,要把这个函数作用在一个数组[1,2,3,4,5,6,7,8,9]上,就可以用map实现如下:由于map()方法定义在JavaScript的Array中,我们调用Array的map()方法,传入我们自己的函数,就得到了一个新的Array作为结... 查看详情

廖雪峰js教程笔记11操作dom(包含作业)

由于HTML文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,就需要通过JavaScript来操作DOM。始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作:更新:更新该DOM节点的内容,相当于更新了该DOM节点表示的HTM... 查看详情

廖雪峰js教程笔记4sort排序的一些坑

排序算法排序也是在程序中经常用到的算法。无论使用冒泡排序还是快速排序,排序的核心是比较两个元素的大小。如果是数字,我们可以直接比较,但如果是字符串或者两个对象呢?直接比较数学上的大小是没有意义的,因此... 查看详情

廖雪峰js教程笔记12用dom更新innerhmtl和修改css样式

拿到一个DOM节点后,我们可以对它进行更新。可以直接修改节点的文本,方法有两种:一种是修改innerHTML属性,这个方式非常强大,不但可以修改一个DOM节点的文本内容,还可以直接通过HTML片段修改DOM节点内部的子树://获取<... 查看详情

廖雪峰git教程学习笔记

廖雪峰git简单教程学习笔记教程地址:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b0001、可以这样设计目录,在d: eposisoty在这个目录下面有很多的仓库。mkdirlearngitcdlearngit>>gitinit   &n 查看详情

廖雪峰git教程学习笔记

...果需要更全的知识请移步廖老师Git教程学习内容来源:廖雪峰Git教程:https://www.liaoxuefeng.com/wiki/0013739516305929606dd183 查看详情

廖雪峰git教程学习笔记

教程地址:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000创建版本库初始化一个Git仓库,使用gitinit命令。添加文件到Git仓库,分两步:第一步,使用命令gitadd<file>,注意,可反复多次使用,添加多个文件;... 查看详情

《廖雪峰git教程》学习笔记

原文链接一.创建版本库①初始化一个Git仓库:gitinit②添加文件到Git仓库:1.gitadd<file>; 2.gitcommit 二.时光机穿梭①查看工作区状态,文件是否被修改过:gitstatus②查看修改的内容:gitdiff1.版本回退①HEAD:当前版本②HEAD^... 查看详情

git常用命令,参照廖雪峰老师的git教程

...就是边学边记笔记,这里只是本人写的自己通过学习了廖雪峰老师的git教程之后自己做的笔记,个人理解,可能有失偏颇,如想学习更专业更权威的git知识,请移步廖雪峰老师的官网一.创建git仓库  1.gitinit 在本地创建一... 查看详情

git教程

  该笔记事笔者学习廖雪峰Git教程的笔记,如果想详细了解Git请移步廖雪峰官网。  廖雪峰官网地址: https://www.liaoxuefeng.com/  廖雪峰Git教程: https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67 查看详情

廖雪峰git教程笔记与总结--git简介常用命令分支管理(代码片段)

本文主要用于记录阅读Git教程-廖雪峰的官方网站后的一些心得笔记,并且对git一些常用命令做一个整理总结。本文要点分为:1、Git简介;2、Git常用命令;3、Git分支管理。一、Git简介什么是Git?Git是目前世界... 查看详情

廖雪峰java教程学习笔记(代码片段)

原文链接:Java教程-廖雪峰的官方网站一、Java快速入门Java简介Java特点Java是基于JVM虚拟机的跨平台语言,一次编写到处运行Java程序易于编写且有垃圾回收机制,不必考虑内存管理Java虚拟机拥有工业级的稳定性和高度... 查看详情