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 相关文章推荐
ExtJS 入门
Oct 29 Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
Mar 03 Javascript
jQuery动态星级评分效果实现方法
Aug 06 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 Javascript
微信小程序 获取相册照片实例详解
Nov 16 Javascript
jQuery 如何实现一个滑动按钮开关
Dec 01 Javascript
基于dataset的使用和图片延时加载的实现方法
Dec 11 Javascript
javascript+css实现俄罗斯方块小游戏
Jun 28 Javascript
详解Vue.js 响应接口
Jul 04 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 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绘制圆形的方法
2015/01/24 PHP
PHP中CheckBox多选框上传失败的代码写法
2017/02/13 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
PHP实现执行外部程序的方法详解
2017/08/17 PHP
根据一段代码浅谈Javascript闭包
2010/12/14 Javascript
在jquery中处理带有命名空间的XML数据
2011/06/13 Javascript
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
JavaScript调用ajax获取文本文件内容实现代码
2014/03/28 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
js库Modernizr的介绍和使用
2015/05/07 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
2015/06/18 Javascript
设置jquery UI 控件的大小方法
2016/12/12 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
js用类封装pop弹窗组件
2017/10/08 Javascript
angular1配合gulp和bower的使用教程
2018/01/19 Javascript
Vue可自定义tab组件用法实例
2019/10/24 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
2020/09/16 Javascript
[00:32]2018DOTA2亚洲邀请赛iG出场
2018/04/03 DOTA
python网络编程实例简析
2014/09/26 Python
python关闭windows进程的方法
2015/04/18 Python
python实现人工智能Ai抠图功能
2019/09/05 Python
python批量处理txt文件的实例代码
2020/01/13 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
Python实现随机爬山算法
2021/01/29 Python
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
英国轻奢珠宝品牌:Astley Clarke
2016/12/18 全球购物
设计部经理的岗位职责
2013/11/16 职场文书
财务工作个人求职的自我评价
2013/12/19 职场文书
幼儿园中秋节活动方案
2014/02/06 职场文书
培训班开班仪式主持词
2014/03/28 职场文书
领导班子整改方案
2014/10/25 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android