js定义对象或数组直接量时各浏览器对多余逗号的处理(json)


Posted in Javascript onMarch 05, 2011

1、js引擎在代码载入时进行语法分析,如果js写的不规范则语法分析通不过。这时候的错误称为语法错误
2、语法分析通过了,js引擎会执行代码。执行期间发生的错误称为运行错误

不同引擎处理这2种错误的提示不太一样。如下:

var p = {name:"Jack",age:33,};//注意33后有个逗号 
p.toString = function() {return "姓名:" +this.name + ",年龄:" + this.age}; 
console.log(p); 
alert(p);//姓名:Jack,年龄33<br>

firefox下测试,引擎会忽略33后的逗号,可以通过语法检查,在执行期也不会报错
IE6/7下测试,语法分析期就报错了,当然也不会进入执行期了。
不过在IE8下已经修复此问题,不会报错了。其它浏览器也不会报错。

总结下:此错误很难发现,经常是不小心就加了个逗号,或者定义了一个很多属性的对象或数组后来又要删除其中的某些而不小心留下了多余的逗号。

//不规范的写法 
var p = {name:"Jack",age:33,}; 
var ary = ["one","two","three",]; 
//规范的写法 
var p = {name:"Jack",age:33}; 
var ary = ["one","two","three"];

此外,定义数组直接量时也可能碰到这个问题,如数组最后多了个逗号
var ary = [1,2,]; 
console.log(ary.length);

IE6/7/8 输出length为3,IE9及其它浏览器为2。ECMAScript 5 11.1.4 其中有段说明了应该忽略最后的逗号。但直到IE9才实现该规范。其它浏览器则没问题。

ECMAScript 5 11.1.4 写道:

Array elements may be elided at the beginning, middle or end of the element list. Whenever a comma in the element list is not preceded by an AssignmentExpression (i.e., a comma at the beginning or after another comma), the missing array element contributes to the length of the Array and increases the index of subsequent elements. Elided array elements are not defined. If an element is elided at the end of an array, that element does not contribute to the length of the Array.

有人曾经利用了数组的这个特性创造出了所谓《全世界最短的IE判断》

var ie = !-[1,]; 
alert(ie);

但在IE9下被终止了。不要利用这个Bug去判断浏览器。

JSON

在JSON格式中,逗号是多个属性键值对间的分隔符,例如:

var json = { id: 1, name: 'heero' };

但在编程的时候,很容易会画蛇添足,在最后一对键值对后也加上了逗号

var json = { id: 1, name: 'heero', };

在这种情况下,IE6、7会报错,但IE8以及其他浏览器则没有问题。

数组

在数组中,逗号是元素间的分隔符,例如:

var arr = [1, 2, 3];

同样地,我们也有可能不小心在最后一个元素后加了逗号

var arr = [1, 2, 3,];

凭直觉来说,这应该是错误的语法。但实际上,所有浏览器都对这种情况实现了兼容,包括IE6。考虑这样一段示例代码:

var arr = [1, 2, 3,];
for (var i = 0; i < arr.length; i++) { alert(arr[i]); }

在IE以外的浏览器上,均依次输出1、2、3;但在IE浏览器上,却是依次输出1、2、3、undefined。明显地,IE在那个多余的逗号后加了一个undefined元素

再考虑另一种情况,多余的逗号不在末尾,而是在中间:

var arr = [1, 2,, 3,];
for (var i = 0; i < arr.length; i++) { alert(arr[i]); }

所有浏览器均输出1、2、undefined、3,可见处理方式是一样的,就是在多余的逗号前插入一个undefined元素

Javascript 相关文章推荐
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
Aug 13 Javascript
页面加载完毕后滚动条自动滚动一定位置
Feb 20 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
Mar 16 Javascript
Angular ng-repeat指令实例以及扩展部分
Dec 26 Javascript
JS高仿抛物线加入购物车特效实现代码
Feb 20 Javascript
JavaScript实现二维坐标点排序效果
Jul 18 Javascript
JS中Swiper的使用和轮播图效果
Aug 11 Javascript
Express结合Webpack的全栈自动刷新
May 23 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 Javascript
js实现圆形菜单选择器
Dec 03 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
vue实现列表垂直无缝滚动
Apr 08 Vue.js
判断用户是否在线的代码
Mar 05 #Javascript
判断用户的在线状态 onbeforeunload事件
Mar 05 #Javascript
在多个页面使用同一个HTML片段《续》
Mar 04 #Javascript
在多个页面使用同一个HTML片段的代码
Mar 04 #Javascript
如何确保JavaScript的执行顺序 之实战篇
Mar 03 #Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
Mar 03 #Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
Mar 03 #Javascript
You might like
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
JavaScript 动态添加表格行 使用模板、标记
2009/10/24 Javascript
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
浅析jquery某一元素重复绑定的问题
2014/01/03 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
Bootstrap3.0学习教程之JS折叠插件
2016/05/27 Javascript
利用css+原生js制作简单的钟表
2020/04/07 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
浅谈Vue中render中的h箭头函数
2019/11/07 Javascript
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
一些Python中的二维数组的操作方法
2015/05/02 Python
Fiddler如何抓取手机APP数据包
2016/01/22 Python
Python代码解决RenderView窗口not found问题
2016/08/28 Python
python实现八大排序算法(2)
2017/09/14 Python
Flask模板引擎之Jinja2语法介绍
2019/06/26 Python
python 解决cv2绘制中文乱码问题
2019/12/23 Python
美津浓巴西官方网站:Mizuno巴西
2019/07/24 全球购物
Java程序员面试题
2016/09/27 面试题
Exception类的常用方法
2012/06/16 面试题
大学生求职推荐信
2013/11/27 职场文书
大众服装店创业计划书范文
2014/01/01 职场文书
安全环保标语
2014/06/09 职场文书
工作年限证明模板
2014/11/01 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
以权谋私检举信范文
2015/03/02 职场文书
2016年学校综治宣传月活动总结
2016/03/16 职场文书
2020年元旦祝福语录,总有适合你的
2019/12/31 职场文书
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python