0
点赞
收藏
分享

微信扫一扫

【JS】139-重温基础:事件

GG_lyf 2022-11-28 阅读 74

【JS】139-重温基础:事件_javascript

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

本章节复习的是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​语法规则:

  1. 数据在名称/值对中
  2. 数据由逗号分隔
  3. 花括号保存对象
  4. 方括号保存数组

通常, ​JSON​​数据书写格式是 ​名称/键值​:

  1. "name" : "pingan"

而 ​JSON​的值可以是 :

  1. 数字(整数或浮点数)
  2. 字符串(在双引号中)
  3. 逻辑值( ​true​​ 或 ​​false​​)
  4. 数组(在方括号中)
  5. 对象(在花括号中)
  6. null

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

2.1 简单值

简单值可以是字符串:

  1. "hello leo!"

也可以是数字,逻辑值:

  1. 1

2.2 对象类型

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

  1. JSON对象 必须加双引号,而 js 对象属性名可以不加双引号。
  2. JSON对象 没有变量声明,而 js 对象有。
  3. JSON对象 没有分号,而 js 对象有。
  4. // js 对象
  5. var obj = {
  6.    name : "pingan",
  7.    age  : "25",
  8. };
  9. // json 对象
  10. {
  11.    "name" : "pingan",
  12.    "age"  : "25",
  13.    "box"  : [
  14.        "a","b","c"
  15.    ]
  16. }


2.3 数组类型

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

  1. [
  2.    {
  3.        "name" : "leo",
  4.        "age"  : 25,
  5.        "box"  : ["a","b","c"]
  6.    },
  7.    {
  8.        "name" : "pingan",
  9.        "age"  : 25,
  10.        "box"  : ["a","b","c"]
  11.    }
  12. ]

3. 使用

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

  • JSON.stringify()​​: 序列化操作,将 ​​JavaScript对象​​转换成 ​​JSON字符串​​。
  • JSON.prase()​​:反序列化操作,将 ​​JSON字符串​​解析成 ​​JavaScript值​​。

3.1 序列化操作

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

  1. let leo =  {
  2.    name : "leo",
  3.    age  : 25,
  4.    box  : ["a","b","c"]
  5. }
  6. let pingan = JSON.stringify(leo);
  7. console.log(pingan); // "{"name":"leo","age":25,"box":["a","b","c"]}"

注意

  1. 默认情况下, ​JSON.stringify()​输出的JSON字符串不包含任何空格字符或缩进,因此结果就像上面那样。
  2. 序列化 ​JavaScript对象​时,所有函数及原型成员都会被忽略,不体现在结果上。
  3. 值为 ​undefined​的任何属性都会被跳过。

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

3.2 反序列化操作

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

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

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

4.序列化选项

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

  1. 过滤器:可以是个数组,也可以是个函数
  2. 选项:表示是否在 ​JSON字符串​中保留缩进

单独或组合使用两者,可以更加全面深入的控制JSON的序列化。

4.1 过滤器

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

  1. var leo =  {
  2.    name : "leo",
  3.    age  : 25,
  4.    box  : ["a","b","c"]
  5. }
  6. var pingan = JSON.stringify(leo,["name","age"]);
  7. console.log(pingan); // "{"name":"leo","age":25}"

若过滤器的参数是函数,则情况就不一样了,传入的函数需有两个参数(属性名和属性值):

  1. var leo =  {
  2.    "name" : "leo",
  3.    "age"  : 25,
  4.    "box"  : ["a","b","c"]
  5. }
  6. var pingan = JSON.stringify(leo,function(key, value){
  7.    switch(key){
  8.        case "name":
  9.            return "我叫" + value
  10.        case "age":
  11.            return value + "岁"
  12.        default:
  13.            return value
  14.    }
  15. });
  16. console.log(pingan); // "{"name":"我叫leo","age":"25岁","box":["a","b","c"]}"

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

4.2 选项

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

  1. 若选项只有一个值,则表示每个级别缩进的空格数,最大值为 ​10​​,超过 ​​10​​则只会是 ​​10​​。
  2. var leo =  {
  3.    "name" : "leo",
  4.    "age"  : 25,
  5.    "box"  : ["a","b","c"]
  6. }
  7. var pingan = JSON.stringify(leo, null, 4);
  8. console.log(pingan);
  9. /*
  10. "{
  11.    "name": "leo",
  12.    "age": 25,
  13.    "box": [
  14.        "a",
  15.        "b",
  16.        "c"
  17.    ]
  18. }"
  19. */

5.解析选项

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

  • 若还原函数返回 ​undefined​,则表示要从结果中删除对应的键。
  • 若还原函数返回其他值,则将该值插入结果中。

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

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

  1. var leo =  {
  2.    "name" : "leo",
  3.    "age"  : 25,
  4.    "date" : new Date(1993, 9, 9)
  5. }
  6. var pingan = JSON.stringify(leo);
  7. var copy = JSON.parse(pingan,function (key, value){
  8.    // return key == "date" ? new Date(value) : value;
  9.    if(key == "date"){
  10.        return new Date(value);
  11.    }else{
  12.        return value;
  13.    }
  14. })
  15. console.log(copy);
  16. // "{"name":"leo","age":25,"date":"1993-10-08T16:00:00.000Z"}"

参考文章:

  1. W3school JSON教程
  2. 《JavaScrip高级程序设计》

【JS】139-重温基础:事件_javascript_02

举报

相关推荐

0 条评论