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判断样式className同时增加class或删除class
Jan 30 Javascript
JS中产生标识符方式的演变
Jun 12 Javascript
JS控制表单提交的方法
Jul 09 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
Oct 12 Javascript
js实现的下拉框二级联动效果
Apr 30 Javascript
设置jQueryUI DatePicker默认语言为中文
Jun 04 Javascript
Javascript操作dom对象之select全面解析
Apr 24 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
Jul 18 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 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 多进程 解决难题
2009/06/22 PHP
PHP调试函数和日志记录函数分享
2015/01/31 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
IE下js调试工具Companion.JS
2010/10/15 Javascript
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
2013/10/28 Javascript
js设置控件的隐藏与显示的两种方法
2014/08/21 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
BootStrap无限级分类(无限极分类封装版)
2016/08/26 Javascript
React组件的三种写法总结
2017/01/12 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
2018/08/24 jQuery
解决小程序无法触发SESSION问题
2020/02/03 Javascript
python批量替换文件名中的共同字符实例
2020/03/05 Python
Pytorch高阶OP操作where,gather原理
2020/04/30 Python
世界上最好的威士忌和烈性酒购买网站:The Whisky Exchange
2016/11/20 全球购物
请解释流与文件有什么不同
2016/07/29 面试题
造价工程师个人求职信
2013/09/21 职场文书
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
采购求职信
2014/03/17 职场文书
小班下学期评语
2014/05/04 职场文书
植树造林的宣传标语
2014/06/23 职场文书
三八活动策划方案
2014/08/17 职场文书
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
2014年高数考试作弊检讨书
2014/12/14 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
革命电影观后感
2015/06/18 职场文书
谢师宴学生致辞
2015/07/27 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
用人单位的规章制度,怎样制定才是有效的?
2019/07/09 职场文书
redis数据结构之压缩列表
2022/03/21 Redis
vue+echarts实现多条折线图
2022/03/21 Vue.js
springboot用户数据修改的详细实现
2022/04/06 Java/Android
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL