Javascript跨浏览器foreach

Question

I am trying to write a cross browser foreach method/function. It should be possible to either use the real, or a copy of the values or properties of the array or object to iterate over (just like the PHP foreach ($array as &$item) ).

Neither the forEach nor the map method is cross browser compatible, so I will be needing for loops.

This topic JavaScript for...in vs for warned me to not use for... in to loop through arrays, but when I test with the following code:

var arr = [];
arr[3] = "foo";
arr[0] = "bar";
arr["baz"] = "baz";

for (var i in arr) {
    alert(i);
}

I get the results 3, 0 and baz (which is correct). This also seems to work on indexed arrays (0, 1, 2). Yet Object.prototype.toString.call(arr) === "[object Array]" returns true.

So what is the best cross browser approach to create a foreach method which will iterate over both array values and object properties, ideally offering the option to work with the actual values/properties of the array/object?

Answer 1

Just check the hasOwnProperty when using for..in that'll resolve most danger issue:

for (var name in buz) {
    if (buz.hasOwnProperty(name)) {
        // do stuff
    }
}

Answer 2

var arr = [];
arr[3] = "foo";
arr[0] = "bar";
arr["baz"] = "baz";

for (var i in arr) {
    alert(arr[i]);
}

Cheers!

Answer 3

You may be interested in a utility library like underscore.js . It provides many useful utility functions like each and map . If available, it uses the native implementation, otherwise it falls back to its own custom implementation. The library is also relatively small at 4kb for the production version.

If, however, you are really motivated to do this on your own, then the underscore.js source at the very least could illuminate exactly how this is done. Their each is near the top. The line starts with 'var each = _.each = ...'

You could rest assured the code is high quality as it's likely to have been scrutinized and optimized multiple times.

Answer 4

This should work for array and object, the attribute checks are not necessary, they are just there for demonstration purposes.

function forEach(object, callBack) {
    var tObject = Object.prototype.toString.call(object),
        i,
        l;

    if (tObject !== "[object Array]" && tObject !== "[object Object]") {
        throw new TypeError("'object' must be an array or object");
    }

    if (Object.prototype.toString.call(callBack) !== "[object Function]") {
        throw new TypeError("'callBack' must be a function");
    }

    if (tObject === "[object Array]") {
        i = 0;
        l = object.length;

        while (i < l) {
            callBack(object[i], i);

            i += 1;
        }

        return;
    }

    for (i in object) {
        if (object.hasOwnProperty(i)) {
            callBack(object[i], i);
        }
    }

    return;
}

var test1 = ["a", "b", "c", "d", "e", "f", "g", "h", "i"];
var test2 = {
    "a": 10,
    "b": 11,
    "c": 12,
    "d": 13,
    "e": 14,
    "f": 15,
    "g": 16,
    "h": 17,
    "i": 18
};

forEach(test1, function (element, index) {
    console.log(index, element);
});

forEach(test2, function (element, index) {
    console.log(index, element);
});

On jsfiddle

I've also setup a performance test for you to have a look at on jsperf

Answer 5

for (var i in arr) {
    if (arr.hasOwnProperty(i)) {
        alert(i + '--->' + arr[i]);
    }
}