J S O N-CSDN博客

本文链接：https://blog.csdn.net/m0_74226124/article/details/138121355

JSON 语法

JSON 语法是 JavaScript 语法的子集。

JSON 的语法基本上可以视为 JavaScript 语法的一个子集：

数据使用名/值对表示。
使用大括号保存对象，每个名称后面跟着一个 ':'（冒号），名/值对使用 ,（逗号）分割。
使用方括号保存数组，数组值使用 ,（逗号）分割。

示例

{
    "book": [
        {
            "id":"01",
            "language": "Java",
            "edition": "second",
            "author": "xxx"
        },
        {
            "id":"02",
            "language": "C++",
            "edition": "second",
            "author": "xxx"
        }
    ]
}

JSON 支持以下两种数据结构：

名/值对集合：这一数据结构由不同的编程语言支持。
有序的值列表：包括数组，列表，向量或序列等等。

JSON 语法规则

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

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

JSON 名称/值对

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

{ "flag":true }

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

"firstName" : "xxx"

JSON 值

JSON 值：

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

JSON 对象

JSON 对象在花括号（{}）中书写：

对象可以包含多个名称/值对：

{ "x":"xxx" , "y":"yyy" }

JSON 数组

JSON 数组在方括号中书写，数组可包含多个对象：

{   
    "employees": [   
        { "x":"x1" , "y":"y1" },   
        { "x":"x2" , "y":"y2" },   
        { "x":"x3" , "y":"y3" }   
    ]
}

JSON 布尔值

JSON 布尔值可以是 true 或者 false：

{ "flag":true }

JSON null

JSON 可以设置 null 值：

{ "flag":null }

JSON 使用 JavaScript 语法

因为 JSON 使用 JavaScript 语法，所以无需额外的软件就能处理 JavaScript 中的 JSON。

实例

<!DOCTYPE html>
<html>
<body>
    
<p>X: <span id="xxx"></span></p> 

<script>
var X = [
{ "x" : "x1" , "y" : "y1" }, 
{ "x" : "x2" , "y" : "y2" },  
{ "x" : "x3" , "y" : "y3" },  
];
X[1].x="x4";
document.getElementById("xxx").innerHTML=X[1].x;
</script>

</body>
</html>

JSON 文件

JSON 文件的文件类型是 ".json"
JSON 文本的 MIME 类型是 "application/json"

JSON 使用

JSON经常应用到的场景是：在后台应用程序中将响应数据封装成JSON格式，传到前台页面之后，需要将JSON格式转换为JavaScript对象，然后在网页中使用该数据。

把 JSON 文本转换为 JavaScript 对象

JSON 最常见的用法之一，是从 web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest），将 JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据。

实例

var txt = '{ "employees" : [' +      
'{ "x":"x1" , "y":"y1" },' +        
'{ "x":"x2" , "y":"y2" },' +       
'{ "x":"x3" , "y":"y3" } ]}';

由于 JSON 语法是 JavaScript 语法的子集，JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。

eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成 JavaScript 对象。必须把文本包围在括号中，这样才能避免语法错误：

var obj = eval ("(" + txt + ")");

在网页中使用 JavaScript 对象：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSON</title>
</head>
<body>
<p>
    x: <span id="xx"></span><br> 
    y: <span id="yy"></span><br> 
</p> 
<script>
var txt = '{ "employees" : [' +      
'{ "x":"x1" , "y":"y1" },' +        
'{ "x":"x2" , "y":"y2" },' +       
'{ "x":"x3" , "y":"y3" } ]}';

var obj = eval ("(" + txt + ")");

document.getElementById("xx").innerHTML=obj.employees[1].x 
document.getElementById("yy").innerHTML=obj.employees[1].y 
</script>
</body>
</html>

JSONP 教程

Jsonp 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

为什么我们从不同的域（网站）访问数据需要一个特殊的技术(JSONP )呢？这是因为同源策略。

什么是同源策略？它是由Netscape提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。

Jsonp 的实现原理是利用 <script> 标签可以获取不同源资源的特点，来达到跨域访问某个资源的目的。

JSONP 应用

1. 服务端JSONP格式数据

如客户想访问 :

/try/ajax/jsonp.php?jsonp=callbackFunction。

真正返回到客户端的数据显示为:

callbackFunction(["customername1","customername2"])。

服务端文件jsonp.php代码：

<?php header('Content-type: application/json'); 

$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']); 

$json_data = '["customername1","customername2"]'; 

echo $jsoncallback . "(" . $json_data . ")"; ?>

2. 客户端实现 callbackFunction 函数

