JAvascript汎用ループ遍歴方法forEach
5946 ワード
1つの要素をループすることは開発で最も一般的なニーズの一つであり、フレームワークBASE 2とJqueryの結合バージョンを見てみましょう.
関数自体は複雑ではありませんが、精巧です.简単な注釈をつけて、みんなが理解できることを信じたいです.
例を少し見てみましょう
注意:コールバック関数のindexパラメータの下に1から始まる
なぜ内蔵のforEachを使わないのか
getElementsByClassNameと同様に、内蔵のforEachは効率的ですが、機能的に限界があり、ループの途中で退出することはできません.このforEachでは、falseを返すことで処理関数内でループを終了し、より柔軟にすることができます.
特別なlengthプロパティ
length属性はとても特別な属性で、配列を見て、みんなはきっとlengthを思い出して、それではlength属性のオブジェクトを見ますか?では、偽配列(クラス配列)を思い浮かべなければなりません.では、偽の配列とは何ですか.簡単な理解はアリーを通してprototype.sliceは、真の配列のlength属性を持つオブジェクトに変換されます.JAvascriptで最も有名な擬似配列はargumentsオブジェクトです.偽配列についてはいろいろなものがありますが、これからは博文を書いてこれを話します.オブジェクトにlength属性を勝手に与えないでください.明確に知らない限り、偽の配列として使用するつもりです.
この関数は簡単なjavascriptツールライブラリの必須関数だと思います.ピラミッドの基礎であり、その基礎の上で、再パッケージを行い、あなたのライブラリをより強く、より美しくすることができます.
01
var
forEach = (
function
(){
02
//
03
var
_Array_forEach =
function
(array, block, context) {
04
if
(array ==
null
)
return
;
05
// String
06
if
(
typeof
array ==
'string'
){
07
array = array.split(
''
);
08
}
09
var
i = 0,length = array.length;
10
for
(;i < length && block.call(context, array[i], (i+1), array)!==
false
; i++) {}
11
};
12
//
13
var
_Function_forEach =
function
(object, block, context) {
14
for
(
var
key
in
object) {
15
//
16
if
(object.hasOwnProperty(key)&&block.call(context, object[key], key, object)===
false
){
17
break
;
18
}
19
}
20
};
21
return
function
(object, block, context){
22
if
(object ==
null
)
return
;
23
if
(
typeof
object.length ==
"number"
) {
24
_Array_forEach(object, block, context);
25
}
else
{
26
_Function_forEach(object, block, context);
27
}
28
};
29
})()
関数自体は複雑ではありませんが、精巧です.简単な注釈をつけて、みんなが理解できることを信じたいです.
例を少し見てみましょう
01
//1:1
2:2
02
forEach([1,2,3,4,5],
function
(el,index){
03
if
(index>2){
04
return
false
;
05
}
06
alert(index+
":"
+el);
07
});
08
09
function
print(el,index){
10
alert(index+
":"
+el);
11
}
12
//a:a
b:b
c:c
13
forEach({a:
'a'
,b:
'b'
,c:
'c'
},print);
14
15
//1:
2:
3:
4:
5:
6:
16
forEach(
" "
,print);
17
18
function
Person(name, age) {
19
this
.name = name ||
""
;
20
this
.age = age || 0;
21
};
22
Person.prototype =
new
Person;
23
var
fred =
new
Person(
" "
, 25);
24
fred.language =
"chinese"
;
//
25
//name:jxl
age:22
language:chinese
26
forEach(fred,print);
注意:コールバック関数のindexパラメータの下に1から始まる
なぜ内蔵のforEachを使わないのか
getElementsByClassNameと同様に、内蔵のforEachは効率的ですが、機能的に限界があり、ループの途中で退出することはできません.このforEachでは、falseを返すことで処理関数内でループを終了し、より柔軟にすることができます.
特別なlengthプロパティ
length属性はとても特別な属性で、配列を見て、みんなはきっとlengthを思い出して、それではlength属性のオブジェクトを見ますか?では、偽配列(クラス配列)を思い浮かべなければなりません.では、偽の配列とは何ですか.簡単な理解はアリーを通してprototype.sliceは、真の配列のlength属性を持つオブジェクトに変換されます.JAvascriptで最も有名な擬似配列はargumentsオブジェクトです.偽配列についてはいろいろなものがありますが、これからは博文を書いてこれを話します.オブジェクトにlength属性を勝手に与えないでください.明確に知らない限り、偽の配列として使用するつもりです.
この関数は簡単なjavascriptツールライブラリの必須関数だと思います.ピラミッドの基礎であり、その基礎の上で、再パッケージを行い、あなたのライブラリをより強く、より美しくすることができます.