ホームページ > 記事 > ウェブフロントエンド > JavaScriptのさまざまなトラバーサル手法、あなたの知らないブラックテクノロジーがある
サンプルの説明を容易にするために、既存の配列とjsonオブジェクトは次のとおりです
var demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular']; var demoObj = { aaa: 'Javascript', bbb: 'Gulp', ccc: 'CSS3', ddd: 'Grunt', eee: 'jQuery', fff: 'angular' };
for
サンプルを直接見ることができます、多用されており、非常に簡単です
(function() { for(var i=0, len=demoArr.length; i<len; i++) { if (i == 2) { // return; // 函数执行被终止 // break; // 循环被终止 continue; // 循环被跳过 }; console.log('demo1Arr['+ i +']:' + demo1Arr[i]); } })();
forループについては、注意すべき点がいくつかあります
for ループ内 ループ終了後も i がスコープ内に存在するため、関数の自己実行メソッドを使用してそれを分離します ()()。 ;
for(var i=0; i ループから抜け出すにはいくつかの方法があります return 関数の実行が終了します break ループが終了します Continue ループがスキップされます 完全な例 for in for(var item in arr|obj){} を使用して配列とオブジェクトを走査することができます 配列を走査する場合、item はインデックス値を表し、arr は現在のインデックスに対応する要素を表しますvalue arr[item] オブジェクトをトラバースする際、item はキー値を表し、arr はキー値に対応する値を表します obj[item] for in に関しては、以下の注意点があります。 for ループと for in ループでは、サイクル終了後に i 値が保持されます。したがって、これを回避するには、自己実行関数を使用してください。 ループから抜け出すために return、break、および continue を使用することは、for ループと一貫性があります。ただし、関数本体では、return は関数の実行の終了を示すことに注意する必要があります。ループは実行を継続できなくなります。 Break はループを終了するだけであり、後続のコードは引き続き実行されます。 forEach demoArr.forEach(function(arg) {}) パラメータargは配列内の各項目の要素を表します 例は以下の通りです 注意すべき点は以下の通りです forEach はオブジェクトを走査できません forEach IE では使用できません。ForEach は、break を使用してループから抜け出すことができません。return を使用する場合、効果は同じです。 for ループ Do/while 関数の具体的な実装は以下の通りですが、注意すべき点は、 continue を使用する場合、最後に i++ を置くと、i++ の値は決して変更されず、最終的には変更されないことです。無限ループに陥ってしまいます。したがって、do/while を使用する場合は注意が必要です。 配列の走査に do/while を使用することは推奨されません $.each $.each(demoArr|demoObj, function(e, ele)) 配列とオブジェクトの走査に使用できます。インデックス値またはキー値を表し、ele は値 value を表します 出力は ここで注意すべき点がたくさんあります ループをスキップして後続のループの実行を続けるには、return または return true を使用します ループの実行を終了するには return false を使用しますが、関数の実行は終了しません break を使用してループをスキップし続けることはできません ループ内のこの値の出力は次のようになります この値について上で、それを走査してください なぜ長さと [[PrimitiveValue] ] を走査しませんでしたか?突然思いついて、「JavaScript 高度なプログラミング」で答えを見つけました。おそらく JavaScript の内部プロパティで、オブジェクト データ プロパティの Enumerable を false に設定する // length // $.each の Object {value: 4, writable: false, enumerable: false, configurable: false} DOMList を走査するために特別に使用されます i: シーケンス値 ele: 現在存在している DOM 要素のみtraversed this 現在トラバースされている DOM 要素では jQuery メソッドを呼び出すことはできません $(this) == $(ele) 現在トラバースされている要素の jquery オブジェクトは、dom 操作を実行するために jquery メソッドを呼び出すことができます in で使用しますDOMListを走査するには domListは配列ではなくオブジェクトなので、キーの値が0、1、2...というだけで配列に似ていますが、直接走査した結果は以下の通りです したがって、for in を使用して domList を走査するときは、domList を配列に変換する必要があります var res = [].slice.call(domList); Objectsこのように、関数の属性引数オブジェクトも持つことができます。もちろん、文字列も走査できますが、文字列の他の属性の列挙可能値が false に設定されているため、走査結果は配列と同じになるため、走査する必要はありません。この問題について心配してください。 このような関数を書いている人がいることに気づいたら、パニックにならないでください、そして彼が大きすぎて強力すぎるとは思わないでください ()(), !function() {}() +function() {}() 関数の自己実行の 3 つの方法^_^var i = 0, len = demo1Arr.length;
for(; i<len; i++) {};
(function() {
for(var i in demoArr) {
if (i == 2) {
return; // 函数执行被终止
// break; // 循环被终止
// continue; // 循环被跳过
};
console.log('demoArr['+ i +']:' + demoArr[i]);
}
console.log('-------------');
})();
function res() {
var demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular'];
for(var item in demoArr) {
if (item == 2) {
return;
};
console.log(item, demoArr[item]);
}
console.log('desc', 'function res'); //不会执行
}
demoArr.forEach(function(e) {
if (e == 'CSS3') {
return; // 循环被跳过
// break; // 报错
// continue;// 报错
};
console.log(e);
})
// 直接使用while
(function() {
var i = 0,
len = demoArr.length;
while(i < len) {
if (i == 2) {
// return; // 函数执行被终止
// break; // 循环被终止
// continue; // 循环将被跳过,因为后边的代码无法执行,i的值没有改变,因此循环会一直卡在这里,慎用!!
};
console.log('demoArr['+ i +']:' + demoArr[i]);
i ++;
}
console.log('------------------------');
})();
// do while
(function() {
var i = 0,
len = demo3Arr.length;
do {
if (i == 2) {
break; // 循环被终止
};
console.log('demo2Arr['+ i +']:' + demo3Arr[i]);
i++;
} while(i<len);
})();
$.each(demoArr, function(e, ele) {
console.log(e, ele);
})
0 "Javascript"
1 "Gulp"
2 "CSS3"
3 "Grunt"
4 "jQuery"
5 "angular"
console.log(this);
//String {0: "C", 1: "S", 2: "S", 3: "3", length: 4, [[PrimitiveValue]]: "CSS3"}
console.log(this == ele);
// true
$.each(this, function(e, ele) {
console.log(e, ele);
})
// 0 c
// 1 s
// 2 s
// 4 3
$(this) は this とは異なります, しかし、走査結果は同じです。テストコードで出力して確認できます
$(selector).each$('.list li').each(function(i, ele) {
console.log(i, ele);
// console.log(this == ele); // true
$(this).html(i);
if ($(this).attr('data-item') == 'do') {
$(this).html('data-item: do');
};
})
var domList = document.getElementsByClassName('its');
for(var item in domList) {
console.log(item, ':' + domList[item]);
}
// 0: <li></li>
// 1: <li></li>
// ...
// length: 5
// item: function item() {}
// namedItem: function namedItem() {}
少し補足+function(ROOT, Struct, undefined) {
...
}(window, function() {
function Person() {}
})