JavaScript入门指南---（七）、JSON相关

最新推荐文章于 2021-03-14 19:09:55 发布

george_zyf

最新推荐文章于 2021-03-14 19:09:55 发布

阅读量885

点赞数 9

分类专栏： H5+CSS+JS 文章标签： javascript json 对象入门指南入门

本文链接：https://blog.csdn.net/android_zyf/article/details/65446006

版权

H5+CSS+JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一,JSON是什么

都在说JSON解析JSON解析,那JSON到底是什么呢?
JSON: JavaScript Object Notation
JSON是JavaScript对象的一种简单紧凑的标签,使用JSON这种表达方式时,对象可以方便地转换为字符串来进行存储和传递(在不同程序或网络中);
比较让人省心的是对象在JSON中是以普通的JS代码表示的,而JS又带有”自动”解析功能,所以JS可以直接将JSON解析成代码,而不需要其他什么什么操作了.
JSON的官方主页
 JSON规范文档(需要梯子)

JSON语法

JSON数据的表示方式是一系列成对的参数和值,参数和值由冒号分割,每对之间以逗号分割;
“param1”:”value1”,”param2”:”value2”,”param3”:”value3”
将这些序列用花括号装起来,就构成了一个JSON对象

var jsonObj = {
  "param1":"value1",
  "param2":"value2",
  "param3":"value3"
}

注: 不仅仅是对象,任何能够以系列”参数”,”值”对表示的数据都能够用JSON来表示.

二,将JSON数据转换成JS对象

这一过程通常叫做字符串的”去序列号”.

使用eval()函数示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>通过eval函数获得JSON对象中的属性</title>
        <script type="text/javascript">
            //创建一个JSON对象
            var jsonDemo = '{"name":"张三","age":"29","gender":"男"}';

            //注意下面一定要将字符串包含在圆括号里,这里是为了避免造成含义不明确的js语法
            var jsObj = eval('('+jsonDemo+')');
        </script>
    </head>
    <body>
        <input type="button" name="" id="" value="showObjName" onclick="alert(jsObj.name)"/>
    </body>
</html>

eval方法示例
注: eval函数,如果传入参数为表达式,那么会将表达式执行,如果传入的是一个或多个JS语句,那么会执行这些语句.

使用浏览器对JSON直接支持

现在大多浏览器都能够直接支持对JSON数据的解析,浏览器中就会创建一个叫做JSON的JavaScript对象来管理JSON数据.

JSON.parse()

JSON.parse()方法用来解释JSON字符串,会将接收到的字符串创建成一个对象(会将字符串中的键值对设置成这个对象的对应属性).

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>浏览器中支持的JSON对象示例</title>

        <script type="text/javascript">
            var jsonDemo='{"name":"张三","age":"29","gender":"男"}';

            //这个JSON就相当于浏览器内置的对象
            var objDemo = JSON.parse(jsonDemo);

            alert(objDemo.age);
        </script>
    </head>
    <body>
    </body>
</html>

三,JSON数据的序列化

在数据存储和转换时,”序列化”是指把数据转换成便于通过网络进行存储和传输的形式,稍后再恢复为原始的格式.
JSON选择字符串作为序列化数据的格式.所以当需要网络传输的时候,需要将JSON对象进行序列化,也就是转换成字符串的格式.

JSON.stringify()

JSON.stringify()方法,可以将对象转换成JSON字符串的格式.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>浏览器中支持的JSON对象示例</title>

        <script type="text/javascript">

      //创建一个对象并给这个对象一个属性,一个方法
            var obj2json = new Object();
            obj2json.like = "亡者聋药";
            obj2json.gogogo = function(){
                alert("gogogo");
            }

      //将该对象通过JSON.stringify方法转换成字符串格式
            var str = JSON.stringify(obj2json);
      //显示
            alert(str);
      //注意,只是会显示属性,方法是不会显示出来的
        </script>
    </head>
    <body>
    </body>
</html>

总结:将对象转换成JSON字符串的过程叫序列化,将JSON字符串转换成对象的过程叫做解析

　四,JSON数据格式

“参数”:”值”对,就是常说的键值对,”参数”指的就是键(key),以后就入乡随俗叫”参数”:”值”对啦.
参数的语法规则:
* 不能是JS的保留字,关键字
* 不能以数字开头
* 除了下划线和美元福,不能包含任何特殊字符

值可以是以下数据类型:
* 数值
* 字符串
* 布尔值
* 数组
* 对象
* null(空)

注:JavaScript中,obj.name与obj[“name”]是相同的语法,是一样的,都是在调用对象obj的name属性

五,使用JSON创建对象

虽然JSON是为了描述JavaScript对象而开发出来的,但它是独立于任何编程语言和平台的,现在的情况就是大家都在用.

属性

通过JSON的格式创建对象:

//创建
var user = {
  "name":"李四",
  "age":"25",
  "school":"家里蹲"
}
//使用
alert(user.name);

所以这两种方式就是一致的意思了:
var demo = new Object();
var demo = {};

方法


var user = {
  "name":"李四",
  "age":"25",
  "school":"家里蹲",
  "likes":["lol","亡者聋药","bbq","f**k"]

  "setName":function(newName){
    this.name = newName;
  }
}

user.setName("hahah");
var aLike = user.likes[0];//aLike的值就是:lol

注:这种写法,在直接支持JSON解析的浏览器中是会出错误的(eval函数可以用)

对象

对象的属性是另一个对象,对应到JSON解析中,就是一层一层的关系(就相当于Android中的原生解析).
示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>解析多层次JSON对象</title>
        <script type="text/javascript">
            var school = {
                "classList":[
                {"name":"一年五班","number":"四十七人","score":"差"}
                ,{"name":"一年六班","number":"三十六人","score":"更差"}
                ,{"name":"一年七班","number":"二十人","score":"差到没边"}
                ,{"name":"一年八班","number":"五人","score":"弃疗"}
                ],
                "name":"本山传媒学院",
                "onwer":"你大爷还是你大爷"
            }

            var show = "";
            show+="校名:"+school.name+"\n";
            show+="校长:"+school.onwer+"\n";
            for (var i = 0; i < school.classList.length; i++) {
                show+="班级:"+school.classList[i].name+"---人数:"+school.classList[i].number+"---成绩:"+school.classList[i].score+"\n";
            }

            alert(show);
        </script>
    </head>
    <body>
    </body>
</html>

多层JSON解析

六,JSON安全性

尽量不要使用eval方法,因为该方法不止可以识别JSON文本,还能够执行JS命令,这就导致有可能你在解析的是一个JS命令,存在一些安全隐患,所以推荐使用浏览器内置的JSON对象来解析JSON字符串,它只识别JSON文本,不会执行JS命令,而且也会比eval方法快一些.

george_zyf

关注

9
点赞
踩
3

收藏

觉得还不错? 一键收藏
4
评论
JavaScript入门指南---（七）、JSON相关

一,JSON是什么都在说JSON解析JSON解析,那JSON到底是什么呢? JSON: JavaScript Object Notation JSON是JavaScript对象的一种简单紧凑的标签,使用JSON这种表达方式时,对象可以方便地转换为字符串来进行存储和传递(在不同程序或网络中); 比较让人省心的是对象在JSON中是以普通的JS代码表示的,而JS又带有”自动”解析功能,所以JS可以直
复制链接

扫一扫