es6 の新しいループとは何ですか?

es6 には、新しいループ ステートメント「for of」ループがあります。 「for..of」ステートメントはオブジェクト全体をループでき、反復子によって生成される一連の値のループです。「for..of」ループの値は反復可能 (iterable) である必要があります。構文「for(配列の現在値){...}」。 for-of ループは配列をサポートするだけでなく、ほとんどの配列のようなオブジェクトもサポートします。また、文字列のトラバースもサポートし、文字列を一連の Unicode 文字としてトラバースします。

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

これまでは、for ループと for in ループがありましたが、ES6 には新しいループがあります: for of ループ: オブジェクト全体を走査 (反復、ループ) します。

for..of

ES6 は、反復子によって生成される新しい for..of ループを追加します。一連の値に対するループ。 for..ofループの値は iterable である必要があります。

var a = ["a", "b","c","d","e"]
for(var idx in a){
    console.log(idx)
}
// 0 1 2 3 4
for(var val of a){
    console.log(val)
}
// a b c d e

for..in配列 a、for..ofina のキー/インデックスをループします。ループ値を超えています。 [関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]

<span style="font-size: 18px;">ES6</span>コードの前

var a = ["a", "b","c","d","e"]
for(var val, ret, it = a[Symbol.iterator]();(ret=it.next()) && !ret.done){
    val = ret.value
    console.log(val)
}
// a b c d e

一番下で、for..of ループが iterable からイテレータを要求し、このイテレータを繰り返し呼び出して値を割り当てます。ループに反復変数を与えます。

JavaScriptデフォルトで反復可能な標準の組み込み値には、次のものが含まれます:

• Array
• Strings
• Generators
• Collections/TypedArrays

##Strings 反復メソッド

for(var c of "hello"){
    console.log(c)
}
// h e l l o

ネイティブ文字列値は、iterable

## である同等の String カプセル化オブジェクトにキャストされます。 for(XYZ of ABC)<span style="font-size: 18px;"></span>

XYZ の場合、この位置は代入式またはステートメントのいずれかになります。代入式の例を見てみましょう。

var o = {}
for(o.a of [1,2,3]){
    console.log(o.a)
}
o // {a:3}
for({x:o.a} of [{x:1},{x:2},{x:3}]){
    console.log(o.a)
}
o // {a:3}

break、 continue、return を通じてループを早期に終了します。

カスタム イテレータ

基礎となる層の理解を通じて、

for..of から iterable# へ##反復子を要求し、この反復子を繰り返し呼び出して、生成された値をループ反復変数に割り当てます。次に、iterable をカスタマイズできます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>var o = { [Symbol.iterator](){ return this }, next(){ if(!val){ val = 1 }else{ val ++ } return {value:val, done:val== 6} } } for(var val of o[Symbol.iterator]()){ console.log(val) }</pre><div class="contentsignin">ログイン後にコピー</div></div> カスタム イテレータは

[Symbol.iterator]

属性という 2 つの条件を満たしており、返されたオブジェクトには next メソッド があることがわかります。 next メソッドの戻り値は、{value:xx,done:xx} の形式である必要があります。done:true が見つかった場合、ループは終了します。 結論: 上記は、反復可能なオブジェクトをループできる for..of ループの内容全体です。

知識の拡大: for-of を導入する理由は何ですか?

この質問に答えるために、まず ES6 より前の 3 つの for ループの欠点を見てみましょう:

forEach は中断して返せない;

• for-in の欠点はさらに明白で、配列内の要素を走査するだけでなく、カスタム プロパティも走査し、プロトタイプ チェーン上のプロパティにもアクセスします。また、配列要素が走査される順序はランダムになる場合があります。
したがって、上記の欠陥を考慮して、元の for ループを改善する必要があります。ただし、ES6 では、作成した JS コードが壊れることはありません。現在、何千もの Web サイトが for-in ループに依存しており、中には配列の走査に for-in ループを使用しているものもあります。 for-in ループを修正して配列トラバーサルのサポートを追加すると、さらに混乱が生じるため、標準化委員会は現在の問題を解決するために ES6 に新しいループ構文 for-of を追加しました。

それでは、for-of で何ができるのでしょうか?

forEach と比較して、break、 continue、return に正しく応答できます。

