const fruits=['orange','apple','banana','mango'];

for循環(huán)

for(let i=0;i<fruits.length;i++){
  console.log(fruits[i]);
}
//orange
//apple
//banana
//mango

forEach

fruits.forEach(fruit=>{
  console.log(fruit)
})
//orange
//apple
//banana
//mango

但是forEach不能中止或者中途跳出循環(huán)，即不能使用break，continue這些：

fruits.forEach(fruit=>{
  break;
})
//Uncaught SyntaxError: Illegal break statement at Array.forEach (native) at <anonymous>:1:8
fruits.forEach(fruit=>{
  continue;
})
//Uncaught SyntaxError: Illegal continue statement

for...in

注意：for...in遍歷的是下標(biāo)

for(let index in fruits){
  console.log(fruits[index])
}

需要注意的是，for...in還會遍歷原型上的屬性，能夠遍歷可枚舉繼承的屬性

Array.prototype.a=function(){
  return this[0];
}
fruits.a="aaa";
for(let index in fruits){
    console.log(fruits[index])
}
//orange
//apple
//banana
//mango
//aaa
//function(){return this[0];}

對于原型繼承的屬性我們有時候可以用hasOwnProperty()來過濾掉

es6的for...of

for(let fruit of fruits){
  console.log(fruit)
}
//orange
//apple
//banana
//mango

• 支持中止循環(huán)即跳出循環(huán)：

for(let fruit of fruits){
  if(fruit==='apple'){
    break;
  }
  console.log(fruit)
}
//orange
for(let fruit of fruits){
  if(fruit==='apple'){
    continue;
  }
  console.log(fruit)
}
//orange
//banana
//mango

• for...of還可以這樣遍歷：

for(let fruit of fruits.entries()){
  console.log(fruit)
}
//[0, "orange"]
//[1, "apple"]
//[2, "banana"]
//[3, "mango"]
for(let [index,fruit] of fruits.entries()){
  console.log(`${index}-${fruit}`)
}
//0-orange
//1-apple
//2-banana
//3-mango

• 遍歷字符串

let str="hello";
for(let i of str){
  console.log(i);
}
//'h'
//'e'
//'l'
//'l'
//'o'

• 遍歷類數(shù)組

function sum(){
  console.log(arguments)
}
sum(1,2,3,4,5)

arguments是一個類數(shù)組,可以用Array.from轉(zhuǎn)換成真實數(shù)組或可遍歷對象。但是據(jù)說性能不好,我們先用學(xué)到的for...of遍歷:

function sum(){
  let total=0; 
  for(let i of arguments){
    total+=i;
  }
  return total;
}
sum(1,2,3,4,5)//15

• 遍歷Nodelist

補充Array.from() 和 Array.of()

Array.from()

MDN上面對Array.from()的定義是：

Array.from() 方法從一個類似數(shù)組或可迭代的對象中創(chuàng)建一個新的數(shù)組實例。
Array.from()返回值是一個新的 Array；

語法

Array.from(arrayLike[, mapFn[, thisArg]])

• 字符串

Array.from("HELLO");
//["H", "E", "L", "L", "O"]

• Set和Map類型

let s = new Set(['foo', window]); 
Array.from(s); 
// ["foo", window]
let m = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(m); 
// [[1, 2], [2, 4], [4, 8]]

• 類數(shù)組
  跟正文最后一個例子一樣，arguments是一個類數(shù)組（NodeList也是），就可以用Array.from()轉(zhuǎn)成數(shù)組

function sum(){
  return Array.form(arguments).reduce((prev,next)=>prev+next
  ,0)
}
sum(1,2,3)
//6

帶其他參數(shù)

• 自加

Array.from([1,2,3],x=>x+x);
//[2, 4, 6]

• 生成0-100的數(shù)組

Array.from({length: 101}, (v, i) => i);
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99，100]

Array.of()

在js中Array(7)生成的是[,,,,,,],Array(1,2,3)生成[1,2,3],但是我們用生成[7]這樣呢？在之前只能用直接量的方法[7]這樣直接寫,而ES6就提供了Array.of()讓我們可以創(chuàng)建一個具有可變數(shù)量參數(shù)的新數(shù)組實例，而不考慮參數(shù)的數(shù)量或類型。

Array.of(7);//[7]
Array.of(1,2,3)//[1,2,3]

參考：

for...in MDN
for...of MDN