eval();  //此方法不推荐

JSON.parse();  //推荐方法

一、两种方法的区别

我们先初始化一个json格式的对象:

  var jsonDate = '{ "name":"周星驰","age":23 }'

  var jsonObj = eval( '(' + jsonDate + ')' );  // eval();方法

  var jsonObj = JSON.parse( jsonDate );  // JSON.parse(); 方法

然后在控制台调用:

  console.log( jsonObj.name );  // 两种方法都可以正确输入 周星驰

那么问题来了 两种方法有什么区别呢?(下面我们稍微把代码改动一下,蓝色字体为修改部分)

  var jsonDate = '{ "name":alert("hello"),"age":23 }'

  var jsonObj = eval( '(' + jsonDate + ')' );  // eval();方法

  console.log( jsonObj.age );  //会先执行“alert”输出“hello”  然后才输出 23

换“JSON.parse();”方法:

  var jsonDate = '{ "name":alert("hello"),"age":23 }'

  var jsonObj = JSON.parse( jsonDate );  // JSON.parse(); 方法

  cosole.log( jsonobj.age )  // 报错  这个错误告诉我们这个字符串是不合法的

小结:“eval();”方法解析的时候不会去判断字符串是否合法,而且json对象中的js方法也会被执行,这是非常危险的;而“JSON.parse();”方法的优点就不用多说了,推荐此方法。(不明白的盆友可以自己在控制台测试一下)

二、扩展问题

  var jsonDate = '{ "name":"周星驰","age":23 }'

大家可以看到在上面测试时一直用红色把包在花括号外面的引号标注了起来,这对引号是很关键却又是常常被忽略的,因为 “eval();” 和 “JSON.parser();” 这两个方法的参数只接受字符串,也就是说只能解析字符串!!

那我不经会有一个思考,我们在初始化的时候若不加引号对,那么它本身就是对象,js可以直接获取对象本身的属性和方法;为什么还要加引号将它变成字符串之后再用 “eval();” 或者 “JSON.parse();” 解析,这样做不是既不环保又没有效率吗?

原因很简单:前端提供给后台的只能是字符串数据格式,后台返回给前台的就看返回的是什么数据格式,是字符串就必须解析之后再用。

(这个小问题一般大家都会忽略掉,不太关注。我之所以好奇的原因也是因为对后台了解的不够,把这个问题抛出来希望对后台不熟的朋友有所帮助,知道是怎么回事后自然而然会加深记忆,在开发过程中就不会漏掉了)
================================================================
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScript(Standard ECMA-262 3rd Edition - December 1999)的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)。这些特性使JSON成为理想的数据交换语言。 比较标准的写法:
Javascript代码 收藏代码
var json = '{"a":"1", "b":"2"}';
var data = eval('('+ json +')');
alert(data.a);
alert(data['a']); 这样两种方式都可以取到json中的值。 但是当key的值为数字时,只能使用类似数组下表的访问方式取值。
Javascript代码 收藏代码
var json = '{"0":"a", "1":"b", "length":2}';
var data = eval('(' + json + ')');
//alert(data.0); //报错,此方式不可用
alert(data['0']);
alert(data[0]); //注意此写法与数组用下标访问是相同的
alert(data.length) //貌似数组的长度 1.使用json时,通常都使用第一种方式,且key一般应使用合法的变量名(字母或下划线开头的包括字母、下划线和数字的字符串) 2.对象的两种访问方式:data.key和data[’key’]各自有自己的应用场景,一般情况使用data.key即可,也比较直观(它符合其它高级语言中访问对象中属性的方式); 当key为一个变量时,并且使用在循环中,用data['key']这种方式。
Javascript代码 收藏代码
for(var i=0; i < 10; i++) {
s += data['key' + i]; //循环调用,可简化代码
} 3.第三种采用数字做key的方式,虽然不推荐,但也是有其应用价值的; 如当建立一个与数据库中id一一对应的map对象的时候, 可直接用id的数值做key,虽然你可以给它加上一个字母前缀来让它符合合法的变量名的标准, 并让它的数据能通过data.key的方式访问, 但如果数据量非常大的话, 为每个id都加一个前缀,+字符连接运算也是要消耗性能的, 特别是在很少需要采用data.key方式去访问属性的情况下, 那么可以抛弃此调用方式,直接用数字做key也未尝不可, 除了key名称不符合合法变量名的标准之外,似乎并没有其它损失;

