【重温基础】16.JSON对象介绍

0x584a 发布于2019-08-23 14:48 / 2955人阅读

摘要：系列目录复习资料资料整理个人整理重温基础篇重温基础对象介绍本章节复习的是中的关于对象相关知识。概念概念有三点全称对象表示法。对象没有分号，而对象有。序列化对象时，所有函数及原型成员都会被忽略，不体现在结果上。

本文是 重温基础 系列文章的第十六篇。
今日感受：静。

系列目录：

【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理)

【重温基础】1-14篇

【重温基础】15.JS对象介绍

本章节复习的是JS中的关于JSON对象相关知识。

前置知识：
JSON是一种按照JavaScript对象语法的数据格式。

1.概念

概念有三点：

JSON全称JavaScript 对象表示法（JavaScript Object Notation）。     
JSON 是存储和交换文本信息的语法。类似 XML。   
JSON 比 XML 更小、更快，更易解析。   
———— 摘自 W3school JSON教程

JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。

2.语法

JSON在使用过程中可作为一个对象或者字符串存在，当作为对象时，用于获取JSON中的数据，而作为字符串时常用于网络数据传输。

JSON语法规则：

数据在名称/值对中

数据由逗号分隔

花括号保存对象

方括号保存数组

通常，JSON数据书写格式是名称/键值：

"name" : "pingan"

而JSON的值可以是：

数字（整数或浮点数）

字符串（在双引号中）

逻辑值（true 或 false）

数组（在方括号中）

对象（在花括号中）

null

JSON常常有三种类型：
三种类型：简单之，对象和数组。
必须注意：JSON字符串必须是双引号，单引号会语法错误。

2.1 简单值

简单值可以是字符串:

"hello leo!"

也可以是数字,逻辑值：

2.2 对象类型

内容放在花括号内，是多个键值对。
JSON对象与 js 对象的三个区别：

JSON对象必须加双引号，而 js 对象属性名可以不加双引号。

JSON对象没有变量声明，而 js 对象有。

JSON对象没有分号，而 js 对象有。

// js 对象
var obj = {
    name : "pingan",
    age  : "25",
};
// json 对象
{
    "name" : "pingan",
    "age"  : "25",
    "box"  : [
        "a","b","c"
    ]
}

2.3 数组类型

内容放在方括号内。
JSON数组也没有分号和变量，常常可以把JSON数组和对象结合使用，构成更复杂的数据集合。

[
    {
        "name" : "leo",
        "age"  : 25,
        "box"  : ["a","b","c"]
    },
    {
        "name" : "pingan",
        "age"  : 25,
        "box"  : ["a","b","c"]
    }
]

3. 使用

JSON最常见的用法就是，从服务端获取JSON数据，再将JSON数据转成JavaScrip对象使用。
JSON对象有两个方法：

JSON.stringify()：序列化操作，将JavaScript对象转换成JSON字符串。

JSON.prase()：反序列化操作，将JSON字符串解析成JavaScript值。

3.1 序列化操作

序列化操作常常使用JSON.stringify()。
简单例子:

let leo =  {
    name : "leo",
    age  : 25,
    box  : ["a","b","c"]
}
let pingan = JSON.stringify(leo);
console.log(pingan); // "{"name":"leo","age":25,"box":["a","b","c"]}"

注意：

默认情况下，JSON.stringify()输出的JSON字符串不包含任何空格字符或缩进，因此结果就像上面那样。

序列化JavaScript对象时，所有函数及原型成员都会被忽略，不体现在结果上。

值为undefined的任何属性都会被跳过。

因此，最终的值都是有效的JSON数据类型的实例属性。

3.2 反序列化操作

序列化操作常常使用JSON.parse()。
简单例子：

let copyPingan = JSON.parse(pingan);
copyPingan; // {name: "leo", age: 25, box: Array(3)}

如果传入JSON.parse()的字符串不是有效的JSON，则会抛出错误。
注意：
虽然pingan和copyPingan属性相同，但两者独立，没有任何关系。

4.序列化选项

JSON.stringify()除了要传入序列化对象作为参数，还可以接收其他两个参数，用来指定序列化JavaScript对象的方式：

过滤器：可以是个数组，也可以是个函数。

选项：表示是否在JSON字符串中保留缩进。

多带带或组合使用两者，可以更加全面深入的控制JSON的序列化。

4.1 过滤器

若过滤器的参数是数组，则JSON.stringify()返回的结果将只包含数组中的属性：

var leo =  {
    name : "leo",
    age  : 25,
    box  : ["a","b","c"]
}
var pingan = JSON.stringify(leo,["name","age"]);
console.log(pingan); // "{"name":"leo","age":25}"

若过滤器的参数是函数，则情况就不一样了，传入的函数需有两个参数（属性名和属性值）：

