In order to facilitate the example explanation, the existing arrays and json objects are as follows
var demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular']; var demoObj = { aaa: 'Javascript', bbb: 'Gulp', ccc: 'CSS3', ddd: 'Grunt', eee: 'jQuery', fff: 'angular' };
for
You can look at the example directly, it is used too much, it is very simple
(function() { for(var i=0, len=demoArr.length; i<len; i++) { if (i == 2) { // return; // 函数执行被终止 // break; // 循环被终止 continue; // 循环被跳过 }; console.log('demo1Arr['+ i +']:' + demo1Arr[i]); } })();
About the for loop, there are a few things to pay attention to
In the for loop The i still exists in the scope after the loop ends. In order to avoid affecting other variables in the scope, use the function self-execution method to isolate it ()();
Avoid using for(var i=0; i There are several ways to jump out of the loop return The function execution is terminated break The loop is terminated continue The loop is skipped Complete Example for in for(var item in arr|obj){} can be used to traverse arrays and objects When traversing an array, item represents the index value, arr represents the element corresponding to the current index value arr[item] When traversing the object, item represents the key value, and arr represents the value corresponding to the key value obj[item] Regarding for in, there are the following points to note: In the for loop and for in loop, the i value will be in Retained after the cycle ends. Therefore, use self-executing functions to avoid this. Using return, break, and continue to jump out of the loop is consistent with the for loop. However, you need to pay attention to return. In the function body, return indicates the termination of function execution. Even the code outside the loop will no longer continue to execute. Break only terminates the loop, and the subsequent code will continue to execute. forEach demoArr.forEach(function(arg) {}) The parameter arg represents the element of each item in the array. The example is as follows There are the following things to pay attention to forEach cannot traverse the object forEach It cannot be used in IE. Firefox and Chrome have implemented this method. ForEach cannot use break and continue to jump out of the loop. When using return, the effect is the same as using continue in a for loop. Do/while The specific implementation of the function is as follows , but one thing worth noting is that when using continue, if you put i++ at the end, the value of i++ will never change, and eventually it will fall into an infinite loop. Therefore, you must be careful when using do/while. It is not recommended to use do/while to traverse arrays $.each $.each(demoArr|demoObj, function(e, ele)) Can be used to traverse arrays and objects, where e represents the index Value or key value, ele represents value value The output is There are many things to pay attention to here Use return or return true to skip a loop and continue to execute the subsequent loop Use return false to terminate the loop execution, but does not terminate the function execution You cannot use break and continue to skip the loop The output of this value in the loop is similar to the following About the this value above, traverse it Why length and [[PrimitiveValue] ] Didn’t it traverse it? Suddenly I had an idea and found the answer in "Javascript Advanced Programming". It probably means that in the internal properties of JavaScript, set the Enumerable in the object data property to false // Check the internal property of length // Object {value: 4, writable: false, enumerable: false, configurable: false} $(selecter).each Specially used to traverse DOMList i: sequence value ele: only the DOM element currently being traversed this The jQuery method cannot be called on the currently traversed DOM element $(this) == $(ele) The jquery object of the currently traversed element can call the jquery method to perform dom operations Use for in to traverse DOMList Because domList It is not an array, but an object. It feels similar to an array just because its key values are 0, 1, 2..., but the result of direct traversal is as follows Therefore, when we use for in to traverse domList, we need to domList Convert to an array var res = [].slice.call(domList); Small supplement If you find that some people write functions like this, Don’t panic, and don’t think he’s too big and too powerful ()(), !function() {}() +function() {}() Three ways of function self-execution^_^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) in $.each is different from this, but The traversal result is the same, you can print it out in the test code to see $('.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() {}
Objects like this also have attribute arguments objects of functions. Of course, strings can also be traversed , but because the enumerable of other attributes of the string is set to false, the traversal result is the same as the array, so there is no need to worry about this problem.+function(ROOT, Struct, undefined) {
...
}(window, function() {
function Person() {}
})