Javaでは、forループを使用して次のように配列内のオブジェクトをトラバースできます。

String[] myStringArray = {"Hello", "World"};
for (String s : myStringArray)
{
    // Do something
}

JavaScriptでも同じことができますか？

いくつかのオプションがあります。

1.順次forループ：

var myStringArray = ["Hello","World"];
var arrayLength = myStringArray.length;
for (var i = 0; i < arrayLength; i++) {
    console.log(myStringArray[i]);
    //Do something
}

長所

• あらゆる環境で機能
• あなたは使用することができますbreakし、continueフロー制御文

短所

• 冗長すぎる
• 命令的
• 1つずれたエラーが発生しやすい（フェンスポストエラーとも呼ばれる）

2. Array.prototype.forEach

ES5仕様では、多くの有益な配列メソッドが導入されており、そのうちの1つであり、Array.prototype.forEach配列を反復する簡潔な方法を提供します。

const array = ["one", "two", "three"]
array.forEach(function (item, index) {
  console.log(item, index);
});

ES5仕様がリリースされたとき（2009年12月）の執筆時点から約10年であり、ES5仕様はデスクトップ、サーバー、およびモバイル環境のほぼすべての最新のエンジンによって実装されているため、安全に使用できます。

ES6の矢印関数の構文を使用すると、さらに簡潔になります。

array.forEach(item => console.log(item));

古代のプラットフォーム（IE11など）をサポートする予定がない限り、矢印関数も広く実装されています。あなたも行くのは安全です。

長所

• 非常に短くて簡潔です。
• 宣言的

短所

• break/ は使用できませんcontinue

通常、break配列要素を繰り返す前に配列要素をフィルタリングすることで、命令ループから抜け出す必要性を置き換えることができます。次に例を示します。

array.filter(item => item.condition < 10)
     .forEach(item => console.log(item))

配列を反復して別の配列を作成する場合はmap、を使用する必要があることに注意してください。このアンチパターンは何度も見たことがあります。

アンチパターン：

const numbers = [1,2,3,4,5], doubled = [];

numbers.forEach((n, i) => { doubled[i] = n * 2 });

マップの適切な使用例：

const numbers = [1,2,3,4,5];
const doubled = numbers.map(n => n * 2);

console.log(doubled);

また、配列を値に縮小しようとしている場合、たとえば、数値の配列を合計したい場合は、reduceメソッドを使用する必要があります。

アンチパターン：

const numbers = [1,2,3,4,5];
const sum = 0;
numbers.forEach(num => { sum += num });

reduceの適切な使用：

const numbers = [1,2,3,4,5];
const sum = numbers.reduce((total, n) => total + n, 0);

console.log(sum);

3. ES6 for-ofステートメント

ES6標準では、反復可能なオブジェクトの概念が導入され、データをトラバースするための新しい構成であるfor...ofステートメントが定義されています。

このステートメントは、あらゆる種類の反復可能なオブジェクトと、ジェネレーター（[Symbol.iterator]プロパティを持つ任意のオブジェクト）に対して機能します。

配列オブジェクトは本質的にES6の組み込みの反復可能オブジェクトであるため、次のステートメントを使用できます。

let colors = ['red', 'green', 'blue'];
for (const color of colors){
    console.log(color);
}

長所

• さまざまなオブジェクトを反復処理できます。
• 通常のフロー制御ステートメント（break/ continue）を使用できます。
• シリアル非同期値を反復するのに役立ちます。

短所

• 古いブラウザをターゲットにしている場合、変換された出力は驚くかもしれません。

使ってはいけません for...in

@zipcodemanはfor...inステートメントの使用を提案しますが、配列の反復for-inは避ける必要があるため、そのステートメントはオブジェクトのプロパティを列挙することを目的としています。

次の理由により、配列のようなオブジェクトには使用しないでください。

• 反復の順序は保証されていません。配列のインデックスは番号順にアクセスされない場合があります。
• 継承されたプロパティも列挙されます。

2番目のポイントは、多くの問題が発生する可能性があることです。たとえば、Array.prototypeオブジェクトを拡張してそこにメソッドを含めると、そのプロパティも列挙されます。

例えば：

Array.prototype.foo = "foo!";
var array = ['a', 'b', 'c'];

for (var i in array) {
    console.log(array[i]);
}

上記のコードは、コンソールログ「a」、「b」、「c」、および「foo！」をコンソールします。

これは、ネイティブのプロトタイプ拡張（MooToolsなど）に大きく依存するライブラリーを使用する場合に特に問題になります。

for-in声明は、私が前に言ったようにそこにある列挙例えば、オブジェクトのプロパティ：

var obj = {
    "a": 1,
    "b": 2,
    "c": 3
};

for (var prop in obj) {
    if (obj.hasOwnProperty(prop)) { 
        // or if (Object.prototype.hasOwnProperty.call(obj,prop)) for safety...
        console.log("prop: " + prop + " value: " + obj[prop])
    }
}

