JavaScript入门教程

JavaScript简介
JavaScript语法基础
JavaScript流程控制
JavaScript函数
面向对象编程
JavaScript事件
JavaScript DOM
正则表达式
JavaScript BOM
AJAX

专题分析

浏览器兼容性
JS优化
Web前端开发规范
编辑器推荐
总结和笔记

学习助手

对象参考手册
ECMAScript分析
数据中心
QQ交流群

Javascript JSON 及其使用

JSON 全称为 JavaScript 对象表示法(JavaScript Object Notation),即通过字面量来表示一个对象,从简单到复杂均可使用此方式。比如:
var obj = {
    name : "abruzzi",
    age : 26,
    birthday : new Date(1984, 4, 5),
    addr : {
        street : "Huang Quan Road",
        xno : "135"
    }
}

这种方式,显然比上边的例子简洁多了,没有冗余的中间变量,很清晰的表达了 obj 这样一个对象的结构。事实上,大多数有经验的 JavaScript 程序员更倾向与使用这种表示法,包括很多 JavaScript 的工具包如 jQuery,ExtJS 等都大量的使用了 JSON。JSON 事实上已经作为一种前端与服务器端的数据交换格式,前端程序通过 Ajax 发送 JSON 对象到后端,服务器端脚本对 JSON 进行解析,还原成服务器端对象,然后做一些处理,反馈给前端的仍然是 JSON 对象,使用同一的数据格式,可以降低出错的概率。

而且,JSON 格式的数据本身是可以递归的,也就是说,可以表达任意复杂的数据形式。

JSON 的写法很简单,即用花括号括起来的键值对,键值对通过冒号隔开,而值可以是任意的 JavaScript 对象,如简单对象 String,Boolean,Number,Null,或者复杂对象如Date,Object,其他自定义的对象等。

JSON 的另一个应用场景是:当一个函数拥有多个返回值时,在传统的面向对象语言中,我们需要组织一个对象,然后返回,而 JavaScript 则完全不需要这么麻烦,比如:
function point(left, top){
    this.left = left;
    this.top = top;
    //handle the left and top
    return {x: this.left, y:this.top};
}

直接动态的构建一个新的匿名对象返回即可:
    var pos = point(3, 4);
    //pos.x = 3;
    //pos.y = 4;
使用 JSON 返回对象,这个对象可以有任意复杂的结构,甚至可以包括函数对象。

在实际的编程中,我们通常需要遍历一个 JavaScript 对象,事先我们对对象的内容一无所知。怎么做呢?JavaScript 提供了 for..in 形式的语法糖:
for(var item in json){
    //item为键
    //json[item]为值
}

这种模式十分有用,比如,在实际的 WEB 应用中,对一个页面元素需要设置一些属性,这些属性是事先不知道的,比如:
var style = {
    border:"1px solid #ccc",
    color:"blue"
};

然后,我们给一个 DOM 元素动态的添加这些属性:
for(var item in style){
    //使用jQuery的选择器
    $("div#element").css(item, style[item]);
}

当然,jQuery 有更好的办法来做这样一件事,这里只是举例子,应该注意的是,我们在给$("div#element")添加属性的时候,我们对 style 的结构是不清楚的。

另外比如我们需要收集一些用户的自定义设置,也可以通过公开一个 JSON 对象,用户将需要设置的内容填入这个 JSON,然后我们的程序对其进行处理。

function customize(options){
    this.settings = $.extend(default, options);
}