1. 技术文章
  2. JOSN---学习

JOSN---学习

由 半世苍凉 提交于 2020-02-05 09:10:43

JOSN ：JavaScript Object Notation（javaScript 对象表示法）

JOSN 是存储和交换信息的语法.类似XML

JOSN 比 XML 更小 更快 更易解析

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

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h2>JavaScript 创建 JSON 对象</h2>
<p>
网站名称: <span id="jname"></span><br /> 
网站地址: <span id="jurl"></span><br /> 
网站 slogan: <span id="jslogan"></span><br /> 
</p>
<script>
var JSONObject= {
    "name":"菜鸟教程",
    "url":"www.runoob.com", 
    "slogan":"学的不仅是技术，更是梦想！"
};
document.getElementById("jname").innerHTML=JSONObject.name 
document.getElementById("jurl").innerHTML=JSONObject.url 
document.getElementById("jslogan").innerHTML=JSONObject.slogan
</script>
 
</body>
</html>

结果：

 

与 XML 相同之处

  • JSON 是纯文本
  • JSON 具有"自我描述性"（人类可读）
  • JSON 具有层级结构（值中存在值）
  • JSON 可通过 JavaScript 进行解析
  • JSON 数据可使用 AJAX 进行传输

与 XML 不同之处

  • 没有结束标签
  • 更短
  • 读写的速度更快
  • 能够使用内建的 JavaScript eval() 方法进行解析
  • 使用数组
  • 不使用保留字

 

JSON 语法

JSON 语法是 JavaScript 语法的子集。

JSON 语法规则

JSON 语法是 JavaScript 对象表示语法的子集。

  • 数据在名称/值对中
  • 数据由逗号分隔
  • 大括号保存对象
  • 中括号保存数组

JSON 名称/值对

JSON 数据的书写格式是：名称/值对。

名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值：

"name" : "菜鸟教程"

这很容易理解，等价于这条 JavaScript 语句：

name = "菜鸟教程"

JSON 值

JSON 值可以是：

  • 数字（整数或浮点数）
  • 字符串（在双引号中）
  • 逻辑值（true 或 false）
  • 数组（在中括号中）
  • 对象（在大括号中）
  • null

循环对象

你可以使用 for-in 来循环对象的属性：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>使用 for-in 来循环对象的属性:</p>

<p id="demo"></p>

<script>
var myObj = { "name":"runoob", "alexa":10000, "site":null };
for (x in myObj) {
    document.getElementById("demo").innerHTML += x + "<br>";
}
</script>

</body>
</html>

遍历的结果是属性值。   

 

嵌套 JSON 对象 

myObj={

"name":"runoob",

"alexa":100000,

"sites":{

"site1":"www.runoob.com"

"site2":"m.runoob.com",

"site3":"c.runoob.com"

}  }\

获取对象属性：

x = myObj.sites.site1; // 或者 x = myObj.sites["site1"]; 

修改属性值：

myObj.sites.site1 = "www.google.com";

删除对象属性：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>删除 JSON 对象属性。</p>

<p id="demo"></p>

<script>
var myObj, i, x = "";
myObj = {
    "name":"runoob",
    "alexa":10000,
    "sites": {
        "site1":"www.runoob.com",
        "site2":"m.runoob.com",
        "site3":"c.runoob.com"
    }
}
delete myObj.sites.site1;

for (i in myObj.sites) {
    x += myObj.sites[i] + "<br>";
}

document.getElementById("demo").innerHTML = x;

</script>

</body>
</html>

是对象属性，不是属性值

 

JSON 数组：

JSON 数组在中括号中书写。

JSON 中数组值必须是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。

JavaScript 中，数组值可以是以上的 JSON 数据类型，也可以是 JavaScript 的表达式，包括函数，日期，及 undefined。

几种访问形式：

myObj={ "name":"网站", "num":3, "sites":[ "Google", "Runoob", "Taobao" ] }

 

for (i = 0; i < myObj.sites.length; i++) { x += myObj.sites[i] + "<br>"; }

//根据位置访问

for (i in myObj.sites)

{ x += myObj.sites[i] + "<br>"; }

//这个是根据属性名来访问

嵌套 JSON 对象中的数组

JSON 对象中数组可以包含另外一个数组，或者另外一个 JSON 对象： 

myObj = {
    "name":"网站",
    "num":3,
    "sites": [
        { "name":"Google", "info":[ "Android", "Google 搜索", "Google 翻译" ] },
        { "name":"Runoob", "info":[ "菜鸟教程", "菜鸟工具", "菜鸟微信" ] },
        { "name":"Taobao", "info":[ "淘宝", "网购" ] }
    ]
}

删除数组成员：

