JavaScript의 다양한 순회 방법에 대한 자세한 설명

JavaScript 다양한 순회 방법에 대한 자세한 설명, 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'};

for

예제를 직접 보시면 아시겠지만 너무 많이 사용되어 아주 간단합니다

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

for 루프에 대해 몇 가지 사항이 있습니다.

for 루프의 i는 루프가 끝난 후에도 여전히 범위에 존재합니다. 범위의 다른 변수에 영향을 주지 않으려면 함수를 사용하세요. 자체 실행으로 격리하려면()();

for(var i=0; i

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

루프에서 빠져나오는 방법은 여러 가지가 있습니다

반환 함수 실행이 종료됩니다

break 루프가 종료됩니다

continue 루프가 생략됩니다

for in

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

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'); //不会执行}

forEach

demoArr.forEach(function(arg) {})

매개변수 arg는 배열의 각 항목의 요소를 나타냅니다. 예시는 다음과 같습니다.

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

다음과 같은 특정 사항에 주의해야 합니다.

forEach는 객체를 순회할 수 없습니다

forEach는 IE에서 사용할 수 없으며 Firefox 및 Chrome에서는 이 방법을 구현했습니다.

 ForEach는 중단을 사용할 수 없으며 루프에서 계속 점프합니다. 반환을 사용할 때 효과는 for 루프에서 계속을 사용하는 것과 같습니다

do/while

함수에 대한 구체적인 구현은 다음과 같으나 한 가지 주의할 점은 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(&#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))

를 사용하여 배열과 객체를 순회할 수 있습니다. 여기서 e는 인덱스 값 또는 키 값을 나타내고 ele는 값 값을 나타냅니다

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

출력은

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

입니다. 여기서 주의할 점

루프를 건너뛰고 다음 루프를 계속 실행하려면 return 또는 return true를 사용하세요.

루프 실행을 종료하지만 함수 실행은 종료하지 않으려면 return false를 사용하세요.

break와 continue를 사용할 수 없습니다. 루프를 건너뛰려면

루프에서 이 값 출력은 다음과 유사합니다.

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

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

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

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

$(selecter).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만 Element

현재 순회 중인 DOM 요소이므로 jQuery 메서드를 호출할 수 없습니다.

$(this) == $(ele) 현재 순회 중인 DOM 요소의 jquery 객체 요소를 사용하면 jquery 메서드를 호출하여 dom 작업을 수행할 수 있습니다

DOMList 탐색에 사용

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() {}() 三种函数自执行的方式

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

相关推荐：

JavaScript 易错知识点整理

处理JavaScript异常的方法

JavaScript的数组去重方法

위 내용은 JavaScript의 다양한 순회 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!