Ajax中解析Json的两种方法的更多相关文章

  1. Ajax中解析Json的两种方法详解

    eval();  //此方法不推荐 JSON.parse();  //推荐方法 一.两种方法的区别 我们先初始化一个json格式的对象: var jsonDate = '{ "name&qu ...

  2. 解析JSON的两种方法eval()和JSON.parse()

    解析JSON 一种方法是使用eval函数. var dataObj = eval("("+json+")"); 必须把文本包围在括号中,这样才能避免语法错误,迫 ...

  3. Golang解析json的几种方法

    Golang解析json的几种方法 概要 使用Golang调用其它平台API接口时总会被多层的json串给恶心到,我记录一下自己解析json的几种方法. 一.自带的json包 func JsonUnm ...

  4. php获取数组中重复数据的两种方法

    分享下php获取数组中重复数据的两种方法. 1,利用php提供的函数,array_unique和array_diff_assoc来实现 <?php function FetchRepeatMem ...

  5. [转]Qt中定时器使用的两种方法

    Qt中定时器的使用有两种方法,一种是使用QObject类提供的定时器,还有一种就是使用QTimer类. 其精确度一般依赖于操作系统和硬件,但一般支持20ms.下面将分别介绍两种方法来使用定时器. 方法 ...

  6. python中执行shell的两种方法总结

    这篇文章主要介绍了python中执行shell的两种方法,有两种方法可以在Python中执行SHELL程序,方法一是使用Python的commands包,方法二则是使用subprocess包,这两个包 ...

  7. vue中使用echarts的两种方法

    在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中 ...

  8. C# web api 返回类型设置为json的两种方法

    每次写博客,第一句话都是这样的:程序员很苦逼,除了会写程序,还得会写博客!当然,希望将来的一天,某位老板看到此博客,给你的程序员职工加点薪资吧!因为程序员的世界除了苦逼就是沉默.我眼中的程序员大多都不 ...

  9. C# web api返回类型设置为json的两种方法

    web api写api接口时默认返回的是把你的对象序列化后以XML形式返回,那么怎样才能让其返回为json呢,下面就介绍两种方法: 方法一:(改配置法) 找到Global.asax文件,在Applic ...

随机推荐

  1. IIS7下搭建PHP(FastCgiModule)

    windows2008和windows vista都可以安装IIS7 第一步: 下载软件, php官方网站:www.php.net(下载winfows版本) phpmyadmin官方网站:www.ph ...

  2. Feed流系统设计-总纲

    https://mp.weixin.qq.com/s/ccxM2thPbzg5vDWgGVJ5vQ 作者:少强 简介 差不多十年前,随着功能机的淘汰和智能机的普及,互联网开始进入移动互联网时代,最具代 ...

  3. 记一次环境变量导致的elasticsearch启动错误:max file descriptors [65535] for elasticsearch process is too low, incre

    问题描述,elasticsearch启动时报max file descriptors错误: [hadoop@node-33 elasticsearch-5.4.0]$ bin/elasticsearc ...

  4. <JavaScript>尺寸类样式的获取

    尺寸类样式的获取 offsetHeight HTMLElement.offsetHeight 是一个只读属性,它返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数.(content+ ...

  5. 手把手教你MyEclipseUML建模(上)

    手把手教你MyEclipseUML建模(上) 转 https://blog.csdn.net/qq_37939251/article/details/83444359 1.用UML 1建模 MyEcl ...

  6. MeasureSpec常用方法

    package com.loaderman.customviewdemo; import android.content.Context; import android.util.AttributeS ...

  7. Ubuntu + Apache2 环境下用C编写 一个简单的cgi脚本

    我只学习过c语言,没有学习过prel,网上很多教程都是针对prel的,很少有针对c的.自己在Ubuntu下鼓捣了一下午,也总算是用c成功编写了一个helloworld的cgi,算是cgi入门的第一步. ...

  8. 代理IP爬取和验证(快代理&西刺代理)

    前言 仅仅伪装网页agent是不够的,你还需要一点新东西 今天主要讲解两个比较知名的国内免费IP代理网站:西刺代理&快代理,我们主要的目标是爬取其免费的高匿代理,这些IP有两大特点:免费,不稳 ...

  9. 如何区分进程和线程ps -eLf

    方式 使用ls /proc/pid/task/ 查看线程 使用ps -eLf命令/ps aux -L/ps aux -el 使用pstree 进程和线程 进程是资源分配的最小单位 线程是cpu时间片分 ...

  10. 如何提高程序员的键盘使用效率?——ASE第一次作业

    引言 对于程序员来说,键盘输入是我们工作的基本方式,当你的手指在键盘上飞起来的时候,不但能够提高工作效率,还常常引来旁人羡慕的目光.下面将从不同方面介绍一些提高键盘使用效率的方法. 程序员最主要的文字 ...