How each browser handles extra commas when defining an object or array literal in js (json)_javascript skills

1. The js engine performs syntax analysis when the code is loaded. If the js written is not standardized, the syntax analysis will fail. The error at this time is called a syntax error
2. The syntax analysis is passed, and the js engine will execute the code. Errors that occur during execution are called runtime errors

Different engines handle these two errors differently. As follows:

Copy code The code is as follows:

var p = {name: "Jack", age:33,};//Note that there is a comma after 33
p.toString = function() {return "Name: " this.name ", Age: " this.age};
console.log( p);
alert(p);//Name: Jack, age 33

Tested under firefox, the engine will ignore the comma after 33, which can pass the grammar check and execute No error will be reported during the test period
When tested under IE6/7, an error will be reported during the syntax analysis period, and of course it will not enter the execution period.
However, this problem has been fixed under IE8 and no error will be reported. Other browsers will not report an error.

To summarize: This error is difficult to find. It is often caused by accidentally adding a comma, or defining an object or array with many attributes and then deleting some of them accidentally leaving redundant ones. of commas.

Copy code The code is as follows:

//Irregular writing
var p = {name:"Jack",age:33,};
var ary = ["one","two","three",];
//Standard writing
var p = {name :"Jack",age:33};
var ary = ["one","two","three"];

In addition, you may also encounter it when defining an array literal This problem is like there is an extra comma at the end of the array

Copy the code The code is as follows:

var ary = [1,2,];
console.log(ary.length);

IE6/7/8 output length is 3, IE9 and other browsers are 2. ECMAScript 5 11.1.4 contains a paragraph stating that the final comma should be ignored. But the specification wasn't implemented until IE9. Other browsers are fine.

ECMAScript 5 11.1.4 wrote:

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.

Someone once took advantage of this feature of the array to create the so-called "World's Shortest IE Judgment"

Copy code The code is as follows:

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

But it was terminated under IE9. Don't use this bug to judge the browser.

JSON

In JSON format, the comma is the separator between multiple attribute key-value pairs, for example:

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

But when programming, it’s easy to add superfluous information. A comma is also added after the last key-value pair :

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

In this case, IE6 and 7 will report an error, but IE8 and other browsers will have no problem.

Array

In an array, a comma is the separator between elements, for example:

var arr = [1, 2, 3];

Similarly, we may accidentally add a comma after the last element :

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

Intuitively, this should be incorrect syntax. But in fact, all browsers are compatible with this situation, including IE6. Consider this sample code:

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

On browsers other than IE, 1, 2, and 3 are output in sequence; but on IE browser, 1, 2, 3, and undefined are output in sequence. Obviously, IE adds an undefined element after the extra comma.

Consider another case where the extra comma is not at the end, but in the middle:

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

All browsers output 1, 2, undefined, 3. It can be seen that the processing method is the same, that is, inserts an undefined element before the extra comma.