1. for 遍歷陣列

1.1 for 的普通遍歷

var name = ['Peter','Stark','Jack'];
// for 迴圈
for(var i = 0; i < name.length; i++) {
  console.log(name[i]);
}
Copy

1.2 for 優化版遍歷

var name = ['Peter','Stark','Jack'];
// 先快取 name.length
for(var i = 0, len = name.length; i < len; i++) {
  console.log(name[i]);
}
Copy

2、while 遍歷陣列

// while 迴圈
var i = 0;
while (i < name.length) {
  console.log(name[i]);
  i++;
}
//while 逆向遍歷
var i = name.length;
while (i--) {
  console.log(name[i]);
}
Copy

3. for…in 方法

陣列既可遍歷物件，也可遍歷陣列。遍歷陣列時也會遍歷非數字鍵名,所以不推薦 for..in 遍歷陣列

3.1 遍歷陣列

var a = [1, 2, 3];
for (var key in a) {
  console.log(a[key]);
}
/* 1
   2
   3 */
Copy
 

3.2 遍歷物件

const object = {
  name: 'Peter',
  age: 12,
  isHuman: true
};
for (let key in object) {
  console.log(key + '---' + object[key]);
}
Copy

4. for…of 方法 (ES6)

var arr = ['a','b','c'];
for(let item of arr) {
  console.log(item);
}
Copy

5. forEach() 方法

用來遍歷陣列中的每一項，不影響原陣列，效能差

缺陷 你不能使用break語句中斷迴圈，也不能使用return語句返回到外層函式。

5.1 遍歷普通陣列

var arr = [1,2,3,4];
arr.forEach = (function(item) {
  console.log(item);
})
Copy

5.2 forEach() 遍歷物件型別陣列

const info = [
  {id: 1000, name: 'zhangsan'},
  {id: 1001, name: 'lisi'},
  {id: 1002, name: 'wangwu'}
]
arr.forEach( function(item) {
  console.log(item.id + '---' + item.name);
})
/* 1---zhangsan
   2---lisi
   3---wangwu */
Copy

6. map() 方法

支援return，相當與原陣列克隆了一份，把克隆的每項改變了，不影響原陣列

var arr = [1,2,3,4];
arr.map( function(item) {
  return item;
})
Copy

當然有了 箭頭函式 => 後更方便

var arr = ['a','b','c'];
var newArray = arr.map(x => x);
alert(newArray); // ['a','b''c']
Copy

map() 方法建立一個新陣列，其結果是該陣列中的每個元素都呼叫一個提供的函式後返回的結果

var newArray = arr.map(function (item) {
  return [expression];
})
Copy

例如

var arr = [1,2,3,4];
var newArray = arr.map(
  x => x * x
)
alert(newArray); // [1,4,9,16]
Copy