<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

</body>

<script>

    //json的语法可以表示简单值（除undefined）、数组（有序的值的列表，可通过索引访问其中的项的值）、对象（无序键值对）类型的值

    // 注意对象的键也必须带双引号

    var jsonObj1 = {

        "name":"harold",

        "age":"20",

        "plan":{

            "time":"thisSummerVacation",

            "toDo":"Front-End intern"

        }

    };

    var jsonStr1 = '{"name":"harold","age":"20","plan":{"time":"thisSummerVacation","toDo":"Front-End intern"}}';

    var jsObj1 = {

        name:"linbudu",

        age:20,

        dream:"Rich",

        // toJSON:function(){

        //     return this.dream;

        // }

    };

    //解析与序列化，不同于XML-DOM文档-提取数据，而是JSON-JS对象

    // document.writeln(jsonObj1);要在解析为对象后才能这样做

    var analysis1 = JSON.stringify(jsObj1);

    // var analysis2 = JSON.parse(jsonObj1);//报错，返回的数据已经是object类型，不需要再进行JSON.parse()转换了，可以直接当作对象使用。

    var analysis2 = JSON.parse(jsonStr1);//[object Object]//将json字符串转为相应的js值

    //json对象也是对象，这个方法用于转换json字符串，关于字符串和对象的区别，会写在下面

    document.writeln(analysis1 + "</br>");//将一个js对象序列化为一个json字符串，默认不包含空格与缩进

    document.writeln(analysis2 + "</br>");

    for(var i in analysis2){

        document.writeln(analysis2[i] + "</br>");

    }

    //序列化选项 stringify()方法可接受的另外两个参数

    //1.过滤器：为数组时

    document.writeln(JSON.stringify(jsObj1,["name","age"]) + "</br>" );//只会输出包含的属性

    //2.过滤器为函数 第二个参数控制字符串缩进

    var analysis3 = JSON.stringify(jsObj1,function(key,value){

        switch(key){

            case "age":

                return value + 4;

            case "dream":

                return value + " and What?";

            default :

                return value;

        }

    } , "---");

    document.write(analysis3 + "</br>");

    //实际上第一次调用这个函数过滤器时传入的键为空字符串，值为该对象

    //toJSON方法  为对象定义此方法 返回其自身的json数据格式 

    //理解：序列化一个对象的顺序：

    //1，存在toJSON方法且能够取得有效的值，就调用此方法，否则返回对象本身

    //2.若是提供了第二个参数，就应用过滤器，传入的值是第一步中返回的

    //3.对第二步中的值进行序列化

    //4.对第三个参数进行相应操作

    //parse()方法也可接受一个参数 不同于前面那个是过滤函数，这个则是还原函数

    var jsonObj2 = {

        "title":"1",

        "header":"2",

        "container":"3",

        "foot":"4",

        releaseDate:new Date(2019,4,10)

    };

    var jsonText = JSON.stringify(jsonObj2);//（js、json）对象--json字符串

    var revive = JSON.parse(jsonText,function(key,value){//从一个字符串中解析出json对象

        if(key == "releaseDate"){

            return new Date(value);

        }else{

            return value;

        }

    });

    var test = JSON.stringify(revive);//直接返回revive会是[object,Object]，因为返回的是一个json对象

    document.writeln(test + "</br>");

</script>

</html>

写的过程中遇到了一些疑惑的地方，写在下面：

json对象：

var jsonObj1 = {

        "name":"harold",

        "age":"20",

        "plan":{

            "time":"thisSummerVacation",

            "toDo":"Front-End intern"

        }

    };

json字符串：

var jsonStr1 = '{"name":"harold","age":"20","plan":{"time":"thisSummerVacation","toDo":"Front-End intern"}}';

js对象：

var jsObj1 = {

        name:"linbudu",

        age:20,

        dream:"Rich"

    };
如果在JSON.parse()方法中传入一个json对象或是js对象，会出现
Uncaught SyntaxError: Unexpected token o in JSON at position 1
的报错，因为这个方法仅用于从字符串中解析出json对象

