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将数据库中的TEXT类型数据动态赋值到TEXTAREA中
Apr 20 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
Jan 15 Javascript
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
Aug 11 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
Aug 15 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 Javascript
原生JS实现列表子元素顺序反转的方法分析
Jul 02 Javascript
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
js实现黑白div块画空心的图形
Dec 13 Javascript
Vue实战教程之仿肯德基宅急送App
Jul 19 Javascript
Node.js文本文件BOM头的去除方法
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
截获网站title标签之家内容的例子
2006/10/09 PHP
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
php实现的遍历文件夹下所有文件,编辑删除
2010/01/05 PHP
php中函数的形参与实参的问题说明
2010/09/01 PHP
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
Underscore.js 的模板功能介绍与应用
2012/12/24 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
js全屏显示显示代码的三种方法
2013/11/11 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
2015/04/06 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
2017/02/08 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
javascript数组去重常用方法实例分析
2017/04/11 Javascript
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
react native与webview通信的示例代码
2017/09/25 Javascript
vue+node+webpack环境搭建教程
2017/11/05 Javascript
实现div内部滚动条滚动到底部和顶部的代码
2017/11/15 Javascript
JavaScript笛卡尔积超简单实现算法示例
2018/07/30 Javascript
vue 点击其他区域关闭自定义div操作
2020/07/17 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
[59:00]OG vs TNC 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python list转dict示例分享
2014/01/28 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
梅尔频率倒谱系数(mfcc)及Python实现
2019/06/18 Python
Html5无刷新修改browser Url的方法
2014/01/15 HTML / CSS
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
全球最大化妆品零售网站:SkinStore
2020/10/24 全球购物
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
JRE、JDK、JVM之间的关系怎样
2012/05/16 面试题
毕业生如何写自我鉴定
2014/03/15 职场文书
生态养殖创业计划书
2014/05/06 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
学位证书委托书
2014/09/30 职场文书
2015年收银员个人工作总结
2015/04/01 职场文书