delete myObj.sites[1];

 

删除数值的元素，数组的大小不变，代码如下：

var myObj, i, x = "";
myObj = {
    "name":"网站",
    "num":3,
    "sites":[ "Google", "Runoob", "Taobao" ]
};
delete myObj.sites[1];

x = "sites.length = " + myObj.sites.length + "<br><br>";
    
for (i in myObj.sites) {
    x += i + " " + myObj.sites[i] + "<br>";
}

document.getElementById("demo").innerHTML = x;

delete 运算符并不是彻底删除元素，而是删除它的值，但仍会保留空间。

运算符 delete 只是将该值置为 undefined，而不会影响数组长度，即将其变为稀疏数组（《JS权威指南》7.5节）。

 

JSON.parse()

有两参数 ：text ,reviver  

  • text:必需， 一个有效的 JSON 字符串。
    • var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');
  • reviver: 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。
  • var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';
var obj = JSON.parse(text, function (key, value) {
    if (key == "initDate") {
        return new Date(value);
    } else {
        return value;
}});
 
document.getElementById("demo").innerHTML = obj.name + "创建日期：" + obj.initDate;

    使用 JSON.parse 的 reviver 函数时一定要注意遍历到最后的顶层对象 key 为 ""，需要返回 value。 

    
var json = '{"name":"Harvy", "age":36, "gender":"male"}';
var person = JSON.parse(json, function (key, value) {
    if(key != "")
        return "<font color=\"blue\">"+value+"</font>";
    else
        return value;
});

     

  • 从服务端接收 JSON 数据

    我们可以使用 AJAX 从服务器请求 JSON 数据，并解析为 JavaScript 对象。

  • <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>使用 XMLHttpRequest 来获取文件内容</h2>
<p>文件内容是标准的 JSON 格式，可以使用 JSON.parse 方法将其转换为 JavaScript 对象。</p>

<p id="demo"></p>

<script>

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myObj.name;
    }
};
xmlhttp.open("GET", "/try/ajax/json_demo.txt", true);
xmlhttp.send();

</script>

<p>查看 JSON 文件数据 <a href="/try/ajax/json_demo.txt" target="_blank">json_demo.txt</a></p>

</body>
</html>

xmlhttp.onreadystatechange=function(){

if(this.readyState== 4 && this.status==200)

myObj=JSON.parse(this.responseTest);

 

******

}

readyState 有五种状态，每变化一次 function（）执行一次；

解析函数：

var text = '{ "name":"Runoob", "alexa":"function () {return 10000;}", "site":"www.runoob.com"}';
var obj = JSON.parse(text);
obj.alexa = eval("(" + obj.alexa + ")");
 
document.getElementById("demo").innerHTML = obj.name + " Alexa 排名：" + obj.alexa();

JSON 不允许包含函数，但你可以将函数作为字符串存储，之后再将字符串转换为函数。

 

eval（String）: 

可以计算某个字符串，并执行其中的代码

eval("var a=1");     // 声明一个变量a并赋值1。
eval("2+3");         // 执行加运算，并返回运算值。
eval("mytest()");    // 执行mytest()函数。
eval("{b:2}");       // 声明一个对象。

 

obj.alexa = eval("(" + obj.alexa + ")");

 

eval() 还要用一对圆括号将字符串包起来，对此我寻找到比较好的解释就是

原因：归结于 eval 本身的问题，由于 json 是以 {} 的方式来开始以及结束的，在 JavaScript 中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。

解决方法：加上圆括号的目的是迫使 eval 函数在处理 JavaScript 代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语句（statement）来执 行。举一个例子，例如对象字面量 {}，如若不加外层的括号，那么 eval 会将大括号识别为 JavaScript 代码块的开始和结束标记，那么 {} 将会被认为是执行了一句空语句。

JSON.stringify()

JSON 通常用于与服务端交换数据。

在向服务器发送数据时一般是字符串。

我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。

对象转换：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>将 JavaScript 对象转换为 JSON 字符串</h2>

<p id="demo"></p>

<script>

var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj);
var arr = [ "Google", "Runoob", "Taobao", "Facebook" ];
var myJSON_arr = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myJSON+myJSON_arr;

</script>

</body>
</html>

解析函数

JSON 不允许包含函数，JSON.stringify() 会删除 JavaScript 对象的函数，包括 key 和 value。

var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj);
 
document.getElementById("demo").innerHTML = myJSON;

我们可以在执行 JSON.stringify() 函数前将函数转换为字符串来避免以上问题的发生：

var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};
obj.alexa = obj.alexa.toString();
var myJSON = JSON.stringify(obj);
 
document.getElementById("demo").innerHTML = myJSON;

标签
josn
javascript
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!