• for-of ループは、配列だけでなく、DOM ノードリスト オブジェクトなど、ほとんどの配列のようなオブジェクトもサポートします。
• for-of ループは、文字列を一連の Unicode 文字として走査する文字列走査もサポートしています。
• for-of は、Map と Set (どちらも ES6 の新しいタイプ) オブジェクト トラバーサルもサポートしています。
要約すると、for-of ループには次の特徴があります:

• 这是最简洁、最直接的遍历数组元素的语法。
• 这个方法避开了 for-in 循环的所有缺陷。
• 与 forEach 不同的是，它可以正确响应 break、continue 和 return 语句。
• 其不仅可以遍历数组，还可以遍历类数组对象和其他可迭代对象。

但需要注意的是，for-of循环不支持普通对象，但如果你想迭代一个对象的属性，你可以用
for-in 循环（这也是它的本职工作）。

最后要说的是，ES6 引进的另一个方式也能实现遍历数组的值，那就是 Iterator。上个例子：

const arr = ['a', 'b', 'c'];
const iter = arr[Symbol.iterator]();
 
iter.next() // { value: 'a', done: false }
iter.next() // { value: 'b', done: false }
iter.next() // { value: 'c', done: false }
iter.next() // { value: undefined, done: true }

前面的不多说,重点描述for-of

for-of循环不仅支持数组，还支持大多数类数组对象，例如DOM NodeList对象。

for-of循环也支持字符串遍历，它将字符串视为一系列的Unicode字符来进行遍历：

window.onload=function(){ 
   const arr = [55,00, 11, 22];
   arr.name = "hello";
  // Array.prototype.FatherName = 'FatherName';
   /*for(let key in arr){
    console.log('key='+key+',key.value='+arr[key]);
   }*/
   /* arr.forEach((data) => {console.log(data);});*/
  /* arr.forEach((data,index,arr) => {console.log(data+','+index+','+arr);});*/
  /*for(let key of arr){
    console.log(key);
  }*/
  var string1 = 'abcdefghijklmn';
  var string2 = 'opqrstuvwxyc';
  const stringArr = [string1,string2];
  for(let key of stringArr){
    console.log(key);
  }
  for(let key of string1){
    console.log(key);
  }
}

结果：

现在，只需记住：

• 这是最简洁、最直接的遍历数组元素的语法
• 这个方法避开了for-in循环的所有缺陷
• 与forEach()不同的是，它可以正确响应break、continue和return语句

for-in循环用来遍历对象属性。

for-of循环用来遍历数据—例如数组中的值。

它同样支持Map和Set对象遍历。

Map和Set对象是ES6中新增的类型。ES6中的Map和Set和java中并无太大出入。

Set和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key。

要创建一个Set，需要提供一个Array作为输入，或者直接创建一个空Set：

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3

重复元素在Set中自动被过滤：

var s = new Set([1, 2, 3, 3, '3']);
console.log(s); // Set {1, 2, 3, "3"}

通过add(key)方法可以添加元素到Set中，可以重复添加，但不会有效果：

var s = new Set([1, 2, 3]);
s.add(4);
s; // Set {1, 2, 3, 4}
s.add(4);
s; // Set {1, 2, 3, 4}

通过delete(key)方法可以删除元素：

var s = new Set([1, 2, 3]);
s; // Set {1, 2, 3}
s.delete(3);
s; // Set {1, 2}

Set对象可以自动排除重复项

var string1 = 'abcdefghijklmn';
  var string2 = 'opqrstuvwxyc';
  var string3 = 'opqrstuvwxyc';
  var string4 = 'opqrstuvwxyz';
 
  const stringArr = [string1,string2,string3,string4];
 
 
 var newSet = new Set(stringArr);
  for(let key of newSet){
    console.log(key);
  }

结果:

Map对象稍有不同：内含的数据由键值对组成，所以你需要使用解构（destructuring）来将键值对拆解为两个独立的变量：

for (var [key, value] of phoneBookMap) {   
console.log(key + "'s phone number is: " + value);
}

示例

var m = new Map([[1, 'Michael'], [2, 'Bob'], [3, 'Tracy']]);
  var map = new Map([['1','Jckey'],['2','Mike'],['3','zhengxin']]);
  map.set('4','Adam');//添加key-value
  map.set('5','Tom');
  map.set('6','Jerry');
  console.log(map.get('6'));
  map.delete('6');
   console.log(map.get('6'));
  for(var [key,value] of map) {
    console.log('key='+key+' , value='+value);
  }

结果:

以上がes6 の新しいループとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。