<script type="text/javascript">
function onCustomerLoaded(result, methodName)
{
    var html = '<ul>';
    for(var i = 0; i < result.length; i++)
    {
        html += '<li>' + result[i] + '</li>';
    }
    html += '</ul>';
    document.getElementById('divCustomers').innerHTML = html;
}
</script>

客户端页面完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/xxxx/xhtml" >
<head>
    <title>JSONP 实例</title>
</head>
<body>
    <div id="divCustomers"></div>
    <script type="text/javascript">
        function callbackFunction(result, methodName)
        {
            var html = '<ul>';
            for(var i = 0; i < result.length; i++)
            {
                html += '<li>' + result[i] + '</li>';
            }
            html += '</ul>';
            document.getElementById('divCustomers').innerHTML = html;
        }
    </script>
<script type="text/javascript" src="/try/ajax/jsonp.php?
jsoncallback=callbackFunction"></script>
</body>
</html>

jQuery 使用 JSONP

实例：

<!DOCTYPE html>
<html>
<head>
   <title>JSONP 实例</title>
   <script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js" 
    rel="external nofollow" ></script> 
</head>
<body>
<div id="divCustomers"></div>
<script>
$.getJSON("/try/ajax/jsonp.php?jsoncallback=?", function(data) 
{  
  var html = '<ul>';
    for(var i = 0; i < data.length; i++)
    {
       html += '<li>' + data[i] + '</li>';
    }
  html += '</ul>';
  $('#divCustomers').html(html); 
});
</script>
</body>
</html>

JSON 数据类型

JSON 格式支持以下数据类型：

类型	描述
数字型（Number）	JavaScript 中的双精度浮点型格式
字符串型（String）	双引号包裹的 Unicode 字符和反斜杠转义字符
布尔型（Boolean）	true 或 false
数组（Array）	有序的值序列
值（Value）	字符串，数字，true 或 false，null 等等
对象（Object）	无序的键:值对集合
空格（Whitespace）	可用于任意符号对之间
null	空

数字型

JavaScript 中的双精度浮点型格式，取决于实现。
不能使用八进制和十六进制格式。
在数字中不能使用 NaN 和 Infinity。

类型	描述
整形（Integer）	数字1-9，0和正负数
分数（Fraction）	分数，比如 0.1
指数（Exponent）	指数，比如 e，e+，e-，E，E+，E-

语法：

var json-object-name = { string : number_value, .......}

示例：

var obj = {marks: 100}

字符串型

零个或多个双引号包裹的 Unicode 字符以及反斜杠转义序列。
字符就是只有一个字符的字符串，长度为 1。

类型	描述
"	双引号
\	反斜线
/	斜线
b	退格符
f	换页符
n	换行符
r	回车符
t	水平制表符
u	四位十六进制数字

语法：

var json-object-name = { string : "string value", .......}

示例：

var obj = {name: 'xxxx'}

布尔型

包含 true 和 false 。

语法：

var json-object-name = { string : true/false, .......}

示例：

var obj = {name: 'xxx', marks: 22, distinction: true}

数组

有序的值集合。
使用方括号闭合，这意味着数组以 [ 开始，以 ] 结尾。
值使用 ,（逗号）分割。
数组索引可以以 0 或 1 开始。
当键名是连续的整数时应该使用数组。

语法：

[ value, .......]

示例：

{
    "books": [
        { "language":"Java" , "edition":"second" },
        { "language":"C++" , "edition":"second" },
        { "language":"C" , "edition":"second" }
    ]
}

对象

无序的名/值对集合。
对象使用大括号闭合，以 '{' 开始，以 '}' 结尾。
每个名称后面都跟随一个 ':'（冒号），名/值对使用 ,（逗号）分割。
键名必须是字符串，并且不能同名。
当键名是任意字符串时应该使用对象。

语法：

{ string : value, .......}

示例：

{
    "id": "xxxx",
    "language": "JAVA",
    "price": xxx,
}

空格

在任意一对符号之间插入

语法：

{string:"   ",....}

使用空格

var i= "   xxx";

不使用空格

var j = "  xxx"

null

意味着空类型。

语法：

null

示例：

var i = null;

JSON 对象

JSON 对象使用在大括号({})中书写，对象可以包含多个 key/value（键/值）对。

key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。
key 和 value 中使用冒号(:)分割。
每个 key/value 对使用逗号(,)分割。

创建简单的对象

JSON 对象可以使用 JavaScript 创建。

创建一个空对象：

var Obj = {};

创建一个新对象：

var Obj = new Object();

创建一个 bookname 属性值为字符串，price属性值为数字的对象。

