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


Posted in Javascript onMay 21, 2016

JSON对象

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

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

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 相关文章推荐
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
JavaScript 计算图片加载数量的代码
Jan 01 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
Apr 15 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
Oct 10 Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 Javascript
使用原生js封装的ajax实例(兼容jsonp)
Oct 12 Javascript
VUE实现可随意拖动的弹窗组件
Sep 25 Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 Javascript
vue中渲染对象中属性时显示未定义的解决
Jul 31 Javascript
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 #Javascript
jQuery EasyUI Pagination实现分页的常用方法
May 21 #Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 #Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 #Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
May 20 #Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 #Javascript
如何用JavaScript实现动态修改CSS样式表
May 20 #Javascript
You might like
关于访问控制的一首PHP面试题(对属性或方法的访问控制)
2012/09/13 PHP
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
基于PHP实现简单的随机抽奖小程序
2016/01/05 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
PHP根据key删除数组中指定的元素
2019/02/28 PHP
转一个日期输入控件,支持FF
2007/04/27 Javascript
JS与框架页的操作代码
2010/01/17 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
2015/03/24 Javascript
jquery简单实现图片切换效果的方法
2015/05/12 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
微信小程序位置授权处理方法
2019/06/13 Javascript
小程序Request的另类用法详解
2019/08/09 Javascript
vue transition 在子组件中失效的解决
2019/11/12 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
python将图片文件转换成base64编码的方法
2015/03/14 Python
python中模块查找的原理与方法详解
2017/08/11 Python
python中数据库like模糊查询方式
2020/03/02 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
学习十八大报告感言
2014/02/04 职场文书
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
小学英语课后反思
2014/04/26 职场文书
厨房管理计划书
2014/04/27 职场文书
党员先进事迹材料
2014/12/19 职场文书
通用员工手册范本
2015/05/14 职场文书
护理心得体会范文
2016/01/22 职场文书
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis
Java Redisson多策略注解限流
2022/09/23 Java/Android