forEach on array of undefined created by Array constructor

问题:

I am just wondering why it is not possible to make forEach on array of undefined.

Code:

var arr = new Array(5); // [undefined x 5]  //ES5 forEach arr.forEach(function(elem, index, array) {     console.log(index); });  //underscore each _.each(arr, function(elem, index, array) {     console.log(index); }); 

Both examples do not execute function.

Now to make foreach, I have to make:

var arr = [0,0,0,0,0]; 

Then make forEach on it.

I am trying to make an array with specified size and loop through it, avoiding for loop. I think that it is clearer using forEach than for loop. With array with length 5 it is not a problem, but it would be ugly with bigger arrays.

Why there is a problem looping through array of undefined values ?

回答1:

Array(5) is essentialy equivalent to

var arr = [];  arr.length = 5; 

In javascript changing array's length doesn't set any values for it's numeric properties nor does it define those properties in the array object. So numeric properties are undefined instead of having undefined value. You can check it by using:

Object.keys(arr) 

When iterating javascript iterates through numeric properties of the array, so if these don't exist, there is nothing to iterate over.

You can check it by doing:

var arr = Array(5)  //prints nothing arr.forEach(function(elem, index, array) {     console.log(index); });  arr[3] = 'hey' //prints only 'hey' even though arr.length === 5 arr.forEach(function(elem, index, array) {     console.log(index); }); 

The following code:

var arr = [undefined, undefined]; 

creates and array of length ===2 and sets the both numeric properties 0 and 1 to undefined.

回答2:

Looking at a simplified implementation of .forEach() may help.

Array.prototype.my_for_each = function(callback, thisArg) {     for (var i = 0; i < this.length; i++) {         if (i in this) {             callback.call(thisArg, this[i], i, this);         }     } }; 

---

So you can see that what happens is that the method does iterate the entire Array (according to the spec), but it only invokes the callback if the member actually exists. It checks by looking for the property (the index) using the in operator, which tests to see if the object either has or inherits the property.

If in shows that the index exists, the callback is invoked.

---

So given this Array:

var arr = ["foo", "bar", "baz"]; 

This will output all 3 items:

arr.my_for_each(function(item) {     console.log(item); }); // "foo" "bar" "baz" 

But if we use delete to remove a member, it leaves a hole in the Array, which will now get passed over.

delete arr[1];  arr.my_for_each(function(item) {     console.log(item); }); // "foo" "baz" 

---

When you created an Array using Array(5), it created one without any members, but with the .length set to 5. So this is an example of a sparse Array (very sparse in this instance). Because none of the indices will be found by in, the callback is never invoked.

文章来源: forEach on array of undefined created by Array constructor