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은 키 값에 해당하는 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을 사용하여 루프에서 벗어나는 것은 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는 break를 사용할 수 없으며, continue는 루프에서 빠져나오고, return을 사용할 때 효과는 for 루프에서 continue를 사용하는 것과 같습니다.

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

• 위의 이 값에 대해

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

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

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

를 falseEnumerable

// 查看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 요소는 jQuery 메서드를 호출할 수 없습니다.

• $(this) == $(ele) 현재 탐색 중인 요소의 jquery 객체는 jquery 메서드를 호출하여 dom 작업을 수행할 수 있습니다.

• DOMList를 탐색하려면 for in을 사용하세요

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로 설정되어 있으므로 순회 결과는 배열과 동일하므로 이 문제에 대해 걱정할 필요가 없습니다.

enumerable 작은 추가

어떤 사람들이 이런 함수를 작성하는 경우 당황하지 마십시오. 새를 살 여유가 없을 정도로 마음이 너무 높다고 생각하지 마세요

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

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

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