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验证日期的格式YYYY-mm-dd 具体实现
Jun 29 Javascript
Jquery chosen动态设置值实例介绍
Aug 08 Javascript
js性能优化技巧
Nov 29 Javascript
详解Node.js模块间共享数据库连接的方法
May 24 Javascript
实现React单页应用的方法详解
Aug 02 Javascript
原生js实现可拖动的登录框效果
Jan 21 Javascript
微信小程序五星评分效果实现代码
Apr 06 Javascript
node.js学习之事件模块Events的使用示例
Sep 28 Javascript
详解vue添加删除元素的方法
Jun 30 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
Sep 28 Javascript
vue excel上传预览和table内容下载到excel文件中
Dec 10 Javascript
js轮播图之旋转木马效果
Oct 13 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
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
模仿OSO的论坛(五)
2006/10/09 PHP
jQuery 解析xml文件
2009/08/09 Javascript
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
点击页面任何位置隐藏div的实现方法
2016/09/05 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
2017/06/15 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
代码详解Vuejs响应式原理
2017/12/20 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
Express本地测试HTTPS的示例代码
2018/06/06 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
js实现跳一跳小游戏
2020/07/31 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
浅谈flask源码之请求过程
2018/07/26 Python
Python字典的核心底层原理讲解
2019/01/24 Python
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
在自动化中用python实现键盘操作的方法详解
2019/07/19 Python
使用Pandas将inf, nan转化成特定的值
2019/12/19 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
Python如何实现的二分查找算法
2020/05/27 Python
详解Pytorch显存动态分配规律探索
2020/11/17 Python
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
人力资源作业细则
2014/03/03 职场文书
行政内勤岗位职责
2014/04/07 职场文书
《东方明珠》教学反思
2014/04/20 职场文书
单位考核鉴定意见
2015/06/05 职场文书
CSS3实现的文字弹出特效
2021/04/16 HTML / CSS
入门学习Go的基本语法
2021/07/07 Golang
Pandas实现DataFrame的简单运算、统计与排序
2022/03/31 Python
Python 全局空间和局部空间
2022/04/06 Python