var Obj = { "bookname ":"xxx", "price":xxx };

可以通过使用 '.' 运算符访问属性。

实例

<html>
<head>
<title>JSON</title>
<script language="javascript" >

    var Obj = { "name" : "xxx", "time"  : xxxx };
    document.write("<h1>JSON和JavaScript的例子</h1>");
    document.write("<h3>名字="+Obj.name+"</h3>");  
    document.write("<h3>时间="+Obj.time+"</h3>");  

</script>
</head>
<body>
</body>
</html>

访问对象值

可以使用点号（.）来访问对象的值：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSON</title>
</head>
<body>

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

<script>

var Obj, x;
Obj = { "name":"xxx", "alexa":1111, "site":null };
x = Obj.name;
document.getElementById("demo").innerHTML = x;

</script>

</body>
</html>

可以使用中括号（[]）来访问对象的值：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSON</title>
</head>
<body>

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

<script>

var Obj, x;
Obj = Obj = { "name":"xxx", "alexa":222, "site":null };
x = Obj["name"];
document.getElementById("demo").innerHTML = x;

</script>

</body>
</html>

循环对象

使用 for-in 循环对象的属性：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSON</title>
</head>
<body>

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

<script>
var Obj = { "name":"xxx", "price":22, "site":null };
for (x in Obj) 
{
    document.getElementById("demo").innerHTML += x + "<br>";
}
</script>

</body>
</html>

在 for-in 循环对象的属性时，使用中括号（[]）来访问属性的值：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSON</title>
</head>
<body>

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

<script>
var Obj = { "name":"xxx", "price":22, "site":null };
for (x in Obj) 
{
    document.getElementById("demo").innerHTML += Obj[x] + "<br>";
}
</script>

</body>
</html>

创建数组对象

在 JavaScript 中使用 JSON 创建数组对象

<html>
<head>
<title>JSON</title>
<script language="javascript" >

document.writeln("<h2>JSON数组对象</h2>");

var books = 
{
    "Pascal" : [ 
        { "Name"  : "x1", "price" : 200 },
        { "Name"  : "x2", "price" : 200 }
    ],                       
    "Scala"  : [
        { "Name"  : "x3", "price" : 200 }, 
        { "Name"  : "x4", "price" : 200 }
    ]    
}    

var i = 0
document.writeln("<table border='2'><tr>");
for(i=0;i<books.Pascal.length;i++)
{   
    document.writeln("<td>");
    document.writeln("<table border='1' width=100 >");
    document.writeln("<tr><td><b>Name</b></td><td width=50>"
    + books.Pascal[i].Name+"</td></tr>");
    document.writeln("<tr><td><b>Price</b></td><td width=50>"
    + books.Pascal[i].price +"</td></tr>");
    document.writeln("</table>");
    document.writeln("</td>");
}

for(i=0;i<books.Scala.length;i++)
{
    document.writeln("<td>");
    document.writeln("<table border='1' width=100 >");
    document.writeln("<tr><td><b>Name</b></td><td width=50>"
    + books.Scala[i].Name+"</td></tr>");
    document.writeln("<tr><td><b>Price</b></td><td width=50>"
    + books.Scala[i].price+"</td></tr>");
    document.writeln("</table>");
    document.writeln("</td>");
}
document.writeln("</tr></table>");
</script>
</head>
<body>
</body>
</html>

嵌套 JSON 对象

JSON 对象中可以包含另外一个 JSON 对象：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSON</title>
</head>
<body>

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

<script>
Obj = 
{
	"name":"xxxx",
	"sites": 
	{
		"site1":"www.xxx.cn",
		"site2":"m.xxx.cn",
		"site3":"www.xxx.cn/json/"
	}
}
document.getElementById("demo").innerHTML += Obj.sites.site1 + "<br>";
document.getElementById("demo").innerHTML += Obj.sites["site1"];
</script>

</body>
</html>

修改值

使用点号(.)来修改 JSON 对象的值：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSON</title>
</head>
<body>

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

<script>
var Obj, i, x = "";
Obj = 
{
    "name":"xxx",
    "sites": 
    {
        "site1":"www.xxx.cn",
        "site2":"m.xxx.cn",
        "site3":"www.xxx.cn/json/"
    }
}
Obj.sites.site1 = "www.yyy.com";

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

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

</script>

</body>
</html>

使用中括号([])来修改 JSON 对象的值：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSON</title>
</head>
<body>

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

<script>
var Obj, i, x = "";
Obj = 
{
    "name":"xxx",
    "sites": 
    {
        "site1":"www.xxx.cn",
        "site2":"m.xxx.cn",
        "site3":"www.xxx.cn/json/"
    }
}
Obj.sites["site1"] = "www.yyy.com";

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

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

