For each?JavaScriptの配列全体に?



Answers

編集 :この答えは絶望的に時代遅れです。 より現代的なアプローチについては、配列で利用可能なメソッドを見てください。 関心のある方法は次のとおりです。

  • forEach
  • 地図
  • フィルタ
  • ジップ
  • 減らす
  • すべて
  • 一部

JavaScriptで配列を反復処理する標準的な方法は、-loopのバニラfor

var length = arr.length,
    element = null;
for (var i = 0; i < length; i++) {
  element = arr[i];
  // Do something with element i.
}

ただし、この方法は、配列が密で、各インデックスが要素で占められている場合にのみ有効です。 配列がまばらな場合は、配列に実際に存在しない多くのインデックスを繰り返し処理するため、この方法でパフォーマンスの問題に遭遇する可能性があります。 この場合、for..in -loopは良いアイデアかもしれません。 ただしfor..inもレガシーブラウザでも列挙されるので、配列の目的のプロパティ(配列要素)のみが有効になるように、適切な保護手段を使用する必要があります。プロパティはenumerable定義されています。

ECMAScript 5では配列プロトタイプに対してforEachメソッドがありますが、従来のブラウザーではサポートされていません。 したがって、一貫して使用できるようにするには、それをサポートする環境(たとえば、サーバーサイドJavaScriptの場合はNode.js )を使用するか、「Polyfill」を使用する必要があります。 しかし、この機能のためのPolyfillは簡単で、コードを読みやすくしているため、インクルードするのに適したポリフィルです。

Question

JavaScriptを使用して配列内のすべてのエントリをループするにはどうすればよいですか?

私はそれがこのようなものだと思った:

forEach(instance in theArray)

theArrayは私の配列ですが、これは間違っているようです。




ECMAScript5 (the version on Javascript) to work with Arrays.

forEach - Iterates through every item in the array and do whatever you need with each item.

['C', 'D', 'E'].forEach(function(element, index) {
  console.log(element + " is the #" + (index+1) + " in musical scale");
});

// Output
// C is the #1 in musical scale
// D is the #2 in musical scale
// E is the #3 in musical scale

In case , more interested on operation on array using some inbuilt feature.

map - It creates a new array with the result of the callback function. This method is good to be used when you need to format the elements of your array.

// Let's upper case the items in the array
['bob', 'joe', 'jen'].map(function(elem) {
  return elem.toUpperCase();
});

// Output: ['BOB', 'JOE', 'JEN']

reduce - As the name says it reduces the array to a single value by calling the given function passing in the currenct element and the result of the previous execution.

[1,2,3,4].reduce(function(previous, current) {
  return previous + current;
});
// Output: 10
// 1st iteration: previous=1, current=2 => result=3
// 2nd iteration: previous=3, current=3 => result=6
// 3rd iteration: previous=6, current=4 => result=10

every - Returns true or false if all the elements in the array pass the test in the callback function.

// Check if everybody has 18 years old of more.
var ages = [30, 43, 18, 5];  
ages.every(function(elem) {  
  return elem >= 18;
});

// Output: false

filter - Very similar to every except that filter return an array with the elements that return true to the given function.

// Finding the even numbers
[1,2,3,4,5,6].filter(function(elem){
  return (elem % 2 == 0)
});

// Output: [2,4,6]

Hope this will be useful.




Probably the for(i = 0; i < array.length; i++) loop is not the best choice. どうして? If you have this:

var array = new Array();
array[1] = "Hello";
array[7] = "World";
array[11] = "!";

The method will call from array[0] to array[2] . First, this will first reference variables you don't even have, second you would not have the variables in the array, and third this will make the code bolder. Look here, it's what I use:

for(var i in array){
    var el = array[i];
    //If you want 'i' to be INT just put parseInt(i)
    //Do something with el
}

And if you want it to be a function, you can do this:

function foreach(array, call){
    for(var i in array){
        call(array[i]);
    }
}

If you want to break, a little more logic:

function foreach(array, call){
    for(var i in array){
        if(call(array[i]) == false){
            break;
        }
    }
}

