Detailed explanation of various traversal methods in JavaScript-JS Tutorial-php.cn

JavaScript Detailed explanation of various traversal methods, let you see what traversal methods are in JavaScript, and explain them in detail, and master JavaScript proficiently Multiple traversal methods in .

In order to facilitate the example explanation, the existing arrays and json objects are as follows

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

Copy after login

for

You can directly see the example with Too many, it’s very simple

(function() {    for(var i=0, len=demoArr.length; i<len; i++) {        if (i == 2) {            // return;   // 函数执行被终止
            // break;    // 循环被终止
            continue; // 循环被跳过
        };        console.log(&#39;demo1Arr[&#39;+ i +&#39;]:&#39; + demo1Arr[i]);
    }
})();

Copy after login

Aboutfor loop, there are a few points to note

The i in the for loop still exists and has a role after the loop ends In the scope, in order to avoid affecting other variables in the scope, Use the function to isolate it by self-execution ()();

Avoid using for(var i=0; i< ;demo1Arr.length; i++){} method, the array length is calculated every time, and the efficiency is lower than the above method. You can also put the variable declaration in front of for to improve readability

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

Copy after login

There are several ways to break out of the loop

return function execution is terminated

break loop Terminated

Continue The loop is skipped

for in

for(var item in arr|obj){} Can be used toTraverse arrays and objects

When traversing arrays, item represents the index value, and arr represents the element arr[item] corresponding to the current index value When object

, item represents the key value, arr represents the value corresponding to the key value obj[item]

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

Copy after login

Regarding for in, there are the following points to note:

In the for loop Like in a for in loop, the i value will be retained after the loop 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 that the function execution is terminated. Even the code outside the loop will not continue. implement. And break just terminates the loop, and the subsequent code will continue to execute.

function res() {   
 var demoArr = [&#39;Javascript&#39;, &#39;Gulp&#39;, &#39;CSS3&#39;, &#39;Grunt&#39;, &#39;jQuery&#39;, &#39;angular&#39;];  
  for(var item in demoArr) {      
    if (item == 2) {       
         return;
        };        
        console.log(item, demoArr[item]);
    }    
    console.log(&#39;desc&#39;, &#39;function res&#39;); //不会执行}

Copy after login

forEach

demoArr.forEach(function(arg) {})

Copy after login

The parameter arg represents the element of each item in the array. The example is as follows

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

Copy after login

The specific requirements are as follows Things to note

forEach cannot traverse objects

forEach cannot be used in IE, firefox and chrome implement this method

forEach cannot use break, continue to jump out of the loop, use return When using continue, the effect is the same as using continue in a for loop.

do/while

The specific implementation of the function is as follows, but there is one thing worth noting. What's more, 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.

不建议使用do/while的方式来遍历数组

Copy after login

// 直接使用while
(function() {    var i = 0,
        len = demoArr.length;    while(i < len) {        if (i == 2) {            // return; // 函数执行被终止
            // break;  // 循环被终止
            // continue;  // 循环将被跳过，因为后边的代码无法执行，i的值没有改变，因此循环会一直卡在这里，慎用！！
        };        console.log(&#39;demoArr[&#39;+ i +&#39;]:&#39; + demoArr[i]);
        i ++;
    }    console.log(&#39;------------------------&#39;);
})();// do while(function() {    var i = 0,
        len = demo3Arr.length;    do {        if (i == 2) {            break; // 循环被终止
        };        console.log(&#39;demo2Arr[&#39;+ i +&#39;]:&#39; + demo3Arr[i]);
        i++;
    } while(i<len);
})();

Copy after login

$.each

$.each(demoArr|demoObj, function(e, ele))

Copy after login

can be used to traverse arrays and objects, where e represents the index value or key value, and ele represents the value value

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

Copy after login

The output is

0 "Javascript"
1 "Gulp"
2 "CSS3"
3 "Grunt"
4 "jQuery"
5 "angular"

Copy after login

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 execution of the loop, but not terminate the function execution

You cannot use break and continue to skip the loop

The this value output 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

Copy after login

Regarding the this value above, traverse it

$.each(this, function(e, ele) { 
   console.log(e, ele);
})
// 0 c
// 1 s
// 2 s
// 4 3

Copy after login

为什么length 和 [[PrimitiveValue]]没有遍历出来？突然灵光一动，在《javascript高级编程》中找到了答案，大概意思就是javascript的内部属性中，将对象数据属性中的Enumerable设置为了false

Copy after login

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

Copy after login

$.each 中的 $(this) 与this有所不同，不过遍历结果却是一样，你可以在测试代码中打印出来看看

Copy after login

$(selecter).each

is specially used to traverse DOMList

$(&#39;.list li&#39;).each(function(i, ele) {    console.log(i, ele);    // console.log(this == ele); // true
    $(this).html(i);    if ($(this).attr(&#39;data-item&#39;) == &#39;do&#39;) {
        $(this).html(&#39;data-item: do&#39;);
    };
})

Copy after login

i: sequence value ele: only the currently traversed DOM element

this is the currently traversed DOM element, the jQuery method cannot be called

$(this) == $(ele) current For the jquery object of the traversed element, you can call the jquery method to perform dom operations

Use for in to traverse DOMList

Because domList is not an array, but It is an object, just because its key value is 0, 1, 2... and it feels similar to an array, but the result of direct traversal is as follows

var domList = document.getElementsByClassName(&#39;its&#39;);
for(var item in domList) {
    console.log(item, &#39;:&#39; + domList[item]);
}
// 0: <li></li>
// 1: <li></li>
//    ...
// length: 5
// item: function item() {}
// namedItem: function namedItem() {}

Copy after login

So when we use for in to traverse the domList, we need to convert the domList to Array

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

Copy after login

rrree

Small supplement

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

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

Copy after login

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

以上就是JavaScript 各种遍历方式详解的所有内容，希望会给大家带来帮助吧

相关推荐：

JavaScript 易错知识点整理

处理JavaScript异常的方法

JavaScript的数组去重方法
The above is the detailed content of Detailed explanation of various traversal methods in JavaScript. For more information, please follow other related articles on the PHP Chinese website!