Detailed explanation of sample code for various traversal methods in JavaScript

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(&#39;demo1Arr[&#39;+ i +&#39;]:&#39; + demo1Arr[i]);
    }
})();

Regarding the for loop, there are a few points to note

• i in the for loop still exists in the scope after the loop ends. In order to avoid affecting other variables in the scope, use the method of self-execution of the function to isolate it()();

• Avoid usingfor( 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++) {};

• There are several ways to jump out of the loop

• return function execution is terminated

• break loop is terminated

• continue loop is skipped

Complete example

for in

for(var item in arr|obj){} can be used to traverse the array and Object

• When traversing the 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, 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('demoArr['+ i +']:' + demoArr[i]);
    }
    console.log('-------------');
})();

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

• In the for loop and 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 the termination of function execution, even if it is code outside the loop. No further execution is required. Break only 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'); //不会执行
}

forEach

demoArr.forEach(function(arg) {})

The parameter arg represents each item in the array Elements, examples are as follows

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

There are specific things to pay attention to

• forEach cannot traverse the object

• forEach cannot traverse the Used in IE, firefox and chrome implement 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 It never changes and eventually falls into an endless loop. Therefore, you must be careful when using do/while.

It is not recommended to use do/while method to traverse the array

// 直接使用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);
})();

$.each

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

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);
})

The output is

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

There are many things to pay attention to here

• Use return or return true to skip a loop and continue executing the following loops

• Use return false to terminate the execution of the loop, but not terminate the function execution

• 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

• About the above this value, traverse it

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

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

Why are length and [[PrimitiveValue]] not traversed? 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

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

$(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

$(selecter).each

Specially used to traverse 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 the DOM element currently being traversed

• this The currently traversed DOM element cannot call the jQuery method

• $(this) == $(ele) The jquery object of the currently traversed element can call jquery Method to perform dom operations

Use for in to traverse DOMList

Because domList is not an array, but an object, just because its key value is 0, 1, 2... It feels similar to an array, but the result of 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 when we use for in to traverse the domList, we need to convert the domList into an array

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

Objects like this are also There are 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 result of the traversal is the same as the array, so there is no need to worry. This is a problem.

Little supplement

If you find that some people write functions like this, don’t panic, and don’t think they are too high-minded to afford a bird

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

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

The above is the detailed content of Detailed explanation of sample code for various traversal methods in JavaScript. For more information, please follow other related articles on the PHP Chinese website!