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 相关文章推荐
一个刚完成的layout(拖动流畅,不受iframe影响)
Aug 17 Javascript
javascript:history.go()和History.back()的区别及应用
Nov 25 Javascript
jquery实现的缩略图预览滑块实例
Jun 25 Javascript
javascript js 操作数组 增删改查的简单实现
Jun 20 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
Jul 20 Javascript
js格式化时间的简单实例
Nov 27 Javascript
Vue中添加过渡效果的方法
Mar 16 Javascript
js实现加载页面就自动触发超链接的示例
Aug 31 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
Vue如何获取数据列表展示
Dec 11 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 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生成局部唯一识别码LUID的代码
2012/10/06 PHP
php实现文件下载功能的几个代码分享
2014/05/10 PHP
php使用iconv中文截断问题的解决方法
2015/02/11 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
PHP实现文件上传下载实例
2016/10/18 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
javascript支持firefox,ie7页面布局拖拽效果代码
2007/12/20 Javascript
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
js限制文本框的输入内容代码分享(3类)
2015/08/20 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
2017/01/12 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
关于Vue组件库开发详析
2018/07/01 Javascript
微信小程序动态增加按钮组件
2018/09/14 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
一次微信小程序内地图的使用实战记录
2019/09/09 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
Python3之文件读写操作的实例讲解
2018/01/23 Python
Python实现string字符串连接的方法总结【8种方式】
2018/07/06 Python
matplotlib jupyter notebook 图像可视化 plt show操作
2020/04/24 Python
Python模拟伯努利试验和二项分布代码实例
2020/05/27 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
python能开发游戏吗
2020/06/11 Python
keras的ImageDataGenerator和flow()的用法说明
2020/07/03 Python
程序设计HTML5 Canvas API
2013/04/08 HTML / CSS
Dr. Martens马汀博士澳大利亚官网:马丁靴鼻祖
2019/07/02 全球购物
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
工程力学专业毕业生求职信
2013/10/06 职场文书
2014年纠风工作总结
2014/12/08 职场文书
班主任经验交流材料
2014/12/16 职场文书
邀请函的格式
2015/01/30 职场文书
MySQL笔记 —SQL运算符
2022/01/18 MySQL