例:

foreach(array, function(el){
    if(el != "!"){
        console.log(el);
    } else {
        console.log(el+"!!");
    }
});

It returns:

//Hello
//World
//!!!



jQuery way using $.map :

var data = [1, 2, 3, 4, 5, 6, 7];

var newData = $.map(data, function(element) {
    if (element % 2 == 0) {
        return element;
    }
});

// newData = [2, 4, 6];



An easy solution now would be to use the underscore.js library . It's providing many useful tools, such as each and will automatically delegate the job to the native forEach if available.

A CodePen example of how it works is:

var arr = ["elemA", "elemB", "elemC"];
_.each(arr, function(elem, index, ar)
{
...
});

も参照してください

  • Array::forEach .
  • In for_each...in (MDN) it is explained that for each (variable in object) is deprecated as the part of ECMA-357 ( EAX ) standard.
  • for...of (MDN) describes the next way of iterating using for (variable of object) as the part of the Harmony (ECMAScript 6) proposal.



The lambda syntax doesnt usually work in IE 10 or below.

I usually use the

[].forEach.call(function(value,index){
    console.log("value of the looped element" + value);
    console.log("index of the looped element" + index);
});


If you are a jQuery Fan and already have a jQuery file running, you should reverse the positions of the index and value parameters

$("#ul>li").each(function(**index,value**){
    console.log("value of the looped element" + value);
    console.log("index of the looped element" + index);
});



配列をループしたい場合は、標準の3パートforループを使用forます。

for (var i = 0; i < myArray.length; i++) {
    var arrayItem = myArray[i];
}

myArray.lengthをキャッシュmyArray.lengthか、逆方向に反復することで、パフォーマンスの最適化を行うことができます。




後方へのループ

私はreverse forループがここで言及に値すると思います:

for (var i = array.length; i--; ) {
     // process array[i]
}

利点:

  • 一時的なlen変数を宣言する必要はありません。 array.length 、各繰り返しでarray.lengthと比較する必要はありません。
  • 逆順でDOMから兄弟削除するほうが効率的です。 (ブラウザは内部配列の要素の移動を少なくする必要があります)。
  • ループ中、またはインデックスiの後で配列変更した場合(たとえば、 array[i]で項目を削除または挿入する場合)、前方ループは、左にシフトした項目をスキップしてi位置に戻します。右にシフトされた項目。 伝統的なforループでは、処理1を必要とする次の項目を指すようにiを更新することができます 、反復の方向を逆にすることはしばしばより簡単洗練された解決方法です。
  • 同様に、 ネストされた DOM要素を変更または削除する場合 、逆の処理はエラー回避できます。 たとえば、子ノードを処理する前に、親ノードのinnerHTMLを変更することを検討してください。 子ノードに到達するまでに、親ノードのinnerHTMLが書き込まれたときに新しく作成された子に置き換えられてDOMから切り離されます。
  • 利用可能な他のオプションのいくつかよりも、入力と読み込み短くなっています。 それはforEach()とES6のfor ... ofに失わfor ... of

欠点:

  • アイテムを逆順に処理します。 結果から新しい配列を作成したり、画面上にものを印刷したりしていた場合、元の順序に対して出力が当然逆になります
  • 順序を保持するために兄弟を最初の子としてDOMに繰り返し挿入することは効率が悪いです。 DOMノードを効率的に、順番に作成するには、通常どおりループを進めて追加するだけです(また、「ドキュメントフラグメント」も使用します)。
  • 逆のループは、ジュニア開発者に混乱招いています。 (あなたの見通しに応じて、あなたは優位性を考慮するかもしれません。)

私はいつもそれを使うべきですか?

いくつかの開発者は、フォワードをループする正当な理由がない限り、デフォルトでreverse forループを使用します

パフォーマンスの向上は通常わずかですが、それは悲鳴のようなものです。

「リスト内のすべてのアイテムにこれを行うだけで、私はそのオーダーを気にしない!」