</script>

</body>
</html>

JSON 模式

示例

{
    "$schema": "http://json-schema.org/draft-04/schema#",
    "title": "Product",
    "description": "A product from xxx's catalog",
    "type": "object",
    "properties": 
    {
        "id": 
        {
            "description": "The unique identifier for a product",
            "type": "integer"
        },
        "name": 
        {
            "description": "Name of the product",
            "type": "string"
        },
        "price": 
        {
            "type": "number",
            "minimum": 0,
            "exclusiveMinimum": true
        }
    },
    "required": ["id", "name", "price"]
}

用于这一模式中的各种重要关键字：

关键字	描述
$schema	$schema 关键字状态，表示这个模式与 v4 规范草案书写一致。
title	用它给我们的模式提供了标题。
description	关于模式的描述。
type	type 关键字在我们的 JSON 数据上定义了第一个约束：必须是一个 JSON 对象。
properties	定义各种键和他们的值类型，以及用于 JSON 文件中的最小值和最大值。
required	存放必要属性列表。
minimum	给值设置的约束条件，表示可以接受的最小值。
exclusiveMinimum	如果存在 "exclusiveMinimum" 并且具有布尔值 true，如果它严格意义上大于 "minimum" 的值则实例有效。
maximum	给值设置的约束条件，表示可以接受的最大值。
exclusiveMaximum	如果存在 "exclusiveMinimum" 并且具有布尔值 true，如果它严格意义上小于 "maximum" 的值则实例有效。
multipleOf	如果通过这个关键字的值分割实例的结果是一个数字则表示紧靠 "multipleOf" 的数字实例是有效的。
maxLength	字符串实例字符的最大长度数值。
minLength	字符串实例字符的最小长度数值。
pattern	如果正则表达式匹配实例成功则字符串实例被认为是有效的。

JSON 基础结构

JSON的两种结构

对象结构(键值对)；
数组结构；

对象结构

对象结构是使用大括号“{}”括起来的，大括号内是由0个或多个用英文逗号分隔的“关键字:值”对（key:value）构成的。

语法：

var Obj =
{
    "键名1":值1,
    "键名2":值2,
    ……
    "键名n":值n
}

注意：这里的键名是字符串，但是值可以是数值、字符串、对象、数组或逻辑true和false。

JSON数组结构

JSON数组结构是用中括号“[]”括起来，中括号内部由0个或多个以英文逗号“,”分隔的值列表组成。

语法：

var arr =
[
    {
        "键名1":值1,
        "键名2":值2
    },
    {
        "键名3":值3,
        "键名4":值4
    },
    ……
]

注意：这里的键名是字符串，但是值可以是数值、字符串、对象、数组或逻辑true和false。

JSON 数据格式

添加 JSON

JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串，然后就可以在函数之间轻松地传递这个字符串，或者在异步应用程序中将字符串从 Web 客户机传递给服务器端程序。

示例

最简单的形式，用 JSON 表示名称/值对：

{ "firstName": "xxx" }

比等效的纯文本名称/值对占用更多的空间：

firstName="xxx"

创建包含多个名称/值对的记录

{
    "firstName": "x",
    "lastName":"y",
    "email": "x@newInstance.com"
}

在这种情况下 JSON 更容易使用，而且可读性更好。

值的数组

当需要表示一组值时，JSON 不但能够提高可读性，而且可以减少复杂性。

在 XML 中，需要许多开始标记和结束标记

使用 JSON，只需将多个带花括号的记录分组在一起：

{ "people": [
  { "firstName": "x1", "lastName":"y1", "email": "x1@newInstance.com" },
  { "firstName": "x2", "lastName":"y2", "email": "x2@newInstance.com" },
  { "firstName": "x3", "lastName":"y3", "email": "x3@newInstance.com" }
]}

可以使用相同的语法表示多个值（每个值包含多个记录）：

{ 
"programmers": [
  { "firstName": "x1", "lastName":"y1", "email": "x1@newInstance.com" },
  { "firstName": "x2", "lastName":"y2", "email": "x2@newInstance.com" },
  { "firstName": "x3", "lastName":"y3", "email": "x3@newInstance.com" }
 ],
"authors": [
  { "firstName": "x4", "lastName": "y4", "genre": "xxxxx" },
  { "firstName": "x5", "lastName": "y5", "genre": "yyyyy" },
  { "firstName": "x6", "lastName": "y6", "genre": "zzzzz" }
 ]
}

