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 相关文章推荐
img的onload的另类用法
Jan 10 Javascript
使用原生js写的一个简单slider
Apr 29 Javascript
JS控制输入框内字符串长度
May 21 Javascript
使用npm发布Node.JS程序包教程
Mar 02 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
jQuery数组处理函数整理
Aug 03 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
jQuery Mobile和HTML5开发App推广注册页
Nov 07 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
Element中Slider滑块的具体使用
Jul 29 Javascript
Vue中keep-alive组件的深入理解
Aug 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
天使彦史上最神还原,性别曝光的那一刻,百万网友恋爱了
2020/03/02 国漫
详解PHP导入导出CSV文件
2014/11/03 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
通过上下左右键和回车键切换光标实现代码
2013/03/08 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
2016/09/18 Javascript
js实现图片放大展示效果
2017/08/30 Javascript
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
微信小程序使用for循环动态渲染页面操作示例
2018/12/25 Javascript
vue使用openlayers实现移动点动画
2020/09/24 Javascript
[01:07:21]NAVI vs VG Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
DJANGO-ALLAUTH社交用户系统的安装配置
2014/11/18 Python
python执行系统命令后获取返回值的几种方式集合
2018/05/12 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
HTML5 Canvas实现放大镜效果示例
2020/03/25 HTML / CSS
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
美国畅销的跑步机品牌:ProForm
2017/02/06 全球购物
马德里竞技官方网上商店:Atletico Madrid Shop
2019/03/31 全球购物
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
英国自行车商店:AW Cycles
2021/02/24 全球购物
贷款担保申请书
2014/05/20 职场文书
建筑横幅标语
2014/10/09 职场文书
2014年幼儿园小班工作总结
2014/12/04 职场文书
孝女彩金观后感
2015/06/10 职场文书
革命电影观后感
2015/06/18 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
学校教代会开幕词
2016/03/04 职场文书
简短的人生哲理(38句)
2019/08/13 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
MySQL系列之五 视图、存储函数、存储过程、触发器
2021/07/02 MySQL