다양한 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<) 사용을 피하세요. ;demo1Arr.length; i++){}, 이러한 배열의 길이는 매번 계산되므로 위의 방법보다 효율성이 떨어집니다. 가독성을 높이기 위해 for 앞에 변수 선언을 넣을 수도 있습니다

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 키 값을 나타냅니다. arr 키 값에 해당하는 obj[item] 값을 나타냅니다

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

for 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

decoArr.forEach(function(arg) {})

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

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

구체적으로 주의할 점은 다음과 같습니다

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

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

• forEach는 break를 사용할 수 없으며 계속해서 루프에서 빠져나올 수 없습니다. return을 사용할 때 효과는 사용하는 것과 같습니다. 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를 사용하여 루프를 계속 건너뛸 수 없습니다

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

console.log(this);
//String {0: "C", 1: "S", 2: "S", 3: "3", length: 4, [[PrimitiveValue]]: "CSS3"}

console.log(this == ele);
// true

• 위의 this 값에 대해

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

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

<를 순회합니다. 🎜>

길이와 [[PrimitiveValue]]가 통과되지 않는 이유는 무엇입니까? 갑자기 생각이 나서 "Javascript Advanced 프로그래밍"에서 답을 찾았습니다. 아마도 JavaScript의 내부 속성에서 객체 데이터 속성의 Enumerable을 false

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

로 설정한다는 의미일 것입니다. $.each $(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 요소만
현재 순회 중인 이 DOM 요소 traversed , jQuery 메소드를 호출할 수 없습니다
$(this) == $(ele) 현재 트래버스된 요소의 jquery 객체, jquery 메소드를 호출하여 dom 작업을 수행할 수 있습니다
for in을 사용하여 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) {}

로 변환해야 합니다.

이와 같은 객체도 함수의 속성 인수 객체를 갖고 있으며, 물론 문자열 순회도 가능하지만, 문자열의 다른 속성의 열거 가능 값이 false로 설정되어 있기 때문에 순회 결과는 동일합니다.

작은 보충

어떤 사람들이 함수를 작성할 때 이렇게 하는 것을 발견하면 당황하지 마세요. 새를 살 여유가 없을 정도로 마음이 너무 높다고 생각하지 마세요

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

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

 以上就是JavaScript 各种遍历方式详解，有你不知道的黑科技的内容，更多相关内容请关注PHP中文网（www.php.cn）！