しかし実際には実際には意図の信頼できる指標ではありません 。なぜなら、あなた注文を気にかけているときと区別がつかず、本当に逆にループする必要があるからです。 実際、ECMAScriptを含む多くの言語では現在利用できないが、 forEachUnordered()などのようにforEachUnordered()ことができる「ドントケア」という意図を正確に表現するには、別の構造が必要になります。

順序が重要でなく、 効率が懸念される場合(ゲームまたはアニメーションエンジンの最も内側のループで)、reverse-forループをあなたのgo-toパターンとして使用することが許容されます。 既存のコードで逆のforループを見ることは、 必ずしもその命令が無関係であること必ずしも意味しないことを覚えておいてください!

forEach()を使う方が良いです

一般に、 明快さと安全性がより重視される上位レベルのコードでは、デフォルトのパターンとしてArray::forEachを使用することをお勧めします。

  • 読むのは明らかです。
  • これは、ブロック内でシフトされないことを示しています(これは、長いwhileループとwhileループでは常に驚いている可能性がwhileます)。
  • それはクロージャのための自由な範囲を与えます。
  • ローカル変数の漏れや、外部変数との偶発的な衝突(および突然変異)を減らします。

次に、コードのreverse forループが表示されたら、それは正当な理由(おそらく上記の理由の1つ)のために元に戻されるというヒントです。 従来のfor forループを見ると、シフトが起こる可能性があります。

(意図の議論があなたにとって意味をなさない場合、あなたとあなたのコードは、 プログラミングスタイルとあなたの脳についてのCrockfordの講義を見て恩恵を受けるかもしれません。)

どのように機能するのですか?

for (var i = 0; i < array.length; i++) { ... }   // Forwards

for (var i = array.length; i--; )    { ... }   // Reverse

あなたはi--が中間節(私たちは通常比較を参照)であり、最後の節は空である(私たちは通常i++を見ている)ことに気付くでしょう。 つまり、 i--は継続の条件としても使われます。 重要なのは、各反復の前に実行され、チェックされます。

  • どのように爆発することなくarray.lengthから始めることができますか?

    i--は各反復の前に実行するので、最初の反復では、 array.length - 1 -out-of-bounds undefined項目に関する問題を回避するarray.length - 1項目に実際にアクセスします。

  • インデックス0より前に反復処理を停止しないのはなぜですか?

    ループは、条件i--が偽の値に評価されたときに反復を停止する(0になる)。

    そのトリックは、 - iとは異なり、末尾のi--演算子はiデクリメントしますが、減算のに値をi--ます。 あなたのコンソールはこれを実証することができます:

    > var i = 5; [i, i--, i];

    [5, 5, 4]

    だから最終的な反復では、 は以前は1でi i--式は0に変更されましたが、実際には1 (真理値)となり、条件が満たされます。 次の反復では、 i-1-1に変更しますが、 0 (偽)を返し、実行をループの最下部から直ちに中止します。

    伝統的なForward forループでは、 i++++iは交換可能です(Douglas Crockfordが指摘するように)。 しかし、reverse forループでは、デクリメントも条件式であるため、インデックス0のアイテムを処理したい場合は、私はスティックにする必要があります。

トリビア

一部の人々 forループの逆に小さな矢印を描き、ウインクで終了します。