注意：能够表示多个值，每个值进而包含多个值。在不同的主条目之间，记录中实际的名称/值对可以不一样。JSON 是完全动态的，允许在 JSON 结构的中间改变表示数据的方式。

JSON 是 JavaScript 原生格式，这意味着在JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。在 JavaScript 中使用 JSON

实例

创建一个新的 JavaScript 变量，然后将 JSON 格式的数据字符串直接赋值给它：

var x =
{ 
"programmers": [
  { "firstName": "x1", "lastName":"y1", "email": "x1@newInstance.com" },
  { "firstName": "x2", "lastName":"y2", "email": "x2@newInstance.com" },
  { "firstName": "x3", "lastName":"y3", "email": "x3@newInstance.com" }
 ],
"authors": [
  { "firstName": "x4", "lastName": "y4", "genre": "xxxxx" },
  { "firstName": "x5", "lastName": "y5", "genre": "yyyyy" },
  { "firstName": "x6", "lastName": "y6", "genre": "zzzzz" }
 ]
}

访问数据

只需用点号表示法来表示数组元素。

访问 programmers 列表的第一个条目的姓氏

x.programmers[0].lastName;

利用这样的语法，可以处理任何 JSON 格式的数据，而不需要使用任何额外的 JavaScript 工具包或 API。

修改 JSON 数据

可以用点号和括号修改数据：

x.authors[1].lastName = "xyz";

转换回字符串

在 JavaScript中转换：

String newJSONtext = x.toJSONString();

获得了一个可以在任何地方使用的文本字符串

可以将任何 JavaScript 对象转换为 JSON 文本。并非只能处理原来用 JSON 字符串赋值的变量。

为了对名为 myObject 的对象进行转换，只需执行相同形式的命令：

String myObjectInJSON = myObject.toJSONString();

如果使用 JSON，只需调用一个简单的函数，就可以获得经过格式化的数据，可以直接使用了。对于其他数据格式，需要在原始数据和格式化数据之间进行转换。

JSON 数据解析

js 代码

function showJSON() 
{
    var user = 
    {
        "username": "xxx",
        "age": 20,
        "info": 
        {
            "tel": "123456",
            "cellphone": "98765"
        },
        "address": [
            {
                "city": "xxx",
                "postcode": "222333"
            }, 
            {
                "city": "xxx",
                "postcode": "555666"
            }
        ]
    }
    alert(user.username);
    alert(user.age);
    alert(user.info.cellphone);
    alert(user.address[0].city);
    alert(user.address[0].postcode);
}

表示一个user对象，拥有username, age, info, address 等属性。

用JSON修改数据，修改上面的例子：

function showJSON() 
{
    var user = 
    {
        "username": "xxx",
        "age": 20,
        "info": 
        {
            "tel": "123456",
            "cellphone": "98765"
        },
        "address": [
            {
                "city": "xxx",
                "postcode": "222333"
            }, 
            {
                "city": "xxx",
                "postcode": "555666"
            }
        ]
    }
    alert(user.username);
    alert(user.age);
    alert(user.info.cellphone);
    alert(user.address[0].city);
    alert(user.address[0].postcode);
    user.username = "yyy";
    alert(user.username);
}
showJSON()

JSON提供了json.js包，下载http://www.json.org/json.js 后，将其引入然后就可以简单的使用object.toJSONString()转换成JSON数据。

js 代码

function showCar() 
{
    var carr = new Car("xxx", "Coronet x/y", 1968, "xxx");
    alert(carr.toJSONString());
}

function Car(make, model, year, color) 
{
    this.make = make;
    this.model = model;
    this.year = year;
    this.color = color;
}

使用eval来转换JSON字符到Object

js 代码

function Eval() 
{ 
    var str = '{ "name": "xxx", "occupation": "character" }'; 
    var obj = eval('(' + str + ')'); 
    alert(obj.toJSONString()); 
}

使用parseJSON()方法

js 代码

function Eval() 
{
    var str = '{ "name": "xxx", "occupation": "character" }';
    var obj = str.parseJSON();
    alert(obj.toJSONString());
}

JSON遍历

JS 循环遍历JSON数据

JSON数据如：

{
    "options":"[
    {/"text/":/"x1/",/"value/":/"1/"},
    {/"text/":/"x2/",/"value/":/"2/"},
    {/"text/":/"x3/",/"value/":/"3/"}
    ]"
}

用js：

