Apakah gelung baharu dalam es6?

ES6 mempunyai pernyataan gelung baharu: gelung "untuk". Pernyataan "for..of" boleh menggelung melalui keseluruhan objek dan merupakan gelung bagi satu siri nilai yang dihasilkan oleh lelaran; nilai gelung "for..of" mestilah boleh diulang (boleh diulang), dan sintaks "untuk(nilai semasa tatasusunan){...}". Gelung for-of bukan sahaja menyokong tatasusunan, tetapi juga menyokong kebanyakan objek seperti tatasusunan; ia juga menyokong rentas rentetan dan merentas rentetan sebagai satu siri aksara Unicode.

Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.

Pada masa lalu, untuk gelung, untuk dalam gelung; dan ES6 gelung baharu: untuk gelung: melintasi (berulang, gelung) keseluruhan objek.

for..of

ES6 menambah gelung for..of baharu, gelung yang menghasilkan satu siri nilai dalam lelaran . Nilai gelung for..of mestilah 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 gelung pada kunci/indeks tatasusunan a dan for..of gelung pada nilai a. [Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]

<span style="font-size: 18px;">ES6</span>ES6sebelum Kod

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 Di bawah hud, gelung

meminta lelaran daripada lelaran, dan kemudian memanggil lelaran ini berulang kali untuk menetapkan nilai yang dihasilkannya kepada pembolehubah lelaran gelung .

JavaScript

Nilai terbina dalam standard yang lalai kepada boleh lelar termasuk:

• Array
• Strings
• Generators
• Collections/TypedArrays

Kaedah lelaran rentetan

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

iterableOrang asli nilai rentetan ialah Hantar ke objek pembalut Rentetan yang setara, iaitu

<span style="font-size: 18px;">for(XYZ of ABC)</span>untuk(XYZ bagi ABC)

XYZ

Untuk

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}

kedudukan ini boleh sama ada ungkapan tugasan atau pernyataan. Mari lihat contoh ungkapan tugasan:

breakcontinue Tamatkan gelung lebih awal melalui return,

,

. Pelajar tersuai

for..ofiterableDengan memahami lapisan asas, iterable meminta lelaran daripada

dan kemudian memanggilnya berulang kali Penyalur menetapkan nilai yang dihasilkannya kepada pembolehubah lelaran gelung. Kemudian saya boleh menyesuaikan

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)
}

.

[Symbol.iterator]next Dapat dilihat bahawa lelaran tersuai memenuhi dua syarat, atribut next, objek yang dikembalikan mempunyai kaedah {value:xx,done:xx} dan nilai pulangan kaedah done:true mestilah dalam bentuk

, jika

ditemui, gelung tamat.

Kesimpulan: Di atas adalah keseluruhan kandungan gelung for..of, yang boleh menggelungkan objek boleh lelar.

Meluaskan pengetahuan: Mengapakah for-of diperkenalkan?

Untuk menjawab soalan ini, mari kita lihat dahulu kelemahan tiga gelung sebelum ES6:
• untukSetiap tidak boleh putus dan kembali
untuk-dalam lebih jelas Ia bukan sahaja merentasi elemen dalam tatasusunan, tetapi juga merentasi sifat tersuai, malah sifat pada rantaian prototaip juga boleh diakses. Juga, susunan elemen tatasusunan dilalui mungkin rawak.

Jadi, memandangkan kecacatan di atas, kita perlu menambah baik gelung asal. Tetapi ES6 tidak akan memecahkan kod JS yang telah anda tulis. Hari ini, beribu-ribu tapak web bergantung pada gelung untuk masuk, dan sesetengah daripada mereka menggunakannya untuk traversal tatasusunan. Menambah sokongan traversal tatasusunan dengan menetapkan gelung for-in akan menjadikan perkara ini lebih mengelirukan, jadi jawatankuasa piawaian menambah sintaks gelung baharu dalam ES6 untuk menyelesaikan masalah semasa, for-of .

Jadi apa sebenarnya yang boleh dilakukan?

• Berbanding dengan forEach, ia boleh bertindak balas dengan betul untuk memecahkan, meneruskan dan kembali.
• Gelung for-of menyokong bukan sahaja tatasusunan, tetapi juga kebanyakan objek seperti tatasusunan, seperti objek senarai node DOM.
• Gelung for-of juga menyokong rentas rentetan, yang merentas rentetan sebagai satu siri aksara Unikod.
• for-of juga menyokong lintasan objek Peta dan Set (kedua-dua jenis baharu dalam ES6).

Untuk meringkaskan, gelung for-of mempunyai ciri-ciri berikut:

• 这是最简洁、最直接的遍历数组元素的语法。
• 这个方法避开了 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);
  }

结果:

Atas ialah kandungan terperinci Apakah gelung baharu dalam es6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!