Whether it is mobile mobile development or web-side development, we use the frequency of JS is increasing, today's small series will be shared with you is JavaScript , the way of some of the methods of implementation, personal feeling is very useful, interested children shoes can come together to see.
In order to give you a more intuitive understanding of the relevant features, this article will show you a variety of JavaScript traversal, in order to facilitate the display, we first look at the existing arrays and JSON objects:
var Demoarr = [' Javascript ', ' Gulp ', ' CSS3 ', ' Grunt ', ' jQuery ', ' angular '];
var demoobj = {
AAA: ' Javascript ',
BBB: ' Gulp ',
CCC: ' CSS3 ',
DDD: ' Grunt ',
EEE: ' JQuery ',
FFF: ' Angular '
};
for Loops
The For loop is a commonly used loop in programming languages, not to be introduced, but to see the example directly:
(function () {
For (var i=0, len=demoarr.length; i<len; i++) {
if (i = = 2) {
Return function execution is terminated
Break Loop is terminated
Continue The loop is skipped.
};
Console.log (' demo1arr[' + i + ']: ' + demo1arr[i]);
}
})();
Although the For loop is used very frequently, we still have to remind you of the following considerations:
The I in the For loop is still present with the scope after the loop ends, and in order to avoid affecting other variables in the scope, it is isolated () by the way the function is self-executing ();
Avoid using the for (var i=0; i<demo1arr.length; i++) {} method, such that the array length is calculated every time, less efficient than the above method. You can also put a variable declaration in front of a for to improve your reading performance:
var i = 0, len = demo1arr.length;
for (; i<len; i++) {};
There are several ways to jump out of a loop:
1. Return function execution is terminated
2. Break cycle is terminated
3. Continue cycle is skipped
For in
For (var item in arr|obj) {} can be used to iterate over arrays and objects, where an item represents an index value when an array is traversed, and arr represents the element that corresponds to the current index value arr[item]; When you traverse an object, item represents the key value, ARR represents the value of the key value Obj[item], which is implemented in the following way:
(function () {
for (var i in Demoarr) {
if (i = = 2) {
Return function execution is terminated
Break Loop is terminated
Continue The loop is skipped.
};
Console.log (' demoarr[' + i + ']: ' + demoarr[i]);
}
Console.log ('-------------');
})();
There are a few things to note about the for in:
1. In the For loop and for in loops, the I value is preserved after the loop ends. Therefore, the function is self-executing in a way that avoids it.
2. Use Return,break,continue to jump out of the loop is consistent with the For loop, but in relation to return it is important to note that in the function body, return means that the function execution terminates, even if the outside of the loop code, no longer continue to execute. The break simply terminates the loop, and the subsequent code will continue to execute.
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 '); Does not execute
}
ForEach
Demoarr.foreach (function (ARG) {})
The parameter arg represents the element for each item in the array, with the following example:
Demoarr.foreach (function (e) {
if (e = = ' CSS3 ') {
Return The loop is skipped.
Break Error
continue;//Error
};
Console.log (e);
})
There are specific areas to note:
1, foreach cannot traverse the object;
2, reach cannot be used in IE, Firefox and Chrome can implement this method;
3. Foreach cannot jump out of the loop using Break,continue, and with return, the effect is consistent with the use of continue in the For loop.
Do/while
The implementation of the function is as follows, but it is worth noting that when using continue, if you put i++ behind, then the value of i++ will not change, and finally into a dead loop. So use do/while must be careful.
It is not recommended to use the Do/while method to iterate through an array
Direct use while
(function () {
var i = 0,
len = demoarr.length;
while (I < Len) {
if (i = = 2) {
Return function execution is terminated
Break Loop is terminated
Continue The loop will be skipped, because the code behind cannot be executed, the value of I has not changed, so the loop will always be stuck here, use caution!!
};
Console.log (' demoarr[' + i + ']: ' + demoarr[i]);
i + +;
}
Console.log ('------------------------');
})();
Do While
(function () {
var i = 0,
len = demo3arr.length;
do {
if (i = = 2) {
Break Loop is terminated
};
Console.log (' demo2arr[' + i + ']: ' + demo3arr[i]);
i++;
} while (I<len);
})();
$.each
$.each (demoarr|demoobj, function (e, ele))
Can be used to iterate over arrays and objects, where E represents an index value or a key value, and Ele represents the value
$.each (Demoarr, function (e, ele) {
Console.log (E, ele);
})
Output to
0 "Javascript"
1 "Gulp"
2 "CSS3"
3 "Grunt"
4 "JQuery"
5 "Angular"
Here, there are several places to note:
1. Use return or return True to skip a loop and continue with the following loop
2, use return False to terminate the execution of the loop, but do not terminate the function execution
3. Cannot use break and continue to skip loops
4, the output of this value in the loop is similar to the following
Console.log (this);
String {0: "C", 1: "S", 2: "S", 3: "3", Length:4, [[Primitivevalue]]: "CSS3"}
Console.log (This = = Ele);
True
For the This value above, traverse the
$.each (this, function (E, ele) {
Console.log (E, ele);
})
0 C
1 s
2 S
4 3
Why is length and [[Primitivevalue]] not traversed? Because in the internal properties of JavaScript, the Enumerable in the Object Data property is set to false;
View the internal properties of length
Console.log (Object.getownpropertydescriptor (this, ' length '));
Object {value:4, Writable:false, Enumerable:false, Configurable:false}
The $ (this) in $.each differs from this, but the traversal results are the same.
$ (selecter). each
$ (selecter). Each is designed to traverse the 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: Sequence value ele: Only DOM element that is currently traversed
This is currently traversed by the DOM element and cannot be called by the jquery method
$ (this) = = $ (ele) The JQuery object that is currently traversing the element, can invoke the JQuery method for DOM operation
using the for in Traverse Domlist
Because Domlist is not an array, it is an object, just because its key value is 0,1,2 ... The feeling is similar to the array, but the result of the direct traversal is as follows:
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 () {}
So we need to convert the domlist to an array when we are traversing domlist with for in:
var res = [].slice.call (domlist);
For (var item in res) {}
Objects like this also have the properties of the function arguments object, of course, the string can also be traversed, but because the string other properties of the enumerable is set to false, so the result of the traversal is the same as the array, there is no need to worry about this problem.
The above is in JavaScript, the various ways of traversal and its related use, I hope that everyone in need of an array or object to traverse the time, some reference it.
Related article: "Web front-end jquery's 10 big tricks"
Program ape must know the way the JavaScript is traversed