两个序列化方法：
var jsonText = JSON.stringify(jsonObj2);//（js、json）对象--json字符串
var revive = JSON.parse(jsonText)//从一个字符串中解析出json对象
												


											
json初接触的更多相关文章
	

    
								
  1. ExtJS初接触 —— 了解 Ext Core
		
    ExtJS初接触 —— 了解 Ext Core Ext Core是一款和jQuery媲美的轻型JS库,基于MIT许可.对于Dom的操作,我个人还是比较喜欢用jQuery.当然如果项目中用的是ExtJS ...
    
		
    2. 
						
  2. 初接触BurpLoader工具
		
    初接触burp工具 菜鸟一枚,现在在接触一段时间测试,我在测试功能性的时候,想着网站被黑案例那么多,我是不是也应该弄弄安全性测试了,所以就有了下边的第一次接触BurpLoader工具来测试手机的app ...
    
		
    3. 
						
  3. 软工实践练习-Git初接触
		
    第一次听到Git,有点不知所云,听了实践课老师的讲解,才明白了Git作为最先进的分布式版本控制系统的重要性. 至于Git的安装和使用仍旧是自己摸索着去完成了,当然在这过程中也是遇到了很多的问题. 接下 ...
    
		
    4. 
						
  4. vi初接触
		
    vi初接触 它有三种模式: 一 一般模式 二 编辑模式 三 命令行模式 介绍几种比较常用的吧 -- 退出:q 写入:w 强制:! (以上可叠加) 显示行号:set nu 取消:set nonu 跳转到 ...
    
		
    5. 
						
  5. ExtJS初接触 - 在项目中使用ExtJS
		
    ExtJS初接触 - 在项目中使用ExtJS 今天ExtJS官网发布了ExtJS最新正式版4.2.1.Ext JS 4.2.1 正式版 下载 ExtJS为开发者在开发富客户的B/S应用中提供丰富的UI ...
    
		
    6. 
						
  6. Java之路——Java初接触
		
    本文大纲 1.Java是什么 2.Java历史 3.Java技术范围 3.1 Java SE平台技术范围 3.2 Java EE技术范围 3.3 Java 体系技术范围 4.总结 1.Java是什么  ...
    
		
    7. 
						
  7. python 之 数据类型初接触
		
    python 之 数据类型初接触 标准数据类型 Python3 中有六个标准的数据类型: Number(数字) String(字符串) List(列表) Tuple(元组) Set(集合) Dicti ...
    
		
    8. 
						
  8. Dapr微服务应用开发系列2：Hello World与SDK初接触
		
    题记:上篇介绍了Dapr的环境配置,这次我们来动手尝试一下Dapr应用的开发 Hello World Dapr应用的Hello World其实和其他的Hello World一样简单: 首先用你喜欢的语 ...
    
		
    9. 
						
  9. C# MVC jsonp初接触成功
		
    利用jsonp进行跨域请求资源 C# MVC ApiControllers准备如下: 1.需要在引用处右键管理NuGet安装jsonp插件 2.在Application_Start()中配置 Glob ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 阶段01Java基础day23多线程
			
    23.01_多线程(多线程的引入) 1.什么是线程 线程是程序执行的一条路径, 一个进程中可以包含多条线程 多线程并发执行可以提高程序的效率, 可以同时完成多项工作 2.多线程的应用场景 红蜘蛛同时共 ...
    
			
    2. 
						
  2. Caffe中Interp层的使用
			
    最近实验当中借鉴了FPN网络,由于FPN网络对图片shape有要求,采用了两种方式,其一是在data_layer.cpp中,对原图进行padding操作:其二是需要对特征图进行类似crop操作,使得两 ...
    
			
    3. 
						
  3. latex中使用listings显示代码
			
    \documentclass[12pt,a4paper]{article}\usepackage{ctex}\usepackage{listings}\usepackage{xcolor}\begin ...
    
			
    4. 
						
  4. [转]腾讯研发类笔试面试试题（C++方向）
			
     https://blog.csdn.net/Xiongchao99/article/details/73381280 1.C和C++的特点与区别? 答:(1)C语言特点:1.作为一种面向过程的结构化 ...
    
			
    5. 
						
  5. 大道至简第一章读后感JAVA伪代码形式
			
    观看了<大道至简>第一章后,从愚公移山的故事中可以发现愚公移山其实可以看作是一个一个项目,下面用JAVA伪代码形式编写: Import java(愚公移山) //愚公移山 public c ...
    
			
    6. 
						
  6. 详解Makefile 函数的语法与使用 （转）
			
    使用函数: 在Makefile中可以使用函数来处理变量,从而让我们的命令或是规则更为的灵活和具有智能.make所支持的函数也不算很多,不过已经足够我们的操作了.函数调用后,函数的返回值可以当做变量来使 ...
    
			
    7. 
						
  7. leetcode 3.Longest Substring Without Repeating Charcters
			
    在一个字符串中寻找出最长的无重复字符的子串的,在不断的后续检索中需要去掉前面一个重复的字符,那么就是需要记录之前所出现过的字符的,在这里需要利用hashmap来记录字符和其出现的位置之间的映射关系的, ...
    
			
    8. 
						
  8. 蓝图Tips
			
    有些好用的节点,不写下来,很容易忘掉. 1. 调用命令行 2. 播放视频 播放后要播一小段才能进行暂停!
    
			
    9. 
						
  9. PythonStudy——字符编码  Character Encoding
			
    测试一下学习字符编码的问题:解决乱码问题 数据 从 硬盘 => 内存 => cpu应用程序打开文本文件的三步骤1.打开应用程序2.将数据加载到内存中3.cpu将内存中的数据直接翻译成字符显 ...
    
			
    10. 
						
  10. spotlight工具监控oracle
			
    spotlight工具版本Version: 5.0.1.1022 安装步骤 安装完成 安装之后,桌面上会生成如下图标 双机此图标,输入License 输入激活码 点击close,再次查看 建立连接,监 ...
    
			
    11.