javascript - Javascript クロスブラウザ foreach

Question

foreachクロスブラウザのメソッド/関数を書き込もうとしています。配列またはオブジェクトの値またはプロパティの実際のコピーまたはコピーを使用して反復処理を行うことができるはずです (PHP のようにforeach ($array as &$item))。

forEach も map メソッドもブラウザ間の互換性がないため、for ループが必要になります。

このトピックJavaScript for...in vs forは、配列をループするために使用しないように警告しましたfor... inが、次のコードでテストすると:

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

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

結果 3、0、および baz が得られます (これは正しいです)。これは、インデックス付き配列 (0、1、2) でも機能するようです。それでもObject.prototype.toString.call(arr) === "[object Array]"true を返します。

では、配列値とオブジェクト プロパティの両方を反復処理し、理想的には配列/オブジェクトの実際の値/プロパティを操作するオプションを提供する foreach メソッドを作成するための最良のクロス ブラウザー アプローチは何ですか?

Answer 1

hasOwnProperty使用時に確認するだけで、for..inほとんどの危険な問題が解決します。

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

Answer 2

これは配列とオブジェクトで機能するはずです。属性チェックは必要ありません。これらはデモンストレーション目的のためだけにあります。

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);
});

jsfiddleについて

jsperfで確認できるように、パフォーマンス テストもセットアップしました。

Answer 3

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