es6新增循環有哪些

es6新增循環語句有一個：「for of」迴圈。 「for..of」語句可循環遍歷整個對象，是在迭代器生產的一系列值的循環；“for..of”循環的值必須是一個iterable（可迭代的），語法“for(當前值of 數組){...}」。 for-of循環不僅支援數組，還支援大多數類別數組物件；它也支援字串遍歷，會將字串視為一系列Unicode字元來進行遍歷。

本教學操作環境：windows7系統、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..of在a的值上循環。 【相關推薦：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預設為iterable的標準內建值包含：

• Array
• Strings
• Generators
• Collections/TypedArrays

##字串迭代方式

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

原生字串值被強制類型轉換到等價的String封裝物件中，它是一個

iterable

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。

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方法， next方法傳回值必須是{value:xx,done:xx}的形式，如果遇到done:true，則循環結束。

結語：以上就是for..of循環的全部內容，它可以循環可迭代物件。

擴充知識：為什麼要引進 for-of？

要回答這個問題，我們先來看看ES6之前的3 種for 迴圈有什麼缺陷：

##forEach 不能break 和return；

• for-in 缺點更明顯，它不僅遍歷數組中的元素，還會遍歷自訂的屬性，甚至原型鏈上的屬性都被存取。而且，遍歷數組元素的順序可能是隨機的。
• 所以，鑑於上述種種缺陷，我們需要改進原先的 for 迴圈。但 ES6 不會破壞你已經寫好的 JS 程式碼。目前，成千上萬的 Web 網站依賴 for-in 循環，其中一些網站甚至將其用於陣列遍歷。如果想要透過修正 for-in 迴圈增加陣列遍歷支援會讓這一切變得更加混亂，因此，標準委員會在 ES6 中增加了一種新的迴圈語法來解決目前的問題，即 for-of 。

那 for-of 到底可以做什麼呢？

跟 forEach 相比，可以正確回應 break, continue, return。

• for-of 迴圈不僅支援數組，還支援大多數類別數組對象，例如 DOM nodelist 物件。
• 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中文網其他相關文章！