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 相关文章推荐
jQuery实现下拉框左右选择的简单实例
Feb 22 Javascript
javascript实现复制与粘贴操作实例
Oct 16 Javascript
JavaScript函数作用域链分析
Feb 13 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
AspNet中使用JQuery boxy插件的确认框
May 20 Javascript
JS模拟并美化的表单控件完整实例
Aug 19 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
详解如何在微信小程序中愉快地使用sass
Jul 30 Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
Mar 07 Javascript
如何优雅地在Node应用中进行错误异常处理
Nov 25 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 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
生成静态页面的PHP类
2006/11/25 PHP
PHP一些有意思的小区别
2006/12/06 PHP
简单示例AJAX结合PHP代码实现登录效果代码
2008/07/25 PHP
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
Js+XML 操作
2006/09/20 Javascript
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
js写的评论分页(还不错)
2013/12/23 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
jQuery基本选择器之标签名选择器
2016/09/03 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
2017/06/14 Javascript
js图片放大镜实例讲解(必看篇)
2017/07/17 Javascript
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
Django实现学员管理系统
2019/02/26 Python
python实现AES加密与解密
2019/03/28 Python
numpy中的meshgrid函数的使用
2019/07/31 Python
安装完Python包然后找不到模块的解决步骤
2020/02/13 Python
python读取excel进行遍历/xlrd模块操作
2020/07/12 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
详解基于canvas的视频遮罩插件
2018/01/04 HTML / CSS
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
请假条标准格式规范
2014/04/10 职场文书
三好生演讲稿
2014/09/12 职场文书
Python绘制分类图的方法
2021/04/20 Python
python可视化之颜色映射详解
2021/09/15 Python