var leo =  {
    "name" : "leo",
    "age"  : 25,
    "box"  : ["a","b","c"]
}
var pingan = JSON.stringify(leo,function(key, value){
    switch(key){
        case "name":
            return "我叫" + value
        case "age":
            return value + "岁"
        default:
            return value
    }
});
console.log(pingan); // "{"name":"我叫leo","age":"25岁","box":["a","b","c"]}"

注意：使用switch的时候，必须指定default否则会返回undefined。

4.2 选项

JSON.stringify()第三个参数是个选项，控制结果中的缩进和空白符。

若选项只有一个值，则表示每个级别缩进的空格数，最大值为10，超过10则只会是10。

var leo =  {
    "name" : "leo",
    "age"  : 25,
    "box"  : ["a","b","c"]
}
var pingan = JSON.stringify(leo, null, 4);
console.log(pingan);
/*
"{
    "name": "leo",
    "age": 25,
    "box": [
        "a",
        "b",
        "c"
    ]
}"
*/

5.解析选项

JSON.parse()可以接收一个函数作为参数，对每个键值对调用，为了跟JSON.stringify()的过滤函数区别，这个函数成为还原函数。

若还原函数返回undefined，则表示要从结果中删除对应的键。

若还原函数返回其他值，则将该值插入结果中。

还原函数接收两个参数：属性名和属性值。

举例，在日期字符串转换为Date对象中，经常要用到还原函数：

var leo =  {
    "name" : "leo",
    "age"  : 25,
    "date" : new Date(1993, 9, 9)
}
var pingan = JSON.stringify(leo);
var copy = JSON.parse(pingan,function (key, value){
    // return key == "date" ? new Date(value) : value;
    if(key == "date"){
        return new Date(value);
    }else{
        return value; 
    }
})
console.log(copy);
// "{"name":"leo","age":25,"date":"1993-10-08T16:00:00.000Z"}"

参考文章：

W3school JSON教程

《JavaScrip高级程序设计》

本部分内容到这结束

Author	王平安
E-mail	pingan8787@qq.com
博客	www.pingan8787.com
微信	pingan8787
每日文章推荐	https://github.com/pingan8787...
JS小册	js.pingan8787.com

欢迎关注微信公众号【前端自习课】每天早晨，与您一起学习一篇优秀的前端技术博文 .

GPU云服务器云服务器对象属性介绍 self对象介绍 java面向对象基础自我介绍

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

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

【重温基础】19.闭包

摘要：系列目录复习资料资料整理个人整理重温基础篇重温基础对象介绍重温基础对象介绍重温基础介绍重温基础相等性判断本章节复习的是中的关于闭包，这个小哥哥呀，看看。这里随着闭包函数的结束，执行环境销毁，变量回收。本文是重温基础系列文章的第十九篇。今日感受：将混乱的事情找出之间的联系，也是种能力。系列目录：【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理) 【重温基础】...

nanfeiyan 2019-08-23 14:56 评论0 收藏0
【重温基础】18.相等性判断

摘要：通常在转换不同数据类型时，相等和不相等会遵循以下规则若有一个操作数是布尔值，则比较前会将布尔值转换为数值转为，转为。本文是重温基础系列文章的第十八篇。今日感受：优化自己的代码，也是很愉快的事情。系列目录：【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理) 【重温基础】1-14篇【重温基础】15.JS对象介绍【重温基础】16.JSON对象介绍【重温基础...

赵春朋 2019-08-23 14:54 评论0 收藏0
【重温基础】22.内存管理

摘要：内存泄露内存泄露概念在计算机科学中，内存泄漏指由于疏忽或错误造成程序未能释放已经不再使用的内存。判断内存泄漏，以字段为准。本文是重温基础系列文章的第二十二篇。今日感受：优化学习方法。系列目录：【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理) 【重温基础】1-14篇【重温基础】15.JS对象介绍【重温基础】16.JSON对象介绍【重温基础】1...

Pandaaa 2019-08-23 15:14 评论0 收藏0
【重温基础】21.高阶函数

摘要：欢迎您的支持系列目录复习资料资料整理个人整理重温基础篇重温基础对象介绍重温基础对象介绍重温基础介绍重温基础相等性判断重温基础闭包重温基础事件本章节复习的是中的高阶函数，可以提高我们的开发效率。本文是重温基础系列文章的第二十一篇。今日感受：想家。本人自己整理的【Cute-JavaScript】资料，包含：【ES6/ES7/ES8/ES9】，【JavaScript基础...

wua_wua2012 2019-08-23 15:05 评论0 收藏0
【重温基础】20.事件

摘要：本文是重温基础系列文章的第二十篇。事件捕获为截获事件提供机会，然后实际的目标接收到事件，最后事件冒泡，对事件作出响应。事件处理事件处理，即响应某个事件。包括导致事件的元素事件类型等其他信息。本文是重温基础系列文章的第二十篇。这是第三个基础系列的第一篇，欢迎持续关注呀！重温基础系列的【初级】和【中级】的文章，已经统一整理到我的【Cute-JavaScript】的Java...

Blackjun 2019-08-26 13:28 评论0 收藏0