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 相关文章推荐
纯Javascript实现Windows 8 Metro风格实现
Oct 15 Javascript
javascript判断chrome浏览器的方法
Mar 26 Javascript
js防止页面被iframe调用的方法
Oct 30 Javascript
跟我学习javascript的prototype原型和原型链
Nov 18 Javascript
Bootstrap每天必学之级联下拉菜单
Mar 27 Javascript
angularjs 表单密码验证自定义指令实现代码
Oct 27 Javascript
js编写三级联动简单案例
Dec 21 Javascript
requirejs + vue 项目搭建详解
Jun 16 Javascript
微信小程序之电影影评小程序制作代码
Aug 03 Javascript
js中split()方法得到的数组长度问题
Jul 19 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
js异步接口并发数量控制的方法示例
Nov 22 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创建多级目录代码
2008/06/05 PHP
PHP数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
详解js中==与===的区别
2017/01/08 Javascript
vue.js组件之间传递数据的方法
2017/07/10 Javascript
使用Node.js实现ORM的一种思路详解(图文)
2017/10/24 Javascript
详解Vuex管理登录状态
2017/11/13 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
使用webpack搭建vue项目及注意事项
2019/06/10 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
2019/09/06 Javascript
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
Python中的map()函数和reduce()函数的用法
2015/04/27 Python
Python+Selenium自动化实现分页(pagination)处理
2017/03/31 Python
python使用magic模块进行文件类型识别方法
2018/12/08 Python
利用python实现汉字转拼音的2种方法
2019/08/12 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
详解Python 循环嵌套
2020/07/09 Python
英国探险旅游专家:Explore
2018/12/20 全球购物
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
linux面试题参考答案(6)
2014/08/29 面试题
个人简历自我评价八例
2013/10/31 职场文书
消防安全管理制度
2014/02/01 职场文书
环保口号大全
2014/06/12 职场文书
低碳日宣传活动总结
2014/07/09 职场文书
消防志愿者活动方案
2014/08/23 职场文书
校运会通讯稿
2015/07/18 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书
python opencv通过4坐标剪裁图片
2021/06/05 Python