for
forEach
$.each
- for - 循環(huán)代碼塊一定的次數(shù)
- forEach是ECMA5中Array新方法中最基本的一個(gè)腐巢，就是遍歷，循環(huán);
Array在ES5新增的方法中烛愧，參數(shù)都是function類型，默認(rèn)有傳參，forEach方法中的function回調(diào)支持3個(gè)參數(shù)脂凶，第1個(gè)是遍歷的數(shù)組內(nèi)容；第2個(gè)是對(duì)應(yīng)的數(shù)組索引愁茁，第3個(gè)是數(shù)組本身蚕钦。 - $.each 和forEach差不多，就是第一個(gè)和第二個(gè)參數(shù)換個(gè)位置鹅很，第1個(gè)是對(duì)應(yīng)的數(shù)組索引嘶居；第2個(gè)是遍歷的數(shù)組內(nèi)容，第3個(gè)是數(shù)組本身促煮。
[1, 2 ,3, 4].forEach(alert);
等同于
var array = [1, 2, 3, 4]; for (var k = 0, length = array.length; k < length; k++) { alert(array[k]); }
[].forEach(function(value, index, array) {
// ...
});
對(duì)照jquery中的.each()
$.each([], function(index, value, array) {
// ...
});
$().each $.each
在jquery中邮屁，遍歷對(duì)象和數(shù)組，經(jīng)常會(huì)用到$().each和$.each()菠齿，兩個(gè)方法佑吝。兩個(gè)方法是有區(qū)別的，從而這兩個(gè)方法在針對(duì)不同的操作上绳匀，顯示了各自的特點(diǎn)芋忿。
$().each,對(duì)于這個(gè)方法，在dom處理上面用的較多
$(“input[name=’ch’]”).each(function(i){ if($(this).attr(‘checked’)==true) }對(duì)于遍歷一個(gè)數(shù)組疾棵，用$.each()來(lái)處理戈钢，簡(jiǎn)直爽到了極點(diǎn)。
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]] $.each(arr1, function(i, item){ alert(item[0]); });
//其實(shí)arr1為一個(gè)二維數(shù)組是尔，item相當(dāng)于取每一個(gè)一維數(shù)組殉了，
//item[0]相對(duì)于取每一個(gè)一維數(shù)組里的第一個(gè)值
//所以上面這個(gè)each輸出分別為：1 4 7$.each也能遍歷對(duì)象
var obj = { one:1, two:2, three:3, four:4}; $.each(obj, function(key, val) { alert(obj[key]); });
//這個(gè)each就有更厲害了，能循環(huán)每一個(gè)屬性
//輸出結(jié)果為：1 2 3 4
map
- 這里的map不是“地圖”的意思嗜历，而是指“映射”宣渗。[].map(); 基本用法跟forEach方法類似：
array.map(callback,[ thisObject]); - map方法的作用不難理解，“映射”嘛梨州，也就是原數(shù)組被“映射”成對(duì)應(yīng)新數(shù)組痕囱。下面這個(gè)例子是數(shù)值項(xiàng)求平方：
var data=[1,3,4]
var Squares=data.map(function(val,index,arr){
console.log(arr[index]==val); // ==> true
return val*val
})
console.log(Squares); // ==> [1, 9, 16]
由于forEach、map都是ECMA5新增數(shù)組的方法暴匠，所以ie9以下的瀏覽器還不支持（萬(wàn)惡的IE鞍盎帧），不過(guò)呢，可以從Array原型擴(kuò)展可以實(shí)現(xiàn)以上全部功能帮掉，例如forEach方法:
if (typeof Array.prototype.forEach != "function") {
Array.prototype.forEach =function() {
/* 實(shí)現(xiàn) */
};
}
for/in
for/of
for/in - 循環(huán)遍歷對(duì)象的屬性（ES5）
for/of 語(yǔ)法和for/in很像弦悉，但跟豐富（ES6）
1 . 推薦在循環(huán)對(duì)象屬性的時(shí)候，使用for...in, 在遍歷數(shù)組的時(shí)候的時(shí)候使用for...of蟆炊。
2 . for...in循環(huán)出的是key稽莉，for...of循環(huán)出的是value
3 . 注意，for...of是ES6新引入的特性涩搓。修復(fù)了ES5引入的for...in的不足
4 . for...of不能循環(huán)普通的對(duì)象污秆，需要通過(guò)和Object.keys()搭配使用
假設(shè)我們要遍歷一個(gè)數(shù)組的valuelet aArray = ['a',123,{a:'1',b:'2'}]
使用for...in循環(huán)：
for(let index in aArray){
console.log(${aArray[index]});
}
使用for...of循環(huán)：
for(var value of aArray){
console.log(value);
}
咋一看好像好像只是寫(xiě)法不一樣而已，那為什么說(shuō)for...of修復(fù)了for...in的缺陷和不足昧甘。
假設(shè)我們往數(shù)組添加一個(gè)屬性name:
aArray.name = 'demo',再分別查看上面寫(xiě)的兩個(gè)循環(huán)：
for(let index in aArray){
console.log(${aArray[index]}); //Notice!!aArray.name也被循環(huán)出來(lái)了
}
for(var value of aArray){
console.log(value);
}
所以說(shuō)良拼，作用于數(shù)組的for-in循環(huán)除了遍歷數(shù)組元素以外,還會(huì)遍歷自定義屬性。
for...of循環(huán)不會(huì)循環(huán)對(duì)象的key充边，只會(huì)循環(huán)出數(shù)組的value庸推，因此for...of不能循環(huán)遍歷普通對(duì)象,對(duì)普通對(duì)象的屬性遍歷推薦使用for...in
如果實(shí)在想用for...of來(lái)遍歷普通對(duì)象的屬性的話，可以通過(guò)和Object.keys()搭配使用浇冰，先獲取對(duì)象的所有key的數(shù)組
然后遍歷：
var student={
name:'wujunchuan',
age:22,
locate:{
country:'china',
city:'xiamen',
school:'XMUT'
}
}
for(var key of Object.keys(student)){
//使用Object.keys()方法獲取對(duì)象key的數(shù)組
console.log(key+": "+student[key]);
}
