JavaScriptトラバーサルメソッドの詳しい解説_JavaScriptスキル

例の説明を容易にするために、既存の配列と json オブジェクトは次のとおりです

var demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular'];
var demoObj = {
 aaa: 'Javascript',
 bbb: 'Gulp',
 ccc: 'CSS3',
 ddd: 'Grunt',
 eee: 'jQuery',
 fff: 'angular'
};

用

例を見てみましょう。多用されていますが、非常に簡単です

(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 ループについては以下の注意点があります

for ループ内の
• i は、ループ終了後もスコープ内に存在します。スコープ内の他の変数への影響を避けるため、関数 ()();
の自己実行を使用して分離されます。
• for(var i=0; i

var i = 0, len = demo1Arr.length;
for(; i<len; i++) {};

• ループから抜け出す方法はいくつかあります

return 関数の実行が終了します
Break ループを終了します
継続ループはスキップされます
完全な例

の場合

for(var item in arr|obj){} 配列とオブジェクトの走査に使用できます

• 配列を走査する場合、item はインデックス値を表し、arr は現在のインデックス値に対応する要素を表します arr[item]
• オブジェクトをトラバースする場合、item はキー値を表し、arr はキー値 obj[item] に対応する値を表します

(function() {
 for(var i in demoArr) {
 if (i == 2) {
 return; // 函数执行被终止
 // break; // 循环被终止
 // continue; // 循环被跳过
 };
 console.log('demoArr['+ i +']:' + demoArr[i]);
 }
 console.log('-------------');
})();

for in に関しては以下の注意点があります。

• for ループと for in ループでは、ループ終了後も i の値が保持されます。したがって、これを回避するには、自己実行関数を使用してください。
• return、break、および continue を使用してループから抜け出すことは for ループと一致しますが、関数本体内で return はコードの外側でも関数の実行の終了を示すことに注意する必要があります。ループは実行を継続できなくなります。 Break はループを終了するだけであり、後続のコードは引き続き実行されます。

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(arg) {})
パラメータ arg は、配列内の各項目の要素を表します。例は次のとおりです。

demoArr.forEach(function(e) {
 if (e == 'CSS3') {
 return; // 循环被跳过
 // break; // 报错
 // continue;// 报错
 };
 console.log(e);
})

具体的に注意が必要な点は以下の通りです

forEach はオブジェクトをトラバースできません
forEach は IE では使用できません。Firefox と Chrome ではこのメソッドを実装します
forEach では、break を使用してループから抜け出すことはできません。return を使用する場合、その効果は for ループで continue を使用するのと同じです
。 する/しながら

関数の具体的な実装は以下の通りですが、注意すべき点は、 continue を使用する場合、最後に i を置くと i の値が変化せず、最終的には無限ループに陥ることです。したがって、do/while を使用する場合は注意が必要です。

配列を走査するために do/while を使用することは推奨されません
// 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

$.each(demoArr|demoObj, function(e, ele))
配列とオブジェクトを走査するために使用できます。ここで、e はインデックス値またはキー値を表し、ele は値

を表します。

$.each(demoArr, function(e, ele) {
 console.log(e, ele);
})

出力は

です

0 "JavaScript"
1 「ゴクゴク」
2「CSS3」
3「うなり声」
4 「jQuery」
5「角度」
ここでは注意すべきことがたくさんあります

• ループをスキップし、後続のループの実行を続けるには、return または return true を使用します
• ループの実行を終了するには return false を使用しますが、関数の実行は終了しません
• ブレークを使用してループをスキップし続けることはできません
• ループ内のこの値の出力は次のようになります

console.log(this);
//String {0: "C", 1: "S", 2: "S", 3: "3", length: 4, [[PrimitiveValue]]: "CSS3"}

console.log(this == ele);
// true

上記の this 値について、トラバースしてみましょう

$.each(this, function(e, ele) {
 console.log(e, ele);
})

// 0 c
// 1 s
// 2 s
// 4 3

長さと [[PrimitiveValue]] が走査されないのはなぜですか?ふと思いついて、その答えを「JavaScript 高度なプログラミング」で見つけました。おそらく JavaScript の内部プロパティで、オブジェクトのデータ属性の Enumerable を false に設定するということです
。

// 查看length的内部属性
console.log(Object.getOwnPropertyDescriptor(this, 'length'));
// Object {value: 4, writable: false, enumerable: false, configurable: false}

$.each の

$(this) は this とは異なりますが、走査結果は同じです。テスト コードで出力して
を確認できます。 $(セレクター).each

DOMList を走査するために特別に使用されます

$('.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');
 };
})

• i: シーケンス値 ele: 現在走査されている DOM 要素のみ
• これは現在トラバースされている DOM 要素です。jQuery メソッドを呼び出すことはできません
• $(this) == $(ele) 現在トラバースされている要素の jquery オブジェクト。jquery メソッドを呼び出して dom 操作を実行できます

DOMList をトラバースするには in を使用します

domList は配列ではなくオブジェクトなので、キーの値が 0、1、2... というだけで配列に似ていますが、直接走査した結果は次のようになります。

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() {}

したがって、for in を使用して domList を走査するときは、domList を配列に変換する必要があります

var res = [].slice.call(domList);
for(var item in res) {}

类似这样的对象还有函数的属性arguments对象，当然字符串也是可以遍历的，但是因为字符串其他属性的enumerable被设置成了false，因此遍历出来的结果跟数组是一样的，也就不用担心这个问题了.
小补充

如果你发现有些人写函数这样搞，不要惊慌，也不要觉得他高大上。

+function(ROOT, Struct, undefined) {
 ... 
}(window, function() {
 function Person() {}
})

()(), !function() {}() +function() {}() 三种函数自执行的方式。

以上就是本文的全部内容，希望对大家的学习有所帮助。