다양한 자바스크립트 순회 방법, 당신이 모르는 블랙 기술이 있다

예제 설명을 용이하게 하기 위해 기존 배열과 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 루프가 종료됩니다

계속 루프가 건너뜁니다

전체 인스턴스

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, 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 루프에서 continue를 사용하는 것과 효과가 같습니다

　do/while

　The 함수의 구체적인 구현은 다음과 같은데, 한 가지 주목할 점은 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의 내부 속성에서 객체 데이터 속성의 Enumerable을 false로 설정한다는 의미일 것입니다.

// 내부 속성 보기 length

console.log(Object.getOwnPropertyDescriptor(this, 'length'));
// 객체 {값: 4, 쓰기 가능: false, 열거 가능: false, 구성 가능: false}

$.$(this)는 이것과 다르지만 순회 결과는 동일합니다.

　$(selecter).each

DOMList를 탐색하는 데 특별히 사용됨

i: 시퀀스 값 ele: 현재 탐색된 DOM 요소만

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

현재 탐색된 이 DOM 요소는 jQuery 메서드를 호출할 수 없습니다.

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

DOMList를 순회하려면 for in을 사용하세요

domList는 domList가 아니기 때문에 배열인데 Object는 키 값이 0, 1, 2...라는 점만으로도 배열과 비슷한 느낌이 들지만 직접 순회한 결과는 다음과 같습니다

따라서 domList를 탐색하려면 domList를 사용해야 합니다. 배열로 변환

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() {}

var res = [].slice.call(domList);

for(var item in res) {}

이와 같은 객체에도 함수가 있습니다. 속성 인수 객체도 물론 문자열도 순회할 수 있지만 문자열의 다른 속성의 열거 가능 항목이 false로 설정되어 있으므로 순회 결과는 배열과 같습니다. 이므로 이 문제에 대해 걱정할 필요가 없습니다.

　작은 보충

어떤 사람들이 이런 함수를 작성하는 것을 발견하면 당황하지 말고, 그렇게 생각하지 마십시오. 너무 거만한

()(), !function() {}() +function() {}() 함수 자체 실행의 세 가지 방법^_^

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