JavaScript数组添加JSON数据的方法及数组与JSON的区别详解

作者:小括号

时间:2026-10-30

浏览:336

本文详细介绍在JavaScript中将JSON数据添加到数组的两种常用方式,并深入解析数组与JSON对象、JSON字符串的区别。重点说明后端返回的JSON字符串需通过eval函数转换为对象才能正确使用,同时涵盖一维、二维数组及JSON对象的定义与访问方法。

文章目录

JSON基础概念

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,它是JavaScript的原生数据格式。

JS数组添加JSON数据的方法

接下来介绍在JavaScript数组中添加JSON数据的两种常见方式。

第一种添加方式如下所示:


personInfo
: [],
for(var i = 0; i < _STAGE.passengerInfoArray.length; i++){
var name = _STAGE.passengerInfoArray[i];
var person = {v:name, text:name};
this.personInfo.push(person);
}

第二种添加方式如下所示:


var passengerInfo = {};
passengerInfo.psgTypeDesc = psgTypeDesc;
passengerInfo.flightPrice = flightPrice;
_STAGE.passengerInfoArray.push(passengerInfo);

数组与JSON的区别

下面分析JavaScript数组与JSON之间的主要区别。

数组定义与访问

一、数组的基础概念

1. 定义一维数组:var s1=new Array();

可以通过赋值方式定义,如s1=[1,2,3,4]或者s1[0]=1,s1[1]=2,s1[3]=3,s1[4]=4; 访问第一个元素使用 alert(s1[0]);

上述代码执行结果为1;

2. 定义二维数组:var s1=new Array();

例如定义 var s1=[[3,1],[2,3,4],3,[4,5,6,7,8]]; 访问特定元素使用 alert(s1[1][0]);

上述代码执行结果为2;

JSON对象与字符串解析

二、JSON对象的定义与使用

1. JSON对象示例


 var status_process = {
       " name5" : '闲置期',
     "name1" : '播种期',
     "name2" : '苗期',
     "name3" : '生长期',
     "name4" : '采收期'
    }    
   alert(status_process);

直接输出JSON对象的结果为:Object:Object;

2. JSON字符串

所谓JSON字符串,是指该字符串变量的值与JSON的格式相同,但它并不是一个JSON对象,例如:


       var s1="{";
       var s2 = " 'name5' : '闲置期',  'name1' : '播种期','name2' : '苗期','name3' : '生长期','name4' : '采收期'";
       var s3="}";
       var status_process=s1+s2 +s3;

虽然status_process的值符合JSON对象的格式,但它本质上只是一个字符串(由代码拼凑而成);

将字符串转换为JSON对象可以使用eval函数,写法为 eval("(" + status_process+ ")");

结论:从后台传入到前台的通常是JSON字符串,而非真正的JSON对象,因此需要使用eval函数进行转换。

3. JSON对象的使用示例


var status_process = {
      name5 : '闲置期',
     name1 : '播种期',
     name2 : '苗期',
      name3 : '生长期',
      name4 : '采收期'
     };
     alert(status_process["name5"]);
     alert(status_process.name5);

访问特定键值,两个输出均为:闲置期

4. JSON二维对象示例


var status_process = {
 name5 : {name3:'空闲闲置期'},
 name1 : '播种期',
 name2 : '苗期',
 name3 : '生长期',
 name4 : '采收期'
};
alert(status_process["name5"]["name3"]);
alert(status_process.name5.name3);

访问嵌套对象,结果都为:'空闲闲置期'

实用工具推荐

电子包浆

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

使用 ›
图片压缩

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

使用 ›
相关文章