arrays foreach 連想配列 - For each?JavaScriptの配列全体に?




14 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
}

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

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

抽出 削除 json

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

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

forEach(instance in theArray)

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




後方へのループ

私は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ループの利点と恐怖を私に見せてくれます。




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

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

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




配列を空にしても構いません:

var x;

while(x = y.pop()){ 

    alert(x); //do something 

}

xyの最後の値を含み、配列から削除されます。 shift()を使って、最初の項目をyから取り出して削除することもできます。




underscore.jsライブラリを使用するのが簡単な解決策になります。それは、などの多くの便利なツールを提供しており、利用可能であればeach自動的にジョブをネイティブに委譲しforEachます。

CodePenの動作例は次のとおりです。

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

も参照してください

  • Array::forEach
  • for_each...in(MDN)、その説明するfor each (variable in object)ECMA-357(の一部として廃止されEAX)標準。
  • for...of(MDN)for (variable of object)は、Harmony(ECMAScript 6)提案の一部として使用する次の反復方法について説明します。



3つの実装がありますforeachjQuery次のように。

var a = [3,2];

$(a).each(function(){console.log(this.valueOf())}); //Method 1
$.each(a, function(){console.log(this.valueOf())}); //Method 2
$.each($(a), function(){console.log(this.valueOf())}); //Method 3



for eachネイティブJavaScriptループがありません。ライブラリを使用してこの機能を利用することができます(私はUnderscore.jsを推奨forします)。単純なループを使用してください。

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

しかし、さらに簡単に使用することの理由があるかもしれないことに注意してくださいfor(スタックオーバーフローの問題参照ループを、このような悪い考え反復配列と「のために...で」使用しているのはなぜか?

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



以下のように、JavaScriptで配列をループするいくつかの方法があります。

以下のために -それは、最も一般的なものです。ループのための完全なコードブロック

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ループは条件が成立している間にループします。それは最速のループのようです

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

do / while - 条件が真である間にコードのブロックをループし、少なくとも1回実行する

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

機能ループ - 、forEachmapfilterまたreduceスルー機能(彼らループが、あなたがあなたの配列などで何かをする必要がある場合に使用

// 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>

配列の関数型プログラミングに関する詳細と例については、JavaScriptの機能プログラミング:map、filter、reduceを参照してください




配列で動作するECMAScript5(Javascript上のバージョン)。

forEach - 配列内のすべての項目を繰り返し処理し、各項目に必要な処理を行います。

['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

場合によっては、いくつかのinbuilt機能を使用して配列の操作にもっと興味があります。

map - コールバック関数の結果で新しい配列を作成します。このメソッドは、配列の要素を書式設定する必要がある場合に使用するのに適しています。

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

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

reduce - 名前が示すように、currenct要素と前の実行の結果を渡す関数を呼び出すことによって、配列を単一の値に減らします。

[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 - 配列内のすべての要素がコールバック関数でテストに合格すると、trueまたはfalseを返します。

// 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 - フィルタが、指定された関数にtrueを返す要素を持つ配列を返すこと以外は、すべての場合と非常に似ています。

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

// Output: [2,4,6]

これが役に立つと願っています。




jQueryの使い方$.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];



ラムダ構文はIE 10以降では動作しません。

私は通常、

[].forEach.call(arrayName,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);
});



あなたはforEachを次のように呼び出すことができます:

let Array = [1,3,2];

theArray.forEach((element)=>{ 
  // use the element of the array
  console.log(element) 
}

要素は0から配列の長さまでの各インデックスの値を持ちます。

出力:

1    
3    
2

説明:

forEachはプロトタイプクラスです。これをtheArray.prototype.forEach(...)として呼び出すこともできます。

プロトタイプ:https://hackernoon.com/prototypes-in-javascript-5bba2990e04b : https://hackernoon.com/prototypes-in-javascript-5bba2990e04b

次のように配列を変更することもできます:

for(let i=0;i<theArray.length;i++){
  console.log(i); //i will have the value of each index
}



あなたが使用したい場合forEach()、それはのようになります -

theArray.forEach ( element => { console.log(element); });

あなたが使用したい場合for()、それはのようになります -

for(let idx = 0; idx < theArray.length; idx++){ let element = theArray[idx]; console.log(element); }




概要:

配列を反復処理するときには、以下の目標の1つを達成したいことがあります。

  1. 配列全体を繰り返し処理し、新しい配列を作成したい:

    Array.prototype.map

  2. 配列全体を繰り返し処理し、新しい配列を作成しないようにします。

    Array.prototype.forEach

    for..of ループ

JSでは、これらの両方の目的を達成する多くの方法があります。しかし、あるものは他のものより慣習的です。以下では、javascriptで配列の繰り返しを行うためによく使われるいくつかのメソッド(最もconventientなもの)を見つけることができます。

新しい配列の作成: Map

map()Array.prototype配列のすべての要素を変換して新しい配列を返す関数です。map()コールバック関数を引数としてとり、次のように動作します。

let arr = [1, 2, 3, 4, 5];

let newArr = arr.map((element, index, array) => {
  return element * 2;
})

console.log(arr);
console.log(newArr);

map()引数として渡されたコールバックは、すべての要素に対して実行されます。その後、元の配列と同じ長さの配列が返されます。この新しい配列要素は、引数として渡されるコールバック関数によって変換されますmap()

間に明確な違いmapなど、他のループメカニズムforEachfor..ofループは、あるmap新しい配列として戻り、そのまま古い配列を去る(のように考えていると、あなたが明示的にそれを操作する場合を除きますsplice)。

また、map関数のコールバックは、現在の反復のインデックス番号を第2引数として提供することにも注意してください。さらに、第3引数は、map呼び出された配列を提供します。これらのプロパティは非常に便利な場合もあります。

ループを使用して forEach

forEach上に配置されている機能でありArray.prototype、引数としてコールバック関数をとります。次に、配列内のすべての要素に対してこのコールバック関数を実行します。map()関数とは対照的に、forEach関数はnothing(undefined)を返します。例えば:

let arr = [1, 2, 3, 4, 5];

arr.forEach((element, index, array) => {

  console.log(element * 2);

  if (index === 4) {
    console.log(array)
  }
  // index, and oldArray are provided as 2nd and 3th argument by the callback

})

console.log(arr);

map関数と同様に、forEachコールバックは現在の反復のインデックス番号を第2引数として提供します。また、3番目の引数は、forEach呼び出された配列を提供します。

要素をループする for..of

for..ofループは、アレイ(または他の任意の反復可能オブジェクト)のすべての要素をループ。それは次のように動作します:

let arr = [1, 2, 3, 4, 5];

for(let element of arr) {
  console.log(element * 2);
}

上の例でelementは、配列要素を表し、arrループしたい配列です。名前elementが恣意的ではなく、これが適用可能な場合には、「el」やもっと宣言的な名前を選ぶこともできます。

for..inループをループと混同しないでくださいfor..offor..in配列のすべての列挙可能なプロパティをfor..ofループしますが、ループは配列要素だけをループします。例えば:

let arr = [1, 2, 3, 4, 5];

arr.foo = 'foo';

for(let element of arr) {
  console.log(element);
}

for(let element in arr) {
  console.log(element);
}




Related