for (var i = array.length; i --> 0 ;) {

クレジットはWYLに行き、reverse forループの利点と恐怖を私に見せてくれます。




There are a few ways to loop through an array in JavaScript, as below:

for - it's the most common one. Full block of code for looping

var languages = ["JAVA", "JavaScript", "C#", "Python"];
var i, len, text;
for (i = 0, len = languages.length, text = ""; i < len; i++) {
    text += languages[i] + "<br>";
}
document.getElementById("example").innerHTML = text;
<p id="example"></p>

while - loop while a condition is through. It seems to be the fastest loop

var text = "";
var i = 0;
while (i < 10) {
    text +=  i + ") something<br>";
    i++;
}
document.getElementById("example").innerHTML = text;
<p id="example"></p>

do/while - also loop through a block of code while the condition is true, will run at least one time

var text = ""
var i = 0;
do {
    text += i + ") something <br>";
    i++;
}
while (i < 10);
document.getElementById("example").innerHTML = text;
<p id="example"></p>

Functional loops - forEach , map , filter , also reduce (they loop through the function, but used if you need to do something with your array, etc.

// For example, in this case we loop through the number and double them up using the map function
var numbers = [65, 44, 12, 4];
document.getElementById("example").innerHTML = numbers.map(function(num){return num * 2});
<p id="example"></p>

For more information and examples about functional programming on arrays, look at the blog post Functional programming in JavaScript: map, filter and reduce .




私はこれが古い投稿であることを知っています、そして既に多くの素晴らしい答えがあります。 もう少し完全にするために、私はAngularJSを使って別のものをスローすると思った。 もちろん、これはAngularを使用している場合にのみ当てはまりますが、とにかくそれを置いておきたいと思います。

angular.forEachは2つの引数とオプションの第3の引数をとります。 最初の引数は反復処理の対象となるオブジェクト(配列)であり、2番目の引数は反復子関数であり、3番目のオプション引数はオブジェクトコンテキストです(ループ内では 'this'と呼ばれます)。

forEachループを使用するには、さまざまな方法があります。 最も単純でおそらく最も使用されるのは

var temp = [1, 2, 3];
angular.forEach(temp, function(item) {
    //item will be each element in the array
    //do something
});

Another way that is useful for copying items from one array to another is

var temp = [1, 2, 3];
var temp2 = [];
angular.forEach(temp, function(item) {
    this.push(item); //"this" refers to the array passed into the optional third parameter so, in this case, temp2.
}, temp2);

Though, you don't have to do that, you can simply do the following and it's equivalent to the previous example:

angular.forEach(temp, function(item) {
    temp2.push(item);
});

Now there are pros and cons of using the angular.forEach function as opposed to the built in vanilla-flavored for loop.

長所

  • Easy readability
  • Easy writability
  • If available, angular.forEach will use the ES5 forEach loop. Now, I will get to efficientcy in the cons section, as the forEach loops are much slower than the for loops. I mention this as a pro because it's nice to be consistent and standardized.

Consider the following 2 nested loops, which do exactly the same thing. Let's say that we have 2 arrays of objects and each object contains an array of results, each of which has a Value property that's a string (or whatever). And let's say we need to iterate over each of the results and if they're equal then perform some action:

angular.forEach(obj1.results, function(result1) {
    angular.forEach(obj2.results, function(result2) {
        if (result1.Value === result2.Value) {
            //do something
        }
    });
});

//exact same with a for loop
for (var i = 0; i < obj1.results.length; i++) {
    for (var j = 0; j < obj2.results.length; j++) {
        if (obj1.results[i].Value === obj2.results[j].Value) {
            //do something
        }
    }
}

Granted this is a very simple hypothetical example, but I've written triple embedded for loops using the second approach and it was very hard to read, and write for that matter.

短所

  • Efficiency. angular.forEach , and the native forEach , for that matter, are both so much slower than the normal for loop....about 90% slower . So for large data sets, best to stick to the native for loop.
  • No break, continue, or return support. continue is actually supported by " accident ", to continue in an angular.forEach you simple put a return; statement in the function like angular.forEach(array, function(item) { if (someConditionIsTrue) return; }); which will cause it to continue out of the function for that iteration. This is also due to the fact that the native forEach does not support break or continue either.

I'm sure there's various other pros and cons as well, and please feel free to add any that you see fit. I feel that, bottom line, if you need efficiency, stick with just the native for loop for your looping needs. But, if your datasets are smaller and a some efficiency is okay to give up in exchange for readability and writability, then by all means throw an angular.forEach in that bad boy.




There isn't any for each loop in native JavaScript . You can either use libraries to get this functionality (I recommend Underscore.js ), use a simple for in loop.

for (var instance in objects) {
   ...
}

However, note that there may be reasons to use an even simpler for loop (see question Why is using “for…in” with array iteration such a bad idea? )

var instance;
for (var i=0; i < objects.length; i++) {
    var instance = objects[i];
    ...
}



Links