JavaScriptのループを使用する方法を学ぶ

TLRこの記事ではJavaScriptに存在する様々なループ構造を教えます.

繰り返し/ループ
時々私たちはそれらをループする必要がある構造を持っています.私たちが意味するのは、私たちは、その構成のすべての単一の項目を見て、何かをしたいということです.以下にアプリケーションの一部を示します:

すべての項目を表示します.非常に一般的なアプリケーションは、リスト内のすべての項目を視覚的に表示することです.一般的な例は、電子商取引サイト上のカート内のすべての項目を表示するので、あなたが購入するかを見ることができます.あるリスト内のすべてを表示するに役立つ多くのループの構造がありますfor , for/in , for/of 名前を付ける.あなたは、記事でさらに下にどのように異なるかについてもっと学びます.

マップ.マッピングは、構造体を反復処理し、フォームから別のフォームに変更することです.通常、あなたが持っているデータが次のステップに対して準備ができていない場合は、この操作を行います.次のステップは、データを表示することができますし、データオブジェクトから何かより多くのpresentableに変更したい.

減らす.あなたがデータを減らすとき、あなたは1つのフォームから縮小された形に行きます.では、どういう意味ですか?それは、注文項目のリストの代わりに、何か面白いもの、例えばアイテムの合計金額までそれらを減らすことを意味します.

アイテムを反復する
アイテムを反復するには、あなたに利用できる多くの構成があります.簡単に始めましょうfor-loop . 以下のように構成されている.

for(<start condition>; <break condition>; <incremental phase> ) {

}

ループを次の段階で定義する

開始条件.開始条件では、ループ値を特定の値に初期化しますlet i=0; .

ブレークコンディション.次に、ブレーク条件を定義します.このとき、実行されると、次の繰り返しからループを停止しますi< 5 .

増加段階.最後に、ループ変数をどれだけ増やすかを定義します.

典型的なfor-loop 以下のようになります.

for (let i =0; i < 5; i++) {

}

変数名を付けるのが一般的ですi , インデックス、すなわちループ内の現在位置.このような記述的な名前を与える方が良いでしょう.

for (let position =0; position < cart.length; position++) {

}

NOTE, I'm using let to ensure we have block scope, so that position seize to exist after the loop is done. var will NOT give you block scope and leaks outside of the loop.

// DON'T

for (var position =0; position < cart.length; position++) {

}

// position is still alive here

フォーインFor-in 最も誤解されたループの一つです.私は、人々が使用を言う多くの会話を聞きましたfor-of 理由でなく、理由.それで、何が起こっているか説明しましょう.For-in オブジェクトの属性を一覧表示します.以下のコードの意味を示しましょう.

let object = {
  name: 'chris',
  city: 'London'
};

for (let prop in object) {
  console.log(prop)
}

// name, city

問題は、以下のようにして配列で使用できると思います.

let array = [1, 2, 3];

for (let prop in array) {
  console.log(prop)
} 

// '0', '1', '2'

あなたは領域ではなく、インデックスの値を取得していません.あなたがこれに驚いているならば、あなたはJavaScriptのほとんどのものが実際にオブジェクトであるということを知っていなければなりません.次のコードを考えます.

typeof [1,2,3] // 'object'

それはあなたがオブジェクトを扱っていることを伝えます.つまり、あなたの配列はフードの下に見えます.

{
  "0": 1,
  "1": 2,
  "2": 3
}

また、配列上で同様に動作するメソッドもありますObject.keys() . 次のコードは、for-in :

Object.keys([1,2,3]) // ['0', '1', '2']

NOTE, for-in and Object.keys() have similar area of application and operates on the keys/attributes.

値の取得
値が必要なものならば、いくつかのオプションがあります.

Object.values([1,2,3]) // 1, 2, 3

また、for-of ループ:

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

// 1,2,3

または、あなたはforEach() , 以下のような配列のメソッドです.

let arr = [1,2,3];

arr.forEach((item, number, array) => console.log(item))

NOTE, you can't use a break statement to stop an iteration using a forEach(). If you might need to break a loop, consider using a normal for construct.

データの変更
これまでのところ、すべてのデータを繰り返し処理する方法を見てきましたが、変更されていません.それを繰り返している間、データを変更することができます.データを変更する方法に応じて2つの構造を得たmap() and reduce() .

マップmap() は配列データ構造体の関数です.アイデアは、配列内のすべての項目を反復し、その項目を新しいものに変更することです.これは、オブジェクトの特定のプロパティに興味を持っているか、データモデルから変更可能なビューモデルに変更する必要があります.
例を見てみましょう.

let heroes = [{
  name: 'Xena',
  country: 'Greece'
}, {
  name: 'Alexander the Great',
  country: 'Macedonia'
}]

let onlyTheName = heroes.map(hero => {
  return hero.name;
});

// can also be written as: let onlyTheName = heroes.map(hero => hero.name)

onlyTheName.forEach(name => console.log(name)) // ['Xena', 'Alexander the Great']

上記の例では、配列を反復処理し、属性を取り出しますname あなたが興味があること.

減らす
The reduce() 関数と同じようにmap() が配列データ構造体にある.また、すべての項目を変更しようとするが、重要な区別があります.reduce() 項目の操作を実行し、結果を前の結果に追加します.これによりreduce() たとえば、すべてのカート項目の合計を取得する場合、または1つにオブジェクトのCETをマージしたい場合に使用する良い候補.これらの両方の例を見てみましょう.

let arr = [1,2,3,4];
let sum = arr.reduce((prev, curr) => prev + curr, 0)
// sum: 10

上記のreduce() メソッドをコールバックに渡します.prev , 前の結果とcurr 配列の現在の項目として.コールバックはprev + curr . 2番目の引数reduce() は初期値をとる.最終結果は10 , すべての値が合計.この2番目の例を考えてみましょうreduce() 本当にです.

let objects = [{
  name: 'Xena'
}, {
  country: 'Greece'
}]
let mergedObject = objects.reduce((prev, curr) => {
  return {
    ...prev,
    ...curr
  }
}, {})

// { name: 'Xena', country: 'Greece' }

概要
私はJavaScriptのあなたの処分でかなりのループ構造があることを示しました.彼らは別のことをして、彼らはあなたが非常に効率的にすることができます正しく使用されます.使用を恐れる理由はないfor-in 今、あなたはそれが何を知っているfor-of おそらくあなたは何をしたいです.追加を考慮するmap() or reduce() あなたがすでに持っていないならば、あなたのツールベルトに.