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 相关文章推荐
jquery1.83 之前所有与异步列队相关的模块详细介绍
Nov 13 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 Javascript
jQuery异步获取json数据方法汇总
Dec 22 Javascript
DOM 事件流详解
Jan 20 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
Jan 05 Javascript
javascript中对Date类型的常用操作小结
May 19 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
Jun 01 Javascript
Vue-component全局注册实例
Sep 06 Javascript
Vue vm.$attrs使用场景详解
Mar 08 Javascript
Node.js实现断点续传
Jun 23 Javascript
判断用户是否在线的代码
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+DBM的同学录程序(1)
2006/10/09 PHP
dedecms防止FCK乱格式化你的代码的修改方法
2007/03/17 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
php数字运算验证码的实现代码
2015/07/30 PHP
如何动态的导入js文件具体该怎么实现
2014/01/14 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
jQuery中slideUp()方法用法分析
2014/12/24 Javascript
封装好的一个万能检测表单的方法
2015/01/21 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
2016/06/22 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
2016/11/05 Javascript
详解jQuery事件
2017/01/13 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
2018/10/09 Javascript
JS实现简单的点赞与踩功能示例
2018/12/05 Javascript
vue集成chart.js的实现方法
2019/08/20 Javascript
layui表格内容溢出的解决方法
2019/09/06 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
如何在postman中添加cookie信息步骤解析
2020/06/30 Javascript
[02:27]2014DOTA2国际邀请赛 VG赛后采访:更大的挑战在等着我们
2014/07/13 DOTA
[38:32]完美世界DOTA2联赛循环赛 Forest vs DM 第二场 11.06
2020/11/06 DOTA
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
python使用magic模块进行文件类型识别方法
2018/12/08 Python
Pytorch 神经网络—自定义数据集上实现教程
2020/01/07 Python
解决Python中报错TypeError: must be str, not bytes问题
2020/04/07 Python
tensorflow模型转ncnn的操作方式
2020/05/25 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
教育课题研究自我鉴定范文
2013/12/28 职场文书
教师简历自我评价
2014/02/03 职场文书
教师节宣传方案
2014/05/23 职场文书
python_tkinter弹出对话框创建
2022/03/20 Python