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 相关文章推荐
js 返回时间戳所对应的具体时间
Jul 20 Javascript
浏览器缩放检测的js代码
Sep 28 Javascript
js预加载图片方法汇总
Jun 15 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
Jan 21 Javascript
改变checkbox默认选中状态及取值的实现代码
May 26 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
Jan 21 Javascript
jQuery、zepto、js常用小技巧
Feb 12 Javascript
js简易版购物车功能
Jun 17 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 Javascript
在Web关闭页面时发送Ajax请求的实现方法
Mar 07 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 Javascript
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
信用卡效验程序
2006/10/09 PHP
一段php加密解密的代码
2007/07/16 PHP
PHP+ACCESS 文章管理程序代码
2010/06/21 PHP
PHP的Yii框架的常用日志操作总结
2015/12/08 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
Javascript isArray 数组类型检测函数
2009/10/08 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
jQuery实现广告条滚动效果
2017/08/22 jQuery
vue引入js数字小键盘的实现代码
2018/05/14 Javascript
vue修改对象的属性值后页面不重新渲染的实例
2018/08/09 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
js实现无缝滚动双图切换效果
2019/07/09 Javascript
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
js实现QQ邮箱邮件拖拽删除功能
2020/08/27 Javascript
Python中的pass语句使用方法讲解
2015/05/14 Python
对pytorch网络层结构的数组化详解
2018/12/08 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
Python集中化管理平台Ansible介绍与YAML简介
2019/06/12 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
python-tornado的接口用swagger进行包装的实例
2019/08/29 Python
详解python播放音频的三种方法
2019/09/23 Python
pytorch1.0中torch.nn.Conv2d用法详解
2020/01/10 Python
tensorflow的ckpt及pb模型持久化方式及转化详解
2020/02/12 Python
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
周恩来的四个昼夜观后感
2015/06/03 职场文书
人民币符号
2022/02/17 杂记