JavaScript中对JSON对象的基本操作示例

 更新时间:2016年05月21日 10:31:05   投稿:goldensun  
JSON格式本就发自于JavaScript中的对象和数组,所以js操作起来自然也是最为简单原始,接下来我们就来看一些常用的JavaScript中对JSON对象的基本操作示例

JSON对象

1、对象的属性:
对象的属性是有键值对组成的,其中key为一个字符串,value可以为任何的Javascript对象。

//使用[]设置和获取对象的属性
var obj = new Object();
obj["www.jb51.net"] = "https://www.jb51.net";
alert(obj["www.jb51.net"]);

2、变量既是属性:
Javascript引擎在初始化时会构建一个全局对象,所有的变量都是这个全局对象的属性。为了引用这个全局对象,可以再顶级作用域中这样获取:

var global = this;

在Javascript中,任何独立的函数或者变量都属于这个对象的属性,即:

function test(){}

相当于:

window.test = function(){}

3、使用对象:
声明对象的三种方式:

① 通过new操作符创建一个Object对象,然后动态地添加属性,从无到有构造一个对象
② 定义对象的类圆形,然后使用new操作符来批量构造新的对象

//创建一个对象
function User(username, password){
  this.username = username;
  this.password = password;
  this.getUsername = function(){
    return this.username;
  }
  this.getPassword = function(){
    return this.password;
  }
}
var arthinking = new User("Jason", "123");
alert(arthinking.getUsername());
alert(arthinking.getPassword());

③ 使用JSON构造对象
JSON即Javascript对象表示方法(Javascript Object Notation),也就是通过字面量来表示一个对象:

//JSON形式创建一个对象
var arthinking = {
  username : "Jason",
  password : "123",
  favorite : {
    sports : "football",
    music : "Guitar"
  }
}
alert(arthinking.username);
alert(arthinking.favorite.sports);

解析由服务器返回的JSON格式数据
单个JSON对象:

[{a:'1',b'2'},{a:'3',b'4'}]

多个JSON对象:

{
"usergroups":[{a:'001',b:'arthinking'},a:'002',b:'Jason'}],
"groups":[{c:'001',d:'IT宅'}]
}

可以根据这种格式先从后台封装好需要传递的数据,前台获取到后可以这样解析获取数据:

//假设response.responseText为返回的JSON字符串
//可以使用eval()函数把JSON字符串转换成Javascript语句
//再通过”.”导航获取具体属性,length属性为对象的长度
var obj = eval( "(" + response.responseText + ")" );
for(var i = 0; i<obj.usergroups.length; i++){
  var groupid = obj.usergroups[i].a;
  var usergroup=obj.groups;
  for(var j=0; j<usergroup.length; j++){
    if(usergroup[j].c == groupid){
      alert(groupid);
 }
  }
}

相关文章

  • JavaScript的Polymer框架中dom-repeat与VM的相关操作

    JavaScript的Polymer框架中dom-repeat与VM的相关操作

    这篇文章主要介绍了JavaScript的Polymer框架中dom-repeat与VM的相关操作,Polymer是由Ggoogle开发的Web UI相关框架,需要的朋友可以参考下
    2015-07-07
  • JavaScript版的TwoQueues缓存模型

    JavaScript版的TwoQueues缓存模型

    这篇文章主要介绍了JavaScript实现TwoQueues缓存模型,需要的朋友可以参考下
    2014-12-12
  • JavaScript基础知识学习笔记

    JavaScript基础知识学习笔记

    本文是初学javascript的时候记的学习笔记,简单介绍了javascript的定义及用法,并附上示例,适合初学者们,老鸟请出门左转。
    2014-12-12
  • js 操作符汇总

    js 操作符汇总

    本文并没有详细的介绍js所有的操作符,只是就js在操作符上与其它常用语言不一样的独特之处列举一二,了解了这些,至少不会让我们在读一些开源框架js代码时一头雾水,并且可以让我们的js代码更简洁、更安全(少出bug)。
    2014-11-11
  • 深入学习JavaScript中的Rest参数和参数默认值

    深入学习JavaScript中的Rest参数和参数默认值

    这篇文章主要介绍了深入学习JavaScript中的Rest参数和参数默认值,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-07-07
  • 使用 stylelint检查CSS_StyleLint

    使用 stylelint检查CSS_StyleLint

    你需要一个防止错误产生的机器,可以理解CSS并且理解你:你的意图、喜好、主意以及弱点。 只要是它可以阻止的错误它都会持续阻止。同时,你和你的同事可以一直改善机器,扩展它的功能并且削弱其局限性。
    2016-04-04
  • 在JavaScript中处理字符串之fontcolor()方法的使用

    在JavaScript中处理字符串之fontcolor()方法的使用

    这篇文章主要介绍了在JavaScript中处理字符串之fontcolor()方法的使用,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06
  • 简单了解JavaScript作用域

    简单了解JavaScript作用域

    这篇文章主要介绍了JavaScript作用域的相关资料,文中讲解非常细致,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07
  • js控制CSS样式属性语法对照表

    js控制CSS样式属性语法对照表

    CSS与JS紧密配合,为我们的页面增添了很多别致的效果,为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性
    2012-12-12
  • 浅谈JavaScript Date日期和时间对象

    浅谈JavaScript Date日期和时间对象

    这篇文章主要介绍了JavaScript Date日期和时间对象的相关资料,需要的朋友可以参考下
    2014-12-12

最新评论