Exploration of length attribute in javascript_javascript skills

Example 1:

Copy code The code is as follows:

var obj={0:'a' ,1:'b'}
alert(obj.length); //undefined
var arr=['a','b']
alert(arr.length); // 2

From the above example, the length attribute in the array-like object is not directly linked to the amount of data it stores. Both the index attribute (0, 1) and the length attribute exist as ordinary attributes of the object. , there is no relationship between them. The js engine will not automatically calculate the length of the array-like object based on the amount of stored data.
But does the length of an array-like object really have nothing to do with the amount of data stored? Example 2 shows that this is not the case:
Example 2:

Copy the code The code is as follows:

function myarr(){}
var m=new myarr();
Array.prototype.push.apply(m,['cson','lai','xiaoc']);
alert( m.length);//Below IE8: undefined Other browsers: 3
alert(m[2]);//Below IE8: undefined Other browsers: 'xiaoc'

From As you can see in Example 2, except for versions below IE8, when adding elements to an array-like object by forcing the use of the array method, the length attribute of the object will also be calculated. It seems that versions below IE8 do not support forcing the use of array methods to add elements to array-like objects.
Example 3:
This example adds an initialization operation to the myarr constructor in Example 2, adding an element when the array-like object is initialized. Weird things happen:

Copy code The code is as follows:

function myarr(){this[0]='cc';}
var m=new myarr();
Array.prototype.push.apply(m,['cson','lai','xiaoc']);
alert(m.length);//Below ie8: undefined Others: 3
alert(m[2]);//Below ie8: undefined Others: xiaoc

Browsers below ie8 continue to not support forced use of array methods. This will be used in the next example. There will be a discussion. For other browsers, the length attribute output is 3, and the element with index 2 is 'xiaoc'. Obviously the js engine completely ignores the element 'cc' with index 0 that originally existed in the array-like object! Let's look at the next example now. This example adds an additional initialization to the length attribute based on Example 3:

Copy code The code is as follows:

function myarr(){this[0]='cc'; this.length=1;}//Add one more length initialization
var m=new myarr() ;
Array.prototype.push.apply(m,['cson','lai','xiaoc']);
alert(m.length);//Output 4
alert(m[ 2]);//Output 'lai'

Something strange happened again. This time all browsers (including ie6 7) correctly output 4, and the element with index 2 was correctly output as 'lai ', it can be seen that after IE 6 and 7 added the initialization of the length attribute, the array method can be used normally.
Now try to initialize the length attribute to an illegal type:
Example 4:

Copy code The code is as follows :

function myarr(){this[0]='cc'; this.length="bo";}//length is set to an illegal 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 code The code is as follows :

function myarr(){this[0]='cc'; this.length="1";}//length is set to an illegal 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 'lai'

From all the examples above, we can make an inference that when using the array method (taking push as an example here), the process is roughly like this:
IE6 7:
It can be seen that IE6 7 is not unsupported It is forced to use the array method to add elements, but it will first determine whether the length attribute exists. If it does not exist, it will return without any operation. If the length attribute is an illegal value, try to convert it to the number type. If the conversion fails, the length is set to 0. This can parse the undefined output in Examples 2 and 3 and the correct output in Example 4.

Other browsers:
Other browsers will 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 an illegal value, try to convert it to the number type. , if the conversion fails, length is also set to 0.

Because the length attribute plays such a decisive role in array methods, the js engine prohibits writing illegal values ​​​​to the length attribute:

Copy code The code is as follows:

var arr=['1','2','3'];
arr.length='undefined';/ /Error reporting invalid array length

From the above example, we can draw a conclusion: when we use array-like objects, in order to avoid weird problems caused by various incorrect length calculations, we should Initialize the value of the length attribute when initializing an array-like 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 will ignore all operations, and other browsers will ignore the addition during initialization. elements.

In addition, another problem caused by the length attribute:
Please see example 5:

Copy code The 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 using prototypal inheritance for an array, length will always be 0 under IE 6 and 7, no matter how many elements you have, other browsers will work fine.
Even if the length attribute is forcibly set, the life or death is 0 under IE6 7:

Copy the code The code is as follows:

function myarr(){}
myarr.prototype=new Array();
var m=new myarr();
m.length=10;
alert(m.length );//IE6 7:0 Others: 10

So we can conclude: when the object prototype inherits an array under IE6 7, the length attribute will always be 0, so if the array-like object needs to use the array method , do not inherit the array, but should use the Array.prototype.xxx.apply(obj,[]); method, and remember to correctly initialize the value of the length attribute.