JSON基础概念与JavaScript应用示例

作者:拾光时间:2026-10-27 08:32:38浏览:603

本文介绍JSON(JavaScript Object Notation)作为轻量级数据交换格式的基础概念,解析其基于名称/值对和有序列表的两种核心结构。通过具体的JavaScript代码示例,演示如何在JS中定义JSON对象、访问嵌套属性以及处理包含多个用户的数组结构,帮助开发者理解JSON在前端数据交互中的应用。

JSON基础概念与结构

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,旨在便于人类阅读和编写,同时也易于机器解析和生成。它基于ECMA-262标准第三版(1999年12月)中JavaScript语言的一个子集。JSON采用完全独立于编程语言的文本格式,但沿用了C语言家族(如C、C++、C#、Java、JavaScript、Perl、Python等)的习惯,这些特性使其成为理想的数据交换语言。

JSON的构建主要基于两种结构:

1. “名称/值”对的集合(A collection of name/value pairs)。在不同编程语言中,这通常被理解为对象(object)、记录(record)、结构体(struct)、字典(dictionary)、哈希表(hash table)、有键列表(keyed list)或关联数组(associative array)。

2. 值的有序列表(An ordered list of values)。在大多数语言中,这被理解为数组(array)。

这些都是常见的数据结构。事实上,大部分现代计算机语言都以某种形式支持它们。这使得一种数据格式能够在基于这些结构的编程语言之间进行交换成为可能。

JSON具有以下具体形式:

JSON语法规范与对象示例

• 对象是一个无序的“名称/值”对集合。对象以左花括号“{”开始,右花括号“}”结束。每个“名称”后跟随一个冒号“:”,“名称/值”对之间使用逗号“,”分隔。 • 数组是值的有序集合。数组以左方括号“[”开始,右方括号“]”结束。值之间使用逗号“,”分隔。 • 值(value)可以是双引号括起来的字符串(string)、数值(number)、布尔值true、false、null、对象(object)或数组(array)。这些结构可以相互嵌套。 • 字符串(string)是由双引号包围的任意数量Unicode字符的集合,支持使用反斜线进行转义。一个字符即一个单独的字符串。 • 字符串(string)与C或Java中的字符串非常相似。 • 数值(number)也与C或Java中的数值非常相似,但不包括未使用的八进制与十六进制格式,也不包含某些编码细节。 • 空白字符可以插入到任何符号之间。以下描述了完整的语言规范。在JavaScript中使用JSON的示例如下:

代码如下:

<script type="text/javascript">
var user =
          {
"Id":1,
"Name":"Hubery",
"Age":23,
"Address":
              {
"City":"Beijing","ZipCode":"111111"
              },
"Email":"hubery@jb51.net"
          };
alert(user.Id);
alert(user.Name);
alert(user.Age);
alert(user.Address.City);
alert(user.Address.ZipCode);
alert(user.Email);
</script>
JSON数组与嵌套结构处理下面我们将Address属性定义为数组,假设用户有两个地址:
<script type="text/javascript">
var user = 
 {
 "Id":1,
 "Name":"Hubery",
 "Age":23,
 "Address":
 [
 {"City":"Beijing","ZipCode":"111111"},
 {"City":"Langfang","ZipCode":"222222"}
 ],
 "Email":"hubery@jb51.net"
 };
 alert(user.Id);
 alert(user.Name);
 alert(user.Age);
 alert(user.Address[0].City);//还可以这样:alert(user.Address[0]["City"]);
 alert(user.Address[0].ZipCode);
 alert(user.Address[1].City);
 alert(user.Address[1].ZipCode);
 alert(user.Email);
</script>

JSON用户列表应用示例

如果我们想要一个用户列表,能行吗?答案是,没问题!

代码如下:

<script type="text/javascript">
var user =
          [
              {
"Id":1,
"Name":"Hubery",
"Age":23,
"Address":
                  [
{"City":"Beijing","ZipCode":"111111"},
{"City":"Langfang","ZipCode":"222222"}
                  ],
"Email":"hubery@jb51.net"
              },
              {
"Id":2,
"Name":"Chris",
"Age":24,
"Address":{"City":"Beijing","ZipCode":"100085"},
"Email":"chris@jb51.net"
              }
          ]
alert("Id: "+user[0].Id+"\r\nName: "+
user[0].Name+"\r\nAge: "+
user[0].Age+"\r\nAddress: ("+
user[0].Address[0].City+","+user[0].Address[0].ZipCode+") ("+user[0].Address[1].City+","+user[0].Address[1].ZipCode+")\r\nEmail: "+
user[0].Email);
alert("Id: "+user[1].Id+"\r\nName: "+
user[1].Name+"\r\nAge: "+
user[1].Age+"\r\nAddress: ("+
user[1].Address.City+","+user[1].Address.ZipCode+")\r\nEmail: "+
user[1].Email);
</script>
作者最新文章