在JavaScript中使用JSON数据

 更新时间:2016年02月15日 09:43:26   投稿:mrr  
JSON 是 JavaScript 原生格式,这意味着 在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包,接下来由脚本之家小编给大家介绍在JavaScript中使用JSON数据的方法,感兴趣的朋友一起学习吧

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

JSON语法

JSON建构于两种结构:

对象——名称/值对的集合。不同的语言中,它被理解为对象,纪录,结构,字典,哈希表,有键列表(keyed list),或者关联数组。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值' 对”之间使用“,”(逗号)分隔。

数组——值的有序列表。在大部分语言中,它被理解为数组。一个数组以“[”(左中括号)开始,“]”(右中括号)结束。值之间使用“,”(逗号)分隔。

JSON没有变量或其他控制结构。JSON只用于数据传输。

将JSON 数据赋值给变量

例如,可以创建一个新的 JavaScript 变量,然后将 JSON 格式的数据字符串直接赋值给它:

var people =
{ "programmers": [
{ "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
{ "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
{ "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
],
"authors": [
{ "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
{ "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
{ "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }
],
"musicians": [
{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
{ "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
]
}

这非常简单;现在 people 包含前面看到的 JSON 格式的数据。但是,这还不够,因为访问数据的方式似乎还不明显。

访问数据

尽管看起来不明显,但是上面的长字符串实际上只是一个数组;将这个数组放进 JavaScript 变量之后,就可以很轻松地访问它。实际上,只需用点号表示法来表示数组元素。所以,要想访问 programmers 列表的第一个条目的姓氏,只需在 JavaScript 中使用下面这样的代码:

people.programmers[0].lastName;

注意,数组索引是从零开始的。所以,这行代码首先访问 people 变量中的数据;然后移动到称为 programmers 的条目,再移动到第一个记录( [0] );最后,访问 lastName 键的值。结果是字符串值 “McLaughlin” 。

下面是使用同一变量的几个示例。

people.authors[1].genre 
// Value is "fantasy"
people.musicians[3].lastName 
// Undefined. This refers to the fourth entry,and there isn't one
people.programmers[2].firstName 
// Value is "Elliotte"

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

修改 JSON 数据

正如可以用点号和括号访问数据,也可以按照同样的方式轻松地修改数据:

people.musicians[1].lastName = "Rachmaninov";

在将字符串转换为 JavaScript json 格式对象之后,就可以像这样修改变量中的数据。

注意:json 格式的对象和 json 文本是不同的

var obj={name:" 张三 ","sex":' 男 '}; //json 格式的对象
var str=" { name: " 张三 " , "sex" : ' 男 ' }" ; //json 格式的字符串( json 格式的文本)

转换回字符串

当然,如果不能轻松地将对象转换回本文提到的文本格式,那么所有数据修改都没有太大的价值。在 JavaScript 中这种转换也很简单:

var newJSONtext = people.toJSONString();

这样就行了!现在就获得了一个可以在任何地方使用的文本字符串,例如,可以将它用作 Ajax 应用程序中的请求字符串。

更重要的是,可以将任何 JavaScript 对象转换为 JSON 文本。并非只能处理原来用 JSON 字符串赋值的变量。为了对名为 myObject 的对象进行转换,只需执行相同形式的命令:

<script type="text/javascript">
function Car(make,model,year,color)
{
this.make=make; 
this.model=model; 
this.year=year; 
this.color=color;
} 
function showCar()
{
var carr = new Car("Dodge","Coronet R/T",1968,"yellow"); 
alert(carr.toJSONString()); 
}
</script>

这就是 JSON 与其他数据格式之间最大的差异。如果使用 JSON ,只需调用一个简单的函数,就可以获得经过格式化的数据,可以直接使用了。对于其他数据格式,需要在原始数据和格式化数据之间进行转换。即使使用 Document Object Model 这样的 API (提供了将自己的数据结构转换为文本的函数),也需要学习这个 API 并使用 API 的对象,而不是使用原生的 JavaScript 对象和语法。

最终结论是,如果要处理大量 JavaScript 对象,那么 JSON 几乎肯定是一个好选择,这样就可以轻松地将数据转换为可以在请求中发送给服务器端程序的格式(Ajax) 。

JSON字符串转换为JSON对象的方法

要使用上面的str1,必须使用下面的方法先转化为JSON对象:

//由JSON字符串转换为JSON对象
var obj = eval('(' + str + ')');

或者

var obj = str.parseJSON(); //由JSON字符串转换为JSON对象

或者

var obj = JSON.parse(str); //由JSON字符串转换为JSON对象

然后,就可以这样读取:

Alert(obj.name);
Alert(obj.sex);

特别注意:如果obj本来就是一个JSON对象,那么使用eval()函数转换后(哪怕是多次转换)还是JSON对象,但是使用parseJSON()函数处理后会有问题(抛出语法异常)。

相关文章

  • 原生js实现随机点名

    原生js实现随机点名

    这篇文章主要为大家详细介绍了原生js实现随机点名,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-07-07
  • 如何利用js在两个html窗口间通信

    如何利用js在两个html窗口间通信

    这篇文章主要介绍了如何利用js在两个html窗口间通信,如果读者们有类似的需求,可以参考下
    2021-04-04
  • 深入浅析search 搜索框的写法

    深入浅析search 搜索框的写法

    本文以京东搜索框为例给大家浅析search 搜索框的写法,本文介绍的非常不错,需要的朋友可以参考下
    2016-08-08
  • 魔鬼字典 JavaScript 笔记 代码比较多乱

    魔鬼字典 JavaScript 笔记 代码比较多乱

    魔鬼字典 JavaScript 笔记 代码比较多乱,对于有经验的看容易点。
    2010-03-03
  • JS操作字符串的一些常见内置方法

    JS操作字符串的一些常见内置方法

    这篇文章主要给大家介绍了关于JS操作字符串的一些常见内置方法,JavaScript中有许多常用的数组和字符串操作函数,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • 原生javascript移动端滑动banner效果

    原生javascript移动端滑动banner效果

    这篇文章主要为大家详细介绍了原生javascript移动端滑动banner效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • JavaScript去除空格的三种方法(正则/传参函数/trim)

    JavaScript去除空格的三种方法(正则/传参函数/trim)

    个人认为去除空格最好的方法.采用的是正则表达式,这是最核心的原理,同时呢,还是有其他方法可以办到的,接下来将介绍一下三种方法(trim)空格,感兴趣的朋友可以了解下,或许对你有帮助呢
    2013-02-02
  • javaScript实现放大镜特效

    javaScript实现放大镜特效

    这篇文章主要为大家详细介绍了javaScript实现放大镜特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • bootstrap table实现合并单元格效果

    bootstrap table实现合并单元格效果

    这篇文章主要为大家详细介绍了bootstrap table实现合并单元格效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • 浅析JavaScript中的隐式类型转换

    浅析JavaScript中的隐式类型转换

    这篇文章主要是对JavaScript中的隐式类型转换进行了详细分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12

最新评论