Arayサイクルfor、for in、for of、forEachの各間の優劣

5132 ワード

javascript先端

JavaScriptには、多くの循環型Arayの方式がありますが、彼らの微妙な違いと適用シーンがよく分かりません.本文は各間の長所と短所を詳しく整理し、比較のために表に整理する.
ループ
アクセス可能なelement
アクセス可能index
反復可能なproperty
サポート中断
await対応
任意の位置からの開始をサポートします.
for
√
√
×
√
√
√
for in
√
×
√
√
√
×
forEach
√
√
×
×
×
×
for of
√
√
×
√
√
×
サンプルアドレス
for(ES 1)
このサイクルは歴史が古く、ECMAScript 1からサポートされています.

const arr = ['a', 'b', 'c'];
arr.prop = 'property value';

for (let index=0; index < arr.length; index++) {
  const elem = arr[index];
  console.log(index, elem);
}

// Output:
// 0, 'a'
// 1, 'b'
// 2, 'c'

for循環方式は共通であり、反復プロセスは要素および現在の要素の下付き索引にアクセスすることができるが、文法的にはやや冗長である.
for in(ES 1)for inの歴史はforと同じくらい長いです.

const arr = ['a', 'b', 'c'];
arr.prop = 'property value';

for (const key in arr) {
  console.log(key);
}

// Output:
// '0'
// '1'
// '2'
// 'prop'

for inは、循環配列に対して適切な選択ではない.

反復は属性keyであり、値

ではない.

は、属性keyが文字列であるため、反復された要素インデックスはstringであり、numberではない.

反復は、配列インスタンス上のすべてのエニュメレート・属性keyであり、配列内の要素ではない.

オブジェクトのすべてのエニュメレート・属性(プロトタイプチェーンを含む)を取得したいなら、for inは、オブジェクト自身の宣言の属性だけなら、それよりも適切である.
forEach(ES 5)Object.keysおよびforは、特にfor-inを循環するのに適していないと考えられるので、ECMAScript 5に補助方法を導入した:Arrays.

const arr = ['a', 'b', 'c'];
arr.prop = 'property value';

arr.forEach((elem, index) => {
  console.log(elem, index);
});

// Output:
// 'a', 0
// 'b', 1
// 'c', 2

この方法は非常に便利で、多すぎることをする必要はなく、配列要素および配列要素の下にアクセスできるようにします.矢印関数(ES 6に導入されます.)は、この方法を文法的により優雅にします.Array.prototype.forEachは主に次のように決定されている.

循環内部はforEach操作をサポートしていません.

あなたが欲しい要素が見つかっても、サイクルを中断することはできません.
中断サイクルを達成するためには、同期に導入されたawait方法が使用されてもよく、Array.prototype.sameは、すべてのsome要素を巡回し、真の値を戻したときに停止する.

const arr = ['red', 'green', 'blue'];
arr.some((elem, index) => {
  if (index >= 2) {
    return true; //    
  }
  console.log(elem);
  //        undefined，    
});

// Output:
// 'red'
// 'green'

for of(ES 6)Arrayは、ECMAScript 6に新しく導入された文法である.

const arr = ['a', 'b', 'c'];
arr.prop = 'property value';

for (const elem of arr) {
  console.log(elem);
}
// Output:
// 'a'
// 'b'
// 'c'

for ofは、巡回配列に適しています.

すべての配列要素

を反復する.

内部サポートfor of、またはawaitに導入されたES2018文法

は、breakとcontinueを使用してサイクル

から飛び出すことができます.for-await-ofのもう一つの利点は、配列を巡回するだけでなく、任意の反復可能なオブジェクト(例えば、map)を巡回することができることである.

const myMap = new Map()
  .set(false, 'no')
  .set(true, 'yes')
;
for (const [key, value] of myMap) {
  console.log(key, value);
}

// Output:
// false, 'no'
// true, 'yes'

for-ofを経ると、「key、value」ペアが生成され、直接アクセスが容易に構成されている.
ループ内で現在の要素インデックスを感知する必要がある場合、myMap方法Arrayを通じて反復可能な「index,value」ペアを返します.mapと同様の解決策で直接index、valueにアクセスします.

const arr = ['chocolate', 'vanilla', 'strawberry'];

for (const [index, value] of arr.entries()) {
  console.log(index, value);
}
// Output:
// 0, 'chocolate'
// 1, 'vanilla'
// 2, 'strawberry'

循環体内awaitテスト
循環体entriesをテストするコードを用意し、awaitは遠隔サービスの遅延をシミュレーションしてリターンする.

const fruits = ["apple", "grape", "pear"];

const sleep = (ms) => {
  return new Promise((resolve) => setTimeout(resolve, ms));
};

const getFruit = (fruit) => {
  return sleep(2000).then((v) => fruit);
};

まずgetFruitを見て、要素間は予想される間隔で出力される.

(async function(){
    console.log('start');
    for (fruit of fruits) {
        const element = await getFruit(fruit);
        console.log(element);
    }
    console.log('start');
})();

//3      2s  
"start"
"apple"
"grape"
"pear"
"end"

for ofを参照してください.forEachが呼び出した後、直接に出力loop endに戻り、2 s間隔で後の結果を同時に出力しました.予想通りの間隔で出力していません.

(async function () {

  console.log("foreach loop start ....");
  fruits.forEach(async value => {
    const element = await getFruit(value);
    console.log(element);
  });
  console.log("foreach loop end ....");

})();

//    
foreach loop start ....
foreach loop end ....
//  2s        3 
apple
grape
pear

サンプルアドレス

このようにプロモーションを理解します