<script type="text/javascript"> 
function text()
{ 
 var json = 
 {
    "options":"[
    {/"text/":/"x1/",/"value/":/"1/"},
    {/"text/":/"x2/",/"value/":/"2/"},
    {/"text/":/"x3/",/"value/":/"3/"}
    ]"
 }
 json = eval(json.options) 
 for(var i=0; i<json.length; i++) 
 { 
   alert(json[i].text+" " + json[i].value) 
 } 
} 
</script>

javascript数组遍历for与for in区别详解

js中遍历数组的有两种方式：

标准的for循环

var array = ['a']
for (var i = 1; i < array.length; i++) 
{
    alert(array[i])
}

foreach循环

var array = ['a']
for (var i in array) 
{
    alert(array[i])
}

正常情况下上面两种遍历数组的方式结果一样。

第一个区别：

标准的for循环中的i是number类型,表示的是数组的下标,但是foreach循环中的i表示的是数组的key是string类型,因为js中一切皆为对象。

第二个区别：

加上如下代码：

//扩展了js原生的Array
Array.prototype.test=function()
{
 
}

标准的for循环仍然真正的对数组循环, 但是此时foreach循环对我刚才写的test方法写打印出来了。

这就是for与foreach遍历数组的最大区别。

建议

1.不要用for in遍历数组，全部统一采用标准的for循环变量数组
2.如果要对js的原生类扩展的时候，不要采用prototype了

JS遍历Json字符串

将Json字符串转换成JSON对象

var t='{"firstName": "x", "lastName": "y"}'; 
var obj = eval('(' + t + ')');

遍历读取键值对

for(var str in obj)
{ 
    alert(str+'='+obj[str]); 
}

示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript">
    var t="{
        'firstName': 'x', 
        'lastName': 'y', 
        'address': 
            { 'streetAddress': 'xxx', 
              'city': 'xx', 
              'state': 'xx', 
              'postalCode': 98052 
            },
        'phoneNumbers': [ '425-777-7777','206-777-7777' ] 
    }";
 
    var obj=eval('('+t+')'); //单个JSON对象时要加括号，JSON数组就不需要了
    alert(obj.firstName);
    alert(obj.lastName);

    var t2="[
        {name:'xxx',age:'1'},    
        {name:'yyy',age:'2'},
        {name:'zzz',age:'3'},
        {name:'vvv',age:'4'}] ";
    var obj=eval(t2);
    for(var i=0;i<myobj.length;i++)
    {
        alert(obj[i].name);
        alert(obj[i].age);
    }


//stringifier 函数的作用跟 parse 相反， 用来将一个js对象转换为 JSON 文本。
var jsonText = JSON.stringify(obj);
alert(jsonText);

var myObject = JSON.parse(myJSONtext, filter);  


</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

在JS里创建JSON数据然后遍历使用

创建一个JSON对象，包括了年份和月份的数据。

var YearSelect = {}; 
var Year = 2014; 
var DateOption; 
for (var i = Year; i < Year + 12; i++) 
{ 
    DateOption = {'Year':i, 'Month':i-Year+1}; 
    / alert(DateOption.Year) 
    YearSelect[i] = DateOption; 
}

遍历

for(var key in YearSelect)
{ 
    alert(YearSelect[key].Year); 
    alert(YearSelect[key].Month); 
}

js数组如何添加json数据及js数组与json的区别

js数组添加json数据的两种方式：

第一种方式：

personInfo: [],
for(var i = 0; i < _STAGE.passengerInfoArray.length; i++)
{
    var name = _STAGE.passengerInfoArray[i];
    var person = {v:name, text:name};
    this.personInfo.push(person);
}

第二种方式：

var passengerInfo = {};
passengerInfo.psgTypeDesc = psgTypeDesc;
passengerInfo.flightPrice = flightPrice;
_STAGE.passengerInfoArray.push(passengerInfo);

js数组与 json 的区别

一、数组

1. 定义一维数组：

var s=new Array();
s=[1,2,3,4];
alert(s[0]);

或

var s=new Array();
s[0]=1,s[1]=2,s[3]=3,s[4]=4;
alert(s[0]);

结果为1；

2. 定义二维数组：

var s=new Array();
var s=[[3,1],[2,3,4],3,[4,5,6,7,8]];
alert(s[1][0]);

结果为2；

二、定义json对象

1. json对象

var status_process = 
{
    "name1" : 'x1',
    "name2" : 'x2',
    "name3" : 'x3',
    "name4" : 'x4',
    "name5" : 'x5'
}    
alert(status_process);

结果为：Object:Object;

2. json字符串

var s1="{";
var s2 = " 
        'name1' : 'x1',  
        'name2' : 'x2',
        'name3' : 'x3',
        'name4' : 'x4',
        'name5' : 'x5'";
