出處：http://www.lovejavascript.com/#!zone/blog/content.html?id=48
jquery里面有個each方法，將循環操作簡化、便捷。
隨后es出了個forEach方法，兩個雖然用法相近，但是不能處理對象類型。且無法通過return true達到continue效果。
此外還有個every方法，該方法雖然可以實現continue效果，但是在處理類數組與對象類型時，完全無用。
在不使用jquery的each方法時，該如何處理；或者說用原生如何來實現？我在GridManager.js中集成了該方法，代碼如下:
|
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
|
// 通過字面量方式實現的函數each
var
each =
function
(object, callback){
var
type = (
function
(){
switch
(object.constructor){
case
Object:
return
'Object'
;
break
;
case
Array:
return
'Array'
;
break
;
case
NodeList:
return
'NodeList'
;
break
;
default
:
return
'null'
;
break
;
}
})();
// 為數組或類數組時, 返回: index, value
if
(type ===
'Array'
|| type ===
'NodeList'
){
// 由於存在類數組NodeList, 所以不能直接調用every方法
[].every.call(object,
function
(v, i){
return
callback.call(v, i, v) ===
false
?
false
:
true
;
});
}
// 為對象格式時,返回:key, value
else
if
(type ===
'Object'
){
for
(
var
i
in
object){
if
(callback.call(object[i], i, object[i]) ===
false
){
break
;
}
}
}
}
|
我們來try一下， 測試下數組、對象、類數組類型及中斷效果
數組類型:
|
1
2
3
4
|
var
_array = [1,2,3,4];
each(_array,
function
(i, v){
console.log(i +
': '
+ v);
});
|
輸出如下:
對象類型:
|
1
2
3
4
|
var
object = {a:1, b:2, c:3}
each(object,
function
(i, v){
console.log(i +
': '
+ v);
});
|
輸出如下:
類數組類型 :
|
1
2
3
4
|
var
ele = document.querySelectorAll(
'div'
);
each(ele,
function
(i, v){
console.log(i +
': '
+ v);
});
|
輸出如下:
增加中斷條件:
|
1
2
3
4
5
6
7
8
9
10
11
12
|
var
object2 = {name:
'baukh'
, age:
'29'
, six:
'男'
, url:
'www.lovejavascript.com'
,}
each(object2,
function
(i, v){
if
(i ===
'age'
){
//如果存在鍵值為age的屬性時，則輸出警告，用於實現continue效果
console.log(
'存在鍵值為age，這家伙已經'
+v+
'歲了'
);
return
true
;
}
if
(i ===
'six'
&& v ===
'男'
){
//如果存在鍵值為age的屬性時，則輸出跳出，用於實現break效果
console.log(
'存在鍵值為six,是個男的，不用關注了~'
);
return
false
;
}
console.log(i +
': '
+ v);
});
|
輸出如下:
從結果可以看出來，each方法已經實現了jquery的each功能。且實現如此簡單~