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前端框架关于重构的失败经验分享
Mar 17 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
Jun 02 Javascript
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
JavaScript显示当前文档最后修改日期的方法
Mar 19 Javascript
直接拿来用的15个jQuery代码片段
Sep 23 Javascript
JavaScript获取中英文混合字符串长度的方法示例
Feb 04 Javascript
jQuery简易时光轴实现方法示例
Mar 13 Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 Javascript
vue项目开发中setTimeout等定时器的管理问题
Sep 13 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 Javascript
JS+Canvas实现五子棋游戏
Aug 26 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
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
php开发过程中关于继承的使用方法分享
2011/06/17 PHP
Laravel 实现Controller向blade前台模板赋值的四种方式小结
2019/10/22 PHP
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
javascript排序函数实现数字排序
2015/06/26 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
js 模仿锚点定位的实现方法
2016/11/19 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
jQuery选择器之基本过滤选择器用法实例分析
2019/02/19 jQuery
如何获取vue单文件自身源码路径
2019/05/06 Javascript
ES6小技巧之代替lodash
2019/06/07 Javascript
layui实现数据分页功能(ajax异步)
2019/07/27 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
javascript实现拖拽碰撞检测
2020/03/12 Javascript
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
[01:48]帕吉至宝加入游戏,遗迹战场现“千劫神屠”
2018/04/07 DOTA
基于Linux系统中python matplotlib画图的中文显示问题的解决方法
2017/06/15 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
如何查看python关键字
2021/01/17 Python
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
自荐信的两点禁忌
2013/10/30 职场文书
物业管理员岗位职责范文
2013/11/25 职场文书
和解协议书
2014/04/16 职场文书
大学生社会实践评语
2014/04/25 职场文书
绿色小区申报材料
2014/08/22 职场文书
车贷收入证明范本
2014/09/14 职场文书
学雷锋日活动总结
2015/02/06 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
中国古风插画师排行榜:夏达第一,第三是阴阳师姑获鸟皮肤创作者
2022/03/18 国漫
PostgreSQL事务回卷实战案例详析
2022/03/25 PostgreSQL