JavaScript中JSON对象的基本操作与解析示例

作者:代码拾荒

时间:2026-10-30

浏览:518

本文介绍JavaScript中JSON对象的基本概念与操作。涵盖通过键值对定义属性、全局对象与变量的关系,以及三种对象声明方式:构造函数、类定义和JSON字面量。重点讲解如何解析服务器返回的JSON格式数据,包括单个对象和多个对象的解析方法,利用eval函数转换字符串并遍历获取属性值。

文章目录

JSON对象概述

JSON对象

对象属性与全局变量

对象的属性由键值对组成,其中key为字符串,value可以是任意JavaScript对象。


//使用[]设置和获取对象的属性
var obj = new Object();
obj["www.jb51.net"] = "https://www.jb51.net";
alert(obj["www.jb51.net"]);

在JavaScript引擎初始化时,会构建一个全局对象,所有变量均为该全局对象的属性。为引用此全局对象,可在顶级作用域中通过以下方式获取:


var global = this;

在JavaScript中,任何独立的函数或变量均属于该全局对象的属性,即:


function test(){}

相当于:


window.test = function(){}

对象的声明方式

使用对象:

声明对象的三种方式: ① 通过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格式数据 单个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);
 }
  }
}

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章