上記の例では、このhasOwnPropertyメソッドを使用すると、自身のプロパティのみを列挙できます。つまり、オブジェクトが物理的に持っているプロパティのみを列挙でき、継承されたプロパティはありません。

次の記事を読むことをお勧めします。

• 列挙と反復

はい、ECMAScript 2015（「ハーモニー」リリース）で導入されたfor...of機能が実装に含まれていると仮定すると、これは最近ではかなり安全な仮定です。

それはこのように動作します：

// REQUIRES ECMASCRIPT 2015+
var s, myStringArray = ["Hello", "World"];
for (s of myStringArray) {
  // ... do something with s ...
}

さらに良いことに、ECMAScript 2015はブロックスコープの変数も提供するため、

// REQUIRES ECMASCRIPT 2015+
const myStringArray = ["Hello", "World"];
for (const s of myStringArray) {
  // ... do something with s ...
}
// s is no longer defined here

（変数sは反復ごとに異なりますが、constそこで変更されない限り、ループ本体内で宣言できます。）

スパース配列に関する注意：JavaScriptの配列は、実際にそのによって報告されるほど多くのアイテムを格納しない場合がありlengthます。その報告された数は、値が格納されている最高のインデックスよりも1つ大きいだけです。配列が保持する要素がその長さで示されるよりも少ない場合、その要素はsparseと呼ばれます。たとえば、インデックス3、12、および247のアイテムのみを含む配列を持つことは完全に正当です。そのlengthような配列は248と報告されますが、実際には3つの値のみが格納されます。他のインデックスにあるアイテムにアクセスしようとすると、配列はundefinedそこに値を持っているように見えます。したがって、配列を「ループスルー」する場合、答えるべき質問があります。その長さとプロセスによって示される全範囲をループしますか？undefined■不足している要素の場合、または実際に存在する要素のみを処理しますか？どちらのアプローチにも多くのアプリケーションがあります。配列を何に使用するかによります。

for..を使用して配列を反復処理するofと、ループの本体が実行され、配列に実際には存在しないすべての項目に対してlengthループ制御変数が設定さundefinedれます。「何かをする」コードの詳細によっては、その振る舞いはあなたが望むものかもしれませんが、そうでない場合は、別のアプローチを使用する必要があります。

もちろん、一部の開発者はとにかく別のアプローチを使用せざるを得ません。理由はなんらかの理由で、まだサポートされていないJavaScriptのバージョンを対象にしているためforですof。

JavaScript実装がECMAScript仕様の以前のエディション（たとえば、Internet Explorerのバージョンが9より前のバージョンなど）に準拠している限りArray#forEach、ループの代わりに反復子メソッドを使用できます。その場合、配列の各項目で呼び出される関数を渡します。

var myStringArray = [ "Hello", "World" ];
myStringArray.forEach( function(s) { 
     // ... do something with s ...
} );

違ってfor... of、.forEach唯一の配列に実際に存在する要素のための関数を呼び出します。3つの要素と長さ248の架空の配列を渡すと、関数は248回ではなく3回しか呼び出されません。また、欠落している要素と実際にに設定されている要素を区別しundefinedます。後者の場合はundefined、引数として渡して関数を呼び出します。これはあなたがスパース配列を処理する方法であれば、.forEachも、あなたの通訳サポートしている場合は移動するための方法かもしれfor... of。

JavaScriptのすべてのバージョンで機能する最後のオプションは、明示的なカウントループです。あなたは単に0から長さより1つ少ない数まで数え、インデックスとしてカウンターを使います。基本的なループは次のようになります。

var i, s, myStringArray = [ "Hello", "World" ], len = myStringArray.length;
for (i=0; i<len; ++i) {
  s = myStringArray[i];
  // ... do something with s ...
}

このアプローチの利点の1つは、スパース配列の処理方法を選択できることです。上記のコードは、ループの本体をlength常に実行し、欠落している要素にはをs設定します。代わりに、スパース配列の実際に存在する要素のみを処理する場合は、インデックスに簡単なテストを追加できます。undefinedforof.forEachin

var i, s, myStringArray = [ "Hello", "World" ], len = myStringArray.length;
for (i=0; i<len; ++i) {
  if (i in myStringArray) {
    s = myStringArray[i];
    // ... do something with s ...
  }
}

（myStringArray.lengthループ条件に完全な式を含めるのではなく）ローカル変数に長さの値を割り当てると、毎回プロパティルックアップがスキップされるため、パフォーマンスに大きな違いが生じる可能性があります。私のマシンでRhinoを使用すると、速度は43％向上します。

次のように、ループ初期化句で行われた長さのキャッシュを確認できます。