var s3="}";
var status_process=s1+s2+s3；

将字符串转换为json对象使用函数eval，eval("(" + status_process+ ")")；

结论：从后台传入到前台的是json字符串，不是真正的json对象，因此需要使用eval函数转换。

3. json对象的使用

var status_process = 
{
    "name1" : 'x1',
    "name2" : 'x2',
    "name3" : 'x3',
    "name4" : 'x4',
    "name5" : 'x5'
} 
alert(status_process["name5"]);
alert(status_process.name5);

结果为x5；

4. json二维对象

var status_process = {
 name1 : {name3:'xx'},
 name2 : 'x2',
 name3 : 'x3',
 name4 : 'x4',
 name5 : 'x5'
};
alert(status_process["name1"]["name3"]);
alert(status_process.name1.name3);

结果为xx；

JS循环遍历JSON数据的方法

1. json数据的列循环

var len = json.length;
for (var i = 0; i < len; i++)
{
    for (obj in json[i])
    {
        var obj2 = obj;
    }
}

2. JS 循环遍历JSON数据

JSON数据如：

{
    "options":[
        {"text":"xxx","value":"1"},
        {"text":"yyy","value":"2"},
        {"text":"zzz","value":"3"}
    ]
}

用js循环遍历的方法如下：

<script type="text/javascript"> 
function text()
{ 
  var json = {"options":"[
    {/"text/":/"xxx/",/"value/":/"1/"},
    {/"text/":/"yyy/",/"value/":/"2/"},
    {/"text/":/"zzz/",/"value/":/"3/"}]"}  
  json = eval(json.options) 
  for(var i=0; i<json.length; i++) 
  { 
     alert(json[i].text+" " + json[i].value) 
  } 
} 
</script>

JSON字符串

javascript中JSON对象与JSON字符串相互转换实例

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript">
        var obj = new Object();
        obj.Name = "x"
        obj.Age = 18;

        //通过字面量的形式来定义对象
        var obj1 = { "Name": "x", "Age": "18" };
        var arr = [{ "Name": "x", "Age": "18" }, { "Name": "xx", "Age": "20" }];

        //JSON格式：将json的字面量表示形式，当做字符串存放，则为json格式字符串
        var str = '{ "Name": "x", "Age": "18" }';
        var jsonstrarr = '[{ "Name": "x", "Age": "18" }, { "Name": "xx", "Age": "20" }];';
        
        //将json字符串转换成js对象（数组）
        var resobj = JSON.parse(str);
        alert(resobj.Name);

    </script>
</head>
<body>
</body>
</html>

在js对象和json对象的互转：

JS对象转换成为JSON

调用JSON.stringify()方法。

var data = new Object();
var json_data = JSON.stringify(data);

JSON转换成为JS

1、用jQuery的一个方法$.parseJSON()将JSON格式的数据转成JS对象。

var json_data = $.getJSON();
var data = $.parseJSON(json_data);

2、将json转换成js对象的方法：

var json = eval('(' + result + ')');

通过上面这个表达式，就完成了将服务器端响应给客户端的Json格式的字符串解析成了一个Json（格式的）对象，名称为“json”，通过“json.”或者“json[]”的方式便可进行数据访问。

JavaScript中字符串(string)转json的方法

JavaScript中字符串(string)转json的方法主要有四种：

第一种方式：使用js函数eval()

正确的转换方式：

testJson = eval("(" + testJson + ")");

eval()的速度非常快，但是他可以编译以及执行任何javaScript程序，所以会存在安全问题。在使用eval()。来源必须是值得信赖的。需要使用更安全的json解析器。在服务器不严格的编码在json或者如果不严格验证的输入，就有可能提供无效的json或者载有危险的脚本，在eval()中执行脚本，释放恶意代码。

代码

function ConvertToJsonForJs() 
{
    var testJson = '{ "name": "xxx", "age": 16 }';
    testJson = eval("(" + testJson + ")");
    alert(testJson.name);
}

第二种方式：使用jquery.parseJSON()方法对json的格式要求比较高，必须符合json格式

代码

function ConvertToJsonForJq() 
{
    var testJson = '{ "name": "xxx", "age": 16 }';
    testJson = $.parseJSON(testJson);
    alert(testJson.name);
}

第三种方式：使用Function来进行转换

代码

var jsonStr = '{"userName": "xxx","userAge": 26,"isMale": true}';
var json = (new Function("return " + jsonStr))();

可以看到其原理就是拼接js代码字符串，然后使用Function创建一个匿名方法然后调用之。

第四种方式：使用JSON全局对象

