……のためにの

かなりの間、私は完全に間の違いを理解するために苦労しているfor...in and for...of . あなたがGoogleまたはdev . Feedを通してこれを見つけたならば、私はあなたがおそらく同じことを不思議に思っていると安全に仮定することができます.for...in and for...of はfor 我々がすべてに精通しているループ.しかしfor...in and for...of あなたが探しているものによって異なる場面で使用されますfor ループ我々は基本的に任意の状況で使用することができます知っているループ.
私たちは最初に例/使用について行きます、そして、我々は彼らの各々を壊します.

例/用法

for

const arr = [1, 2, 3, 4, 5]

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

console.log(printArr(arr));

// 1
// 2
// 3
// 4
// 5

…イン

const obj = { a: 1, b: 2, c: 3 }

function printObj(obj) {
  for (let prop in obj) {
    console.log(`prop: ${prop}`)
    console.log(`obj[prop]: ${obj[prop]}`)
  }
}

console.log(printObj(obj));

// prop: a
// obj[prop]: 1
// prop: b
// obj[prop]: 2
// prop: c
// obj[prop]: 3

…of

const arrOf = [1, 2, 3, 4, 5]

function printArrOf(arr) {
  for (let ele of arr) {
    console.log(ele);
  }
}

console.log(printArrOf(arrOf));

// 1
// 2
// 3
// 4
// 5

今、彼らはどのように使用されて見て、それらを1つずつブレークしましょう!

親愛なる親友、for声明

この基本for ループはいつでも何かで反復を必要とするときに使用することができます.
基本構文

for ([initialization]; [condition]; [final-expression]) {
  statement
}

反復は通常、block ( a . k . a{} ). 実行中のループの中に複数の文を入れます.お使い下さいbreak , continue , を継続したり中断したりするfor 条件に基づいてループ.
例break

for (let i = 0;; i++) {
  console.log(i);
  if (i > 5) break;
}

// Expected Output: 
// 0
// 1
// 2
// 3
// 4
// 5
// 6

// Explanation: The loop breaks when i is larger than 5.

クイック注:括弧内のすべての式はオプションです.
例continue

for (let i = 0; i < 10; i++) {
  if (i === 7) continue;
  else console.log(i);
}

// Expected Output:
// 0
// 1
// 2
// 3
// 4
// 5
// 6
// 8
// 9

// Explanation: if i is equal to 7, we will skip that i and move on to the next index.

…主人公螺1

for...in ループは、オブジェクトのすべての列挙可能なプロパティを繰り返します.
何が数えられるかわからないなら、私はそれが何であるかを説明するために最善を尽くします.基本的にあなたは数え切れないほどの財産を考えることができますkey オブジェクトのキー値ペアの.また、それはObject.keys() メソッド.それで、我々が上のセクションから我々の例を見るならば.

const obj = { a: 1, b: 2, c: 3 }

function printObj(obj) {
  for (let prop in obj) {
    console.log(`prop: ${prop}`)
    console.log(`obj[prop]: ${obj[prop]}`)
  }
}

console.log(printObj(obj));

// prop: a
// obj[prop]: 1
// prop: b
// obj[prop]: 2
// prop: c
// obj[prop]: 3

prop はkey キー値ペアで、それは我々の列挙可能なプロパティです.オブジェクトの値を取得する方法について基本的な理解がある場合は、キーのようなインデックスを配列で扱い、四角括弧に入れますobj[prop] , このように.

const obj = { 
  name: "Megan", 
  age: "do the Math", 
  role: "front-end developer" 
}

for (const property in obj) {
  console.log(property);
}

// Expected Output:
// name
// age
// role

これまでのところ、私たちの例はすべてオブジェクトにあります{} (配列もオブジェクトとして使用されています)for...in インデックスの順序が重要な配列を繰り返します.
配列インデックスも列挙可能なプロパティですが整数です.我々が使うならば、それは全く予想外に動きますfor...in 配列を反復する要素が特定の順序で繰り返されることは保証されません.また、配列の現在のサイズを超えたインデックスに代入して配列を拡張する場合は、正しいインデックスを反映しません.したがって、for...of , forEach , or for 数値インデックスを持つループは、配列を反復するより良い方法です.下記のこの記事で示される例をチェックしてください👇🏻
さらに読みます.

3 Reasons Why You Shouldn’t Use “for…in” Array Iterations in JavaScript ヨハネスボームによって

…主人公螺2

さて、ここに2人目の主人公がいます.for...of . あなたが知らない場合はfor...of はES 6で導入される.for...of JavaScript開発者の多くの有用な反復方法となっています.for...of はiterableオブジェクトを反復処理できる.あなたはそれを名前します.String , Array , Object ...
文字列

const name = "Megan";

for (const alphabet of name) {
  console.log(alphabet);
}

// Expected Output:
// M
// e
// g
// a
// n 

array (例のセクションからコピー)

const arrOf = [1, 2, 3, 4, 5]

function printArrOf(arr) {
  for (let ele of arr) {
    console.log(ele);
  }
}

// Expected Output:
// 1
// 2
// 3
// 4
// 5

助けを借りてObject.entries() )

const obj = {
  name: "Megan", 
  age: "do the Math", 
  role: "front-end developer" 
};

for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
  console.log(`${key}: ${value}`);
}

// Expected Output:
// name Megan
// name: Megan
// age do the Math
// age: do the Math
// role front-end developer
// role: front-end developer

// Explanation: the [key, value] is a destructure of the result from Object.entries.

🐧 サイドバーノート🐧Object.entries() 与えられたオブジェクトの自身の列挙可能なストリングキーつきのプロパティの配列を返します.

const obj = {
  name: "Megan", 
  age: "do the Math", 
  role: "front-end developer" 
};

Object.entries(obj)
// [
//  [ 'name', 'Megan' ],
//  [ 'age', 'do the Math' ],
//  [ 'role', 'front-end developer' ]
// ]

さらに読みます.

Demystifying the ES6 ‘for-of’ Loop ダニエルJungによって

Why for...of Loop in JavaScript is a Gem

いつ使用するのですか。😯

このセクションの目的は、これらの2つに置かれますfor ステートメント“側バイサイド”ので、我々は比較することができます.
以下に簡単な方法を示します:
⭐️ 用途for...in オブジェクトの列挙可能な文字列付きのプロパティペアを反復する場合.あなたは知っている{ blah1: blah blah, blah2: blah blah blah } . ではなくARRAY !! ログの内容は、配列のインデックスのログのようになりますが、文字列なので、値をログ/リターンしたい場合は、obj[key] .
⭐️ 用途for...of iterableオブジェクトを反復処理する場合:String , Array , など
さらに読みます.

Difference between for...of and for...in MDNによって

次回は、反復を必要とする何かに取り組んでいる、またはちょうどあなたの定期的なLeetCodeの練習を行うか、さらに良い…!あなたの技術のインタビューでは、あなたの新しく得た知識を披露for...of and for...in .
最後であるが、少なくとも...ハッピーコーディング!