var i, len, myStringArray = [ "Hello", "World" ];
for (len = myStringArray.length, i=0; i<len; ++i) {

明示的なカウントループは、必要に応じて、各値のインデックスにアクセスできることも意味します。インデックスは、渡した関数に追加のパラメーターとしても渡されるためforEach、そのようにアクセスすることもできます。

myStringArray.forEach( function(s, i) {
   // ... do something with s and i ...
});

for... of各オブジェクトに関連付けられたインデックスを提供しませんが、反復するオブジェクトが実際にArray（for.. ofこのメソッドを持たない他の反復可能な型で機能する）限り、配列を使用できます#entriesメソッドを使用して、[index、item]ペアの配列に変更し、それを繰り返します。

for (const [i, s] of myStringArray.entries()) {
  // ... do something with s and i ...
}

for... in他の人が言及した構文は、オブジェクトのプロパティをループするためのものです。JavaScriptの配列は、数値のプロパティ名（および自動的に更新されるlengthプロパティ）を持つオブジェクトなので、理論的にはそれを使用して配列をループできます。しかし、問題はそれ自体が数値のプロパティ値に制限されないことです（メソッドであっても、実際には値がクロージャであるプロパティにすぎないことに注意してください）。また、数値順にそれらを反復することが保証されていません。したがって、for... in構文を配列のループに使用しないでください。

を使用できますmap。これは、PythonやHaskellなどの他の言語でも使用できる関数型プログラミング手法です。

[1,2,3,4].map( function(item) {
     alert(item);
})

一般的な構文は次のとおりです。

array.map(func)

一般的にfuncは、配列のアイテムである1つのパラメーターを取ります。ただし、JavaScriptの場合は、アイテムのインデックスである2番目のパラメーターと、配列自体である3番目のパラメーターを使用できます。

の戻り値array.mapは別の配列なので、次のように使用できます。

var x = [1,2,3,4].map( function(item) {return item * 10;});

そして今、xは[10,20,30,40]です。

関数をインラインで記述する必要はありません。別の機能である場合もあります。

var item_processor = function(item) {
      // Do something complicated to an item
}

new_list = my_list.map(item_processor);

これは次のようなものになります。

 for (item in my_list) {item_processor(item);}

あなたが取得しないことを除いてnew_list。

JavaScriptでは、for-inループで配列をループすることはお勧めできませんが、次のforようなループを使用することをお勧めします。

for(var i=0, len=myArray.length; i < len; i++){}

これも最適化されています（配列の長さを「キャッシュ」）。詳細については、件名に関する私の投稿をご覧ください。

for（let of myStringArray）{

（あなたの質問に直接答える：今あなたはできる！）

他のほとんどの答えは正しいですが、ECMA Script  6  2015が反復を行うための新しいメカニズムであるfor..ofループをもたらすことについては（この記事の執筆時点では）言及されていません。

この新しい構文は、JavaScriptで配列を反復する最もエレガントな方法です（反復インデックスが不要な場合）。

現在、Firefox 13以降、Chrome 37以降で動作し、他のブラウザーではネイティブで動作しません（以下のブラウザーの互換性を参照）。幸いなことに、今日の次世代機能を使用できるJSコンパイラー（Babelなど）があります。

Nodeでも動作します（バージョン0.12.0でテストしました）。

配列の反復

// You could also use "let" instead of "var" for block scope.
for (var letter of ["a", "b", "c"]) { 
   console.log(letter); 
}

オブジェクトの配列を反復する

var band = [
  {firstName : 'John', lastName: 'Lennon'}, 
  {firstName : 'Paul', lastName: 'McCartney'}
];

for(var member of band){
  console.log(member.firstName + ' ' + member.lastName); 
}

ジェネレーターを繰り返す：

（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...ofから抽出された例）

function* fibonacci() { // a generator function
  let [prev, curr] = [1, 1];
  while (true) {
    [prev, curr] = [curr, prev + curr];
    yield curr;
  }
}

for (let n of fibonacci()) {
  console.log(n);
  // truncate the sequence at 1000
  if (n >= 1000) {
    break;
  }
}

互換性テーブル： http : //kangax.github.io/es5-compat-table/es6/#For..of loops

仕様： http : //wiki.ecmascript.org/doku.php? id = harmony: iterators

}

Opera、Safari、Firefox、Chromeはすべて、多くの一般的なループを最適化するための拡張されたArrayメソッドのセットを共有しています。

すべてが必要なわけではありませんが、非常に便利な場合や、すべてのブラウザがそれらをサポートしている場合に便利です。

Mozilla Labsは、彼らとWebKitの両方が使用するアルゴリズムを公開したので、自分で追加できます。

filterは、何らかの条件またはテストを満たすアイテムの配列を返します。

すべての配列メンバーがテストに合格すると、everyはtrueを返します。

テストに合格した場合にtrueを返すものもあります。

forEachは、各配列メンバーで関数を実行し、何も返しません。

mapはforEachに似ていますが、各要素の操作の結果の配列を返します。

これらのメソッドはすべて、最初の引数に関数を取り、オプションの2番目の引数を持ちます。これは、関数をループするときに配列メンバーにスコープを課したいオブジェクトであるオブジェクトです。

必要になるまで無視してください。

indexOfとlastIndexOfは、引数と完全に一致する最初または最後の要素の適切な位置を見つけます。

(function(){
    var p, ap= Array.prototype, p2={
        filter: function(fun, scope){
            var L= this.length, A= [], i= 0, val;
            if(typeof fun== 'function'){
                while(i< L){
                    if(i in this){
                        val= this[i];
                        if(fun.call(scope, val, i, this)){
                            A[A.length]= val;
                        }
                    }
                    ++i;
                }
            }
            return A;
        },
        every: function(fun, scope){
            var L= this.length, i= 0;
            if(typeof fun== 'function'){
                while(i<L){
                    if(i in this && !fun.call(scope, this[i], i, this))
                        return false;
                    ++i;
                }
                return true;
            }
            return null;
        },
        forEach: function(fun, scope){
            var L= this.length, i= 0;
            if(typeof fun== 'function'){
                while(i< L){
                    if(i in this){
                        fun.call(scope, this[i], i, this);
                    }
                    ++i;
                }
            }
            return this;
        },
        indexOf: function(what, i){
            i= i || 0;
            var L= this.length;
            while(i< L){
                if(this[i]=== what)
                    return i;
                ++i;
            }
            return -1;
        },
        lastIndexOf: function(what, i){
            var L= this.length;
            i= i || L-1;
            if(isNaN(i) || i>= L)
                i= L-1;
            else
                if(i< 0) i += L;
            while(i> -1){
                if(this[i]=== what)
                    return i;
                --i;
            }
            return -1;
        },
        map: function(fun, scope){
            var L= this.length, A= Array(this.length), i= 0, val;
            if(typeof fun== 'function'){
                while(i< L){
                    if(i in this){
                        A[i]= fun.call(scope, this[i], i, this);
                    }
                    ++i;
                }
                return A;
            }
        },
        some: function(fun, scope){
            var i= 0, L= this.length;
            if(typeof fun== 'function'){
                while(i<L){
                    if(i in this && fun.call(scope, this[i], i, this))
                        return true;
                    ++i;
                }
                return false;
            }
        }
    }
    for(p in p2){
        if(!ap[p])
            ap[p]= p2[p];
    }
    return true;
})();

はじめに

大学時代から、Java、JavaScript、Pascal、ABAP、PHP、Progress 4GL、C / C ++、そして今は考えられない他のいくつかの言語でプログラミングしてきました。

それらはすべて独自の言語特異性を持っていますが、これらの各言語は同じ基本概念の多くを共有しています。このような概念には、プロシージャ/関数、- IFステートメント、- FORループ、- WHILEループが含まれます。

従来のforループ

従来のforループには3つのコンポーネントがあります。

1. 初期化： Lookブロックが最初に実行される前に実行されます
2. 条件：ループブロックが実行される前に毎回条件をチェックし、falseの場合はループを終了します
3. 後回し：ループブロックが実行された後に毎回実行されます

これらの3つのコンポーネントは、;シンボルによって互いに分離されています。これら3つのコンポーネントそれぞれのコンテンツはオプションです。つまり、以下はfor可能な限り最小のループです。

for (;;) {
    // Do stuff
}

もちろん、ループを実行を停止するには、そのループ内にif(condition === true) { break; } またはを含める必要があります。if(condition === true) { return; }for

ただし、通常、初期化はインデックスを宣言するために使用され、条件はそのインデックスを最小値または最大値と比較するために使用され、後付けはインデックスをインクリメントするために使用されます。

for (var i = 0, length = 10; i < length; i++) {
    console.log(i);
}

従来のforループを使用して配列をループする

配列をループする従来の方法は次のとおりです。

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

または、逆方向にループしたい場合は、次のようにします。

for (var i = myArray.length - 1; i > -1; i--) {
    console.log(myArray[i]);
}

ただし、たとえば次のような多くのバリエーションが可能です。

for (var key = 0, value = myArray[key], length = myArray.length; key < length; value = myArray[++key]) {
    console.log(value);
}

...またはこれ...

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

...またはこれ：

var key = 0, value;
for (; value = myArray[key++];){
    console.log(value);
}

どちらが最適に機能するかは、主に個人的な好みと実装する特定のユースケースの両方の問題です。

これらのバリエーションはすべて、非常に古いブラウザーを含むすべてのブラウザーでサポートされています。

whileループ

forループの代替手段の1つはwhileループです。配列をループするには、次のようにします。

var key = 0;
while(value = myArray[key++]){
    console.log(value);
}

従来のforループと同様に、whileループは最も古いブラウザでもサポートされています。

また、すべてのwhileループはforループとして書き直すことができることに注意してください。たとえば、上記のwhileループは、次のループとまったく同じように動作しますfor。

for(var key = 0; value = myArray[key++];){
    console.log(value);
}

For...in そして for...of

JavaScriptでは、これを行うこともできます。

for (i in myArray) {
    console.log(myArray[i]);
}

ただし、これはforすべての場合において従来のループと同じように動作するわけではなく、考慮する必要のある潜在的な副作用があるため、注意して使用する必要があります。配列の反復で「for ... in」を使用することが悪い考えである理由を参照してください。詳細については。

の代わりにfor...in、も使用できるようになりましたfor...of。次の例は、for...ofループとループの違いを示していfor...inます。

var myArray = [3, 5, 7];
myArray.foo = "hello";

for (var i in myArray) {
  console.log(i); // logs 0, 1, 2, "foo"
}

for (var i of myArray) {
  console.log(i); // logs 3, 5, 7
}

さらに、Internet Explorer のどのバージョンもサポートしておらずfor...of（Edge 12+はサポートしています）、for...in少なくともInternet Explorer 10 が必要であることを考慮する必要があります。

Array.prototype.forEach()

for-loops の代替Array.prototype.forEach()はで、次の構文を使用します。

myArray.forEach(function(value, key, myArray) {
    console.log(value);
});

Array.prototype.forEach() は、すべての最新ブラウザー、およびInternet Explorer 9以降でサポートされています。

図書館

最後に、多くのユーティリティライブラリにも独自のforeachバリエーションがあります。AFAIK、最も人気のある3つは次のとおりです。

jQuery.each()、jQueryで：

$.each(myArray, function(key, value) {
    console.log(value);
});

_.each()、Underscore.jsで：

_.each(myArray, function(value, key, myArray) {
    console.log(value);
});

_.forEach()、Lodash.jsで：

_.forEach(myArray, function(value, key) {
    console.log(value);
});

whileループを使用...

var i=0, item, items = ['one','two','three'];
while(item = items[i++]){
    console.log(item);
}

ログ：「1」、「2」、「3」

そして逆順の場合、さらに効率的なループ

var items = ['one','two','three'], i = items.length;
while(i--){
    console.log(items[i]);
}

ログ：「3」、「2」、「1」

または古典的なforループ

var items = ['one','two','three']
for(var i=0, l = items.length; i < l; i++){
    console.log(items[i]);
}

ログ：「1」、「2」、「3」

リファレンス：http : //www.sitepoint.com/google-closure-how-not-to-write-javascript/

高速ループを簡潔な方法で記述したい場合は、逆に繰り返すことができます。

for (var i=myArray.length;i--;){
  var item=myArray[i];
}

これには、入力する文字数を減らしながら、長さをキャッシュする利点があります（と似ていますがfor (var i=0, len=myArray.length; i<len; ++i)異なりますfor (var i=0; i<myArray.length; ++i)）。

場合によっては、反復中にDOMから項目を削除する予定のライブNodeListを反復するときなど、逆に反復する必要がある場合もあります。

JavaScriptの関数型プログラミングの方法で配列をループするいくつかの使用例：

1.配列をループするだけ

const myArray = [{x:100}, {x:200}, {x:300}];

myArray.forEach((element, index, array) => {
    console.log(element.x); // 100, 200, 300
    console.log(index); // 0, 1, 2
    console.log(array); // same myArray object 3 times
});

注：Array.prototype.forEach（）は厳密には機能的な方法ではありません。入力パラメーターとして使用する関数は値を返すことを想定していないため、純粋な関数と見なすことはできません。

2.配列の要素のいずれかがテストに合格するかどうかを確認します

const people = [
    {name: 'John', age: 23}, 
    {name: 'Andrew', age: 3}, 
    {name: 'Peter', age: 8}, 
    {name: 'Hanna', age: 14}, 
    {name: 'Adam', age: 37}];

const anyAdult = people.some(person => person.age >= 18);
console.log(anyAdult); // true

3.新しい配列に変換する

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray= myArray.map(element => element.x);
console.log(newArray); // [100, 200, 300]

注：map（）メソッドは、呼び出し元の配列のすべての要素で提供された関数を呼び出した結果を含む新しい配列を作成します。

4.特定のプロパティを合計し、その平均を計算します

const myArray = [{x:100}, {x:200}, {x:300}];

const sum = myArray.map(element => element.x).reduce((a, b) => a + b, 0);
console.log(sum); // 600 = 0 + 100 + 200 + 300

const average = sum / myArray.length;
console.log(average); // 200

5.元の配列に基づいて、変更せずに新しい配列を作成します

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray= myArray.map(element => {
    return {
        ...element,
        x: element.x * 2
    };
});

console.log(myArray); // [100, 200, 300]
console.log(newArray); // [200, 400, 600]

6.各カテゴリの数を数える

const people = [
    {name: 'John', group: 'A'}, 
    {name: 'Andrew', group: 'C'}, 
    {name: 'Peter', group: 'A'}, 
    {name: 'James', group: 'B'}, 
    {name: 'Hanna', group: 'A'}, 
    {name: 'Adam', group: 'B'}];

const groupInfo = people.reduce((groups, person) => {
    const {A = 0, B = 0, C = 0} = groups;
    if (person.group === 'A') {
        return {...groups, A: A + 1};
    } else if (person.group === 'B') {
        return {...groups, B: B + 1};
    } else {
        return {...groups, C: C + 1};
    }
}, {});

console.log(groupInfo); // {A: 3, C: 1, B: 2}

7.特定の基準に基づいて配列のサブセットを取得する

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray = myArray.filter(element => element.x > 250);
console.log(newArray); // [{x:300}] 

注：filter（）メソッドは、提供された関数によって実装されたテストに合格したすべての要素を含む新しい配列を作成します。

8.配列をソートする

const people = [
  { name: "John", age: 21 },
  { name: "Peter", age: 31 },
  { name: "Andrew", age: 29 },
  { name: "Thomas", age: 25 }
];

let sortByAge = people.sort(function (p1, p2) {
  return p1.age - p2.age;
});

console.log(sortByAge);

9.配列の要素を見つける

const people = [ {name: "john", age:23},
                {name: "john", age:43},
                {name: "jim", age:101},
                {name: "bob", age:67} ];

const john = people.find(person => person.name === 'john');
console.log(john);

Array.prototype.find（）メソッドは、指定されたテスト関数を満たす配列の最初の要素の値を返します。

参考文献

• Array.prototype.some（）
• Array.prototype.forEach（）
• Array.prototype.map（）
• Array.prototype.filter（）
• Array.prototype.sort（）
• スプレッド構文
• Array.prototype.find（）

ループに暗黙のスコープがほとんどなく、余分な変数を排除する方法があります。

var i = 0,
     item;

// note this is weak to sparse arrays or falsey values
for ( ; item = myStringArray[i++] ; ){ 
    item; // This is the string at the index.
}

または、本当にidを取得し、本当に古典的なforループを作りたい場合：

var i = 0,
    len = myStringArray.length; // cache the length

for ( ; i < len ; i++ ){
    myStringArray[i]; // Don't use this if you plan on changing the length of the array
}

最近のブラウザすべてのサポートイテレータ方法forEach、map、reduce、filterと上の他の方法のホスト配列のプロトタイプ。

JavaScriptで配列をループするには、さまざまな方法があります。

一般的なループ：

var i;
for (i = 0; i < substr.length; ++i) {
    // Do something with `substr[i]`
}

ES5のforEach：

substr.forEach(function(item) {
    // Do something with `item`
});

jQuery.each：

jQuery.each(substr, function(index, item) {
    // Do something with `item` (or `this` is also `item` if you like)
});

見ていこの詳細については、またはあなたもチェックすることができMDNを JavaScriptで配列をループ＆jQueryのチェック使用のためにそれぞれのjQueryのを。

underscore.jsライブラリを使用することを徹底的にお勧めします。配列/コレクションを反復処理するために使用できるさまざまな関数を提供します。

例えば：

_.each([1, 2, 3], function(num){ alert(num); });
=> alerts each number in turn...

配列ループ：

for(var i = 0; i < things.length; i++){
    var thing = things[i];
    console.log(thing);
}

オブジェクトループ：

for(var prop in obj){
    var propValue = obj[prop];
    console.log(propValue);
}

はい、JavaScriptでもループを使用して同じことができますが、これに限定されません。JavaScriptで配列をループする方法はたくさんあります。以下にこの配列があり、それに対してループを実行したいとします。

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

これらは解決策です：

1）forループ

forループは、JavaScriptで配列をループする一般的な方法ですが、ない大規模な配列のための最速の解決策として考え：

for (var i=0, l=arr.length; i<l; i++) {
  console.log(arr[i]);
}

2）whileループ

whileループは、長い配列をループする最も速い方法と考えられていますが、通常、JavaScriptコードではあまり使用されていません。

let i=0;

while (arr.length>i) {
    console.log(arr[i]);
    i++;
}

3）
A do whileがwhile以下のようないくつかの構文の違いと同じことをしている間に行います：

let i=0;
do {
  console.log(arr[i]);
  i++;
}
while (arr.length>i);

これらはJavaScriptループを実行する主な方法ですが、それを実行する方法がいくつかあります。

またfor in、JavaScriptでオブジェクトをループするためにループを使用します。

また見てmap()、filter()、reduce()JavaScriptで配列に、などの機能。彼らは、より速く、より良い使用するよりもはるかに物事を行うことwhileとfor。

これは、JavaScriptの配列に対する非同期関数について詳しく知りたい場合に適した記事です。

最近、関数型プログラミングは、開発の世界で大きな飛躍を遂げています。そして正当な理由のために：関数型テクニックは、一目で理解しやすく、リファクタリングし、そしてテストする、より宣言的なコードを書くのに役立ちます。

関数型プログラミングの基礎の1つは、リストとリスト操作の特別な使用です。そして、それらはまさにそれらがどのように聞こえるかということです：物事の配列、そしてあなたがそれらに対して行うこと。ただし、機能的な考え方では、予想とは少し異なる方法でそれらを扱います。

この記事では、私が「3つの大きな」リスト操作と呼んでいるもの、つまりマップ、フィルター、およびリデュースについて詳しく見ていきます。これら3つの関数に頭を回すことは、クリーンな関数型コードを記述できるようになるための重要なステップであり、関数型プログラミングと反応型プログラミングの非常に強力な手法への扉を開きます。

また、forループを再度作成する必要がないことも意味します。

>>もっと読むこちら：

配列の反復に使用できる複数のメカニズムのパフォーマンス面に関心がある場合は、次のJSPerfテストを用意しました。

https://jsperf.com/fastest-array-iterator

結果：

従来のfor()イテレータは、特に配列の長さをcachedで使用した場合、断然最速の方法です。

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

for(let i=0, size=arr.length; i<size; i++){
    // Do something
}

Array.prototype.forEach()およびArray.prototype.map()方法は、おそらくの結果として、最も遅い近似である関数呼び出しのオーバーヘッド。

jQueryライブラリを使用している場合は、http：//api.jquery.com/jQuery.each/の使用を検討して ください

ドキュメントから：

jQuery.each( collection, callback(indexInArray, valueOfElement) )

戻り値： オブジェクト

説明： オブジェクトと配列の両方をシームレスに反復するために使用できる汎用の反復関数。配列および長さプロパティを持つ配列のようなオブジェクト（関数の引数オブ​​ジェクトなど）は、0から長さ-1までの数値インデックスによって反復されます。その他のオブジェクトは、名前付きプロパティを介して繰り返されます。

この$.each()関数は$(selector).each()、jQueryオブジェクトに対して排他的に反復するために使用されるとは異なります。この$.each() 関数は、マップ（JavaScriptオブジェクト）でも配列でも、コレクションの反復処理に使用できます。配列の場合、コールバックには配列インデックスと対応する配列値が毎回渡されます。（値はthisキーワードを介してアクセスすることもできますが、JavaScriptは単純な文字列または数値の値であっても常にthis値をラップしObjectます。）メソッドは最初の引数、反復されたオブジェクトを返します。

私はこのバリエーションをまだ見ていません。私が個人的に一番気に入っているバリエーションは次のとおりです。

与えられた配列：

var someArray = ["some", "example", "array"];

lengthプロパティにアクセスすることなくループできます：

for (var i=0, item; item=someArray[i]; i++) {
  // item is "some", then "example", then "array"
  // i is the index of item in the array
  alert("someArray[" + i + "]: " + item);
}

このJsFiddleはそれを証明する参照してください。http://jsfiddle.net/prvzk/

これは、スパースでない配列に対してのみ機能します。配列の各インデックスに実際に値があることを意味します。ただし、実際にはJavaScriptでスパース配列を使用することはほとんどないことがわかりました。そのような場合、通常、オブジェクトをマップ/ハッシュテーブルとして使用する方がはるかに簡単です。スパース配列があり、0 .. length-1でループしたい場合は、for（var i = 0; i <someArray.length; ++ i）構成が必要ですがif、ループの内側が必要です。現在のインデックスの要素が実際に定義されているかどうかを確認します。

また、CMSが以下のコメントで言及しているように、これは偽の値を含まない配列でのみ使用できます。例の文字列の配列は機能しますが、空の文字列、または0またはNaNである数値などがある場合、ループは途中で中断します。繰り返しになりますが、これは私にとってほとんど問題になりませんが、覚えておく必要があることです。そのため、このループを使用する前に検討する必要があります。

このループについて私が好きなのは：

• 書くのは短い
• 長さプロパティにアクセスする必要はありません（キャッシュはもちろん）
• アクセスする項目は、選択した名前でループ本体内に自動的に定義されます。
• リスト/スタックのような配列を使用するために、array.pushおよびarray.spliceと非常に自然に組み合わせる

これが機能する理由は、配列の仕様により、インデックスから項目を読み取るときに、配列の長さ> =が定義されていない値を返すことが義務付けられているためです。このような場所に書き込むと、実際には長さが更新されます。

私にとって、この構造は、私が愛するJava 5構文を最も厳密にエミュレートします。

for (String item : someArray) {
}

...ループ内の現在のインデックスについても知るという追加の利点

プロトタイプのプロパティを含まず、独自のオブジェクトプロパティのみを反復処理するメソッドがあります。

for (var i in array) if (array.hasOwnProperty(i)) {
    // Do something with array[i]
}

しかし、それでもカスタム定義のプロパティを繰り返し処理します。

JavaScriptでは、配列を含む任意のオブジェクトに任意のカスタムプロパティを割り当てることができます。

疎な配列を反復したい場合はfor (var i = 0; i < array.length; i++) if (i in array)、array.forEachwith es5shimを使用する必要があります。

JavaScriptでこれを行うにはいくつかの方法があります。最初の2つの例はJavaScriptサンプルです。3つ目は、JavaScriptライブラリ、つまり、.each()関数を使用するjQueryを利用します。

var myStringArray = ["hello", "World"];
for(var i in myStringArray) {
  alert(myStringArray[i]);
}

var myStringArray = ["hello", "World"];
for (var i=0; i < myStringArray.length; i++) {
  alert(myStringArray[i]);
}

var myStringArray = ["hello", "World"];
$.each(myStringArray, function(index, value){
  alert(value);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

最もエレガントで速い方法

var arr = [1, 2, 3, 1023, 1024];
for (var value; value = arr.pop();) {
    value + 1
}

http://jsperf.com/native-loop-performance/8

編集（間違っていたため）

100000項目の配列をループする方法を比較し、毎回新しい値で最小限の操作を行います。

• http://jsben.ch/#/BQhED

準備：

<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script>
    Benchmark.prototype.setup = function() {
        // Fake function with minimal action on the value
        var tmp = 0;
        var process = function(value) {
            tmp = value; // Hold a reference to the variable (prevent engine optimisation?)
        };

        // Declare the test Array
        var arr = [];
        for (var i = 0; i < 100000; i++)
            arr[i] = i;
    };
</script>

テスト：

<a href="http://jsperf.com/native-loop-performance/16" 
   title="http://jsperf.com/native-loop-performance/16"
><img src="http://i.imgur.com/YTrO68E.png" title="Hosted by imgur.com" /></a>

最適化されたアプローチは、配列の長さをキャッシュし、単一のvarキーワードを使用してすべての変数を初期化する単一のvarパターンを使用することです。

var i, max, myStringArray = ["Hello","World"];
for (i = 0, max = myStringArray.length; i < max; i++) {
    alert(myStringArray[i]);
   //Do something
}

反復の順序が逆ループを試すよりも重要でない場合は、オーバーヘッドの条件のテストを減らし、デクリメントが1つのステートメントで行われるため、最も高速です。

var i,myStringArray = ["item1","item2"];
for (i =  myStringArray.length; i--) {
    alert(myStringArray[i]);
}

whileループを使用するか、より良く、よりクリーン：

var myStringArray = ["item1","item2"],i = myStringArray.length;
while(i--) {
   // do something with fruits[i]
}

JavaScriptでは、配列をループするための非常に多くのソリューションがあります。

以下のコードは人気のあるコードです

/** Declare inputs */
const items = ['Hello', 'World']

/** Solution 1. Simple for */
console.log('solution 1. simple for')

for (let i = 0; i < items.length; i++) {
  console.log(items[i])
}

console.log()
console.log()

/** Solution 2. Simple while */
console.log('solution 2. simple while')

let i = 0
while (i < items.length) {
  console.log(items[i++])
}

console.log()
console.log()

/** Solution 3. forEach*/
console.log('solution 3. forEach')

items.forEach(item => {
  console.log(item)
})

console.log()
console.log()

/** Solution 4. for-of*/
console.log('solution 4. for-of')

for (const item of items) {
  console.log(item)
}

console.log()
console.log()

jQueryを使用したい場合は、ドキュメントにすばらしい例があります。

 $.each([ 52, 97 ], function( index, value ) {
      alert( index + ": " + value );
 });

私の考えでは、Array.forEach関数を使用するのが最善の方法です。それを使用できない場合は、MDNからポリフィルを入手することをお勧めします。それを使用可能にするために、JavaScriptで配列を反復処理するのは確かに最も安全な方法です。

Array.prototype.forEach（）

他の人が示唆しているように、これはほとんど常にあなたが望むものです：

var numbers = [1,11,22,33,44,55,66,77,88,99,111];
var sum = 0;
numbers.forEach(function(n){
  sum += n;
});

これにより、配列の処理のスコープで必要なものはすべてそのスコープ内にとどまり、配列の値のみが処理され、オブジェクトのプロパティや他のメンバーは処理されないことが保証されますfor ..。

通常のCスタイルのforループの使用は、ほとんどの場合機能します。ループ内のすべてがプログラムの残りの部分とスコープを共有することを覚えておくことは重要です。{}は新しいスコープを作成しません。

したがって：

var sum = 0;
var numbers = [1,11,22,33,44,55,66,77,88,99,111];

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

alert(i);

「11」が出力されます-これは、あなたが望むものかもしれないし、そうでないかもしれません。

動作するjsFiddleの例：https ://jsfiddle.net/workingClassHacker/pxpv2dh5/7/

100％同一ではありませんが、類似しています。

   var myStringArray = ['Hello', 'World']; // array uses [] not {}
    for (var i in myStringArray) {
        console.log(i + ' -> ' + myStringArray[i]); // i is the index/key, not the item
    }

たとえば、Firefoxコンソールで使用しました。

[].forEach.call(document.getElementsByTagName('pre'), function(e){ 
   console.log(e);
})

var x = [4, 5, 6];
for (i = 0, j = x[i]; i < x.length; j = x[++i]) {
    console.log(i,j);
}

かなりクリーナー...

短い答え：はい。あなたはこれで行うことができます：

var myArray = ["element1", "element2", "element3", "element4"];

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

ブラウザコンソールでは、「element1」、「element2」などが印刷されているのがわかります。

次のいずれかを使用できますArray.prototype.forEach(...)。

var arr = ["apple", "banana", "cherry", "mango"];
arr.forEach((item, index)=>{
   //Some code...
});

またはArray.prototype.map(...)：

var arr = ["apple", "banana", "cherry", "mango"];
arr.map((item, index)=>{
   //Some code...
});

または、前述のjqueryまたはforループの方法。