var jsonStr = '{"userName": "xxx","userAge": 26,"isMale": true}';
var json = JSON.parse(jsonStr);
var str = JSON.stringify(json);

JSON数组

用javascript对一个json数组深度赋值示例

用javascript对一个json数组深度赋值

代码

<!DOCTYPE HTML> 
<html> 
<head> 
<title>test</title> 
</head> 
<body> 
<script> 
var arr=
{ 
    "name":"xxx", 
    "age":23, 
    "address":
    { 
        "city":"xxxxxx", 
        "gas":
        { 
            "gasSheet":"yyy", 
            "H_adjust":1 
        }, 
        "time":
        { 
            "duration":31 
        } 
    }, 
    "units":
    {    
        "title":"function"
    } 
} 
function show(obj)
{ 
    var tmp={}; 
    for(var i in obj)
    { 
        if(obj[i]=="object")
        { 
            <span style="color:#ff0000;">tmp[i]=show(obj[i]);</span> 
        } 
        else    
        { 
            <span style="color:#ff0000;">tmp[i]=obj[i]</span> 
        } 
    } 
    return tmp; 
} 

var result=show(arr); 
console.log(result);
</script> 
</body> 
</html>

如何将一个jSON对象赋值给一个jSON数组

jSON对象：

var x = {"A": [1,2,3,4,5],"B": [ 2,3,4,5,6]}

jSON 数组

var y =  [{name:null,data:null},  {name:null,data:null}]

第一种方法：

var index=0;  
for( var tests in x)
{   
     y[index].name=tests;   
     y[index].data=x[tests];  
}

第一种方法对于超过两个名称/值对的情况不适用。

第二种方法：

y=[];  
for(var tests in x)
{  
     //定义一个新的jSON对象，改变成jSON数组中jSON数据的格式  
     var json = {name:tests, data:x[tests]};  
     //通过数组的push()方法向数组中增加jSON数据  
     y.push(json);  
}

第二种方法，在遍历x这个jSON对象的时候，生成新的格式的jSON对象，不断push到数组中，这样就达到了目的，而且即使是有名称/值对也不怕，通用性增强。

解析javascript 数组（以及json元素的添加删除）

javasscript删除数组的3种方法

1、用shift()方法

shift：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined

var x=[1,2,3,4,5]
var x.shift() //得到1
alert(x) //[2,3,4,5]

2、用pop()方法

pop：删除原数组最后一项，并返回删除元素的值；如果数组为空则返回undefined

var x=[1,2,3,4,5]
var x.pop() //得到5
alert(x) //[1,2,3,4]

3、用splice方法

可以对数组任意项进行增加，删除，替换操作

修改操作：

var x=[1,2,3,4,5]
x.splice(2,1,8,9)
alert(x) //1,2,8,9,4,5

第一个参数是准备操作的数组位置，第二个参数是操作位置后面的数组项数，第三个以后的就是，被替换后的内容

例子表示：从x这个数组位置2开始（也就是值为3的那一项，数组下标从0开始的），位置2后的一项，替换成成8，9

如果把第二个参数改为2，也就是x.splice(2,2,8,9)，也就是说位置2后面的两项换成8，9，打印出来的结果就是1,2,8,9,5，3和4这2两项被换掉了

这里需要说明的是，被替换的项数不一定要和替换的项数相等

删除操作：

var x=[1,2,3,4,5]
x.splice(2,1)
alert(x) //1,2,4,5

上面例子中，把x中的位置2后的1项替换成空的，后面没有内容，结果可以看到，把3这项删除了

添加操作：

var x=[1,2,3,4,5]
x.splice(2,0,8,9)
alert(x) //1,2,8,9,3,4,5

上面例子中，把chaomao中位置2后的0项换成8,9，也就等于添加了两项

javasscript删除对象的方法

js中删除对象元素用delete操作符

代码

var p =
{
    "name": “x”,
    "age":45,
    "sex":"male"
};
delete p.name
for(var i in p)
{
    console.log(i);
}

添加json元素的方法

代码

var json = {}; 
json[text] = value;
json.text2 = value2;

js数组如何添加json数据

js数组添加json数据的方式有如下两种：

第一种方式

personInfo : [];
for(var i = 0; i < _STAGE.passengerInfoArray.length; i++)
{
  var name = _STAGE.passengerInfoArray[i];
  var person = {v:name, text:name};
  this.personInfo.push(person);
}

第二种方式

var passengerInfo = {};
passengerInfo.psgTypeDesc = psgTypeDesc;
passengerInfo.flightPrice = flightPrice;
_STAGE.passengerInfoArray.push(passengerInfo);