Exploration of the length attribute in javascript

Example 1: Copy codeThe Code is as follows: var obj = {0: 'A', 1: 'B '}
Alert (obj. length); // undefined
Var arr = ['A', 'B']
Alert (arr. length); // 2

As shown in the preceding example, The length attribute in an array object is not directly linked to the number of data stored in the object. Both the index attribute () and length attribute exist as common attributes of the object, there is no relationship between them. The js engine does not automatically calculate the length of class array objects based on the number of stored data.
But does the length of the class array object have nothing to do with the stored data volume? This is not the case in Example 2:
Example 2:Copy codeThe Code is as follows: function myarr (){}
Var m = new myarr ();
Array. prototype. push. apply (m, ['cson', 'lai ', 'xiaoc']);
Alert (m. length); // IE8 or lower: undefined other browsers: 3
Alert (m [2]); // IE8 or lower: undefined other browsers: 'xiaoc'

As shown in example 2, except for versions earlier than IE8, The length attribute of an object is also calculated when elements are forcibly added to an array-like object by using the array method. However, IE8 or earlier versions do not support adding elements to the class array objects by force using the array method.
Example 3:
In this example, an initialization operation is added to the myarr constructor in example 2, and an element is added during class array object initialization. This is a strange thing:Copy codeThe Code is as follows: function myarr () {this [0] = 'cc ';}
Var m = new myarr ();
Array. prototype. push. apply (m, ['cson', 'lai ', 'xiaoc']);
Alert (m. length); // ie8 or lower: undefined other: 3
Alert (m [2]); // ie8 or lower: undefined other: xiaoc

Browsers earlier than ie8 do not seem to support forced use of the array method, which will be discussed in the next example. For other browsers, The length attribute is output to 3, while the index to 2 is 'xiaoc ', obviously, the js engine completely ignores the 'cc' element whose original index of the class array object is 0 '! Now let's look at the next example. This example adds an initialization of the length attribute on the basis of Example 3:Copy codeThe Code is as follows: function myarr () {this [0] = 'cc'; this. length = 1;} // Add an extra length for initialization.
Var m = new myarr ();
Array. prototype. push. apply (m, ['cson', 'lai ', 'xiaoc']);
Alert (m. length); // output 4
Alert (m [2]); // output 'ler'

Strange things happen again. This time, all browsers (including ie6 7) correctly output 4, and the elements indexed to 2 are correctly output to 'les ', it can be seen that the array method can be used normally after the length attribute is initialized in IE 6 7.
Now try to initialize the length attribute to an invalid type:
Example 4:Copy codeThe Code is as follows: function myarr () {this [0] = 'cc'; this. length = "bo";} // length is set to an invalid type that cannot be converted to number.
Var m = new myarr ();
Array. prototype. push. apply (m, ['cson', 'lai ', 'xiaoc']);
Alert (m. length); // output 3
Alert (m [2]); // output 'xiaoc'

Copy codeThe Code is as follows: function myarr () {this [0] = 'cc'; this. length = "1";} // length is set to an invalid type that can be converted to a number
Array. prototype. push. apply (m, ['cson', 'lai ', 'xiaoc']);
Alert (m. length); // output 4
Alert (m [2]); // output 'ler'

From all the examples above, we can make an inference that when using the array method (Here we use push as an example), it is probably like this process:
IE6 7:
It can be seen that IE6 7 does not forcibly add elements using the array method, but it first checks whether the length attribute exists. If it does not exist, it returns and does not perform any operation. If the length attribute is an invalid value, try to convert it to the number type. If the conversion fails, set the length to 0, this can parse the undefined output in example 2 and 3 and the correct output in Example 4.

Other browsers:
Other browsers perform different operations based on the length attribute. If the length attribute does not exist, set the length to 0. If the length attribute is invalid, try to convert it to the number type, if the conversion fails, the length is also set to 0.

Because the length attribute has such a decisive effect on the array method, the js engine prohibits writing invalid values to the length attribute:Copy codeThe Code is as follows: var arr = ['1', '2', '3'];
Arr. length = 'undefined'; // error invalid array length

From the above example, we can draw a conclusion: When we use class array objects, in order to avoid the weird problem caused by incorrect length calculation, we should initialize the value of the length attribute when initializing an array object. If an element is added during initialization but the value of the length attribute is not set, when using the array method, IE6 7 ignores all operations, while other browsers ignore the elements added during initialization.

In addition, we will introduce another problem caused by the length attribute:
See example 5:Copy codeThe Code is as follows: function myarr (){}
Myarr. prototype = new Array ();
Var m = new myarr ();
M. push ('cson', 'lai ', 'xiaoc ');
Alert (m. length); // IE6 7:0 others: 3
Alert (m [2]); // all browsers: 'xiaoc'

When the prototype is used to inherit the array, the length in IE 6 7 is always 0, no matter how many elements you have, other browsers are normal.
Even if the length attribute is set forcibly, IE6 7 is 0:Copy codeThe Code is as follows: function myarr (){}
Myarr. prototype = new Array ();
Var m = new myarr ();
M. length = 10;
Alert (m. length); // IE6 others: 10

Therefore, it is concluded that the length attribute will always be 0 when the object prototype inherits the Array in IE6 7. Therefore, if the class Array object needs to use the Array method, do not inherit the Array, instead use Array. prototype. xxx. apply (obj, []);, and remember to correctly initialize the value of the length attribute.