자바스크립트 순회방법_자바스크립트 스킬에 대한 자세한 설명

예제 설명을 쉽게 하기 위해 기존 배열과 json 객체는 다음과 같습니다

var demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular'];
var demoObj = {
 aaa: 'Javascript',
 bbb: 'Gulp',
 ccc: 'CSS3',
 ddd: 'Grunt',
 eee: 'jQuery',
 fff: 'angular'
};

를 위해

예제만 봐도 알겠지만, 너무 많이 사용해서 아주 간단해요

(function() {
 for(var i=0, len=demoArr.length; i<len; i++) {
 if (i == 2) {
 // return; // 函数执行被终止
 // break; // 循环被终止
 continue; // 循环被跳过
 };
 console.log('demo1Arr['+ i +']:' + demo1Arr[i]);
 }
})();
关于for循环，有一下几

for 루프에 관해서는 다음과 같은 주의사항이 있습니다

• for 루프의 i는 루프가 끝난 후에도 범위에 여전히 존재합니다. 범위의 다른 변수에 영향을 주지 않기 위해 함수의 자체 실행을 사용하여 격리됩니다.
• for(var i=0; i

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

• 루프에서 벗어날 수 있는 방법에는 여러 가지가 있습니다

반환 기능 실행이 종료됩니다
break 루프가 종료됩니다
계속 루프를 건너뜁니다
전체 예시

인을 위해

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

각각

demoArr.forEach(함수(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를 사용하는 것과 같습니다
할/동안

함수의 구체적인 구현은 다음과 같은데, 한 가지 주목할 점은 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('demoArr['+ i +']:' + demoArr[i]);
 i ++;
 }
 console.log('------------------------');
})();

// do while
(function() {
 var i = 0,
 len = demo3Arr.length;
 do {
 if (i == 2) {
 break; // 循环被终止
 };
 console.log('demo2Arr['+ i +']:' + demo3Arr[i]);
 i++;
 } while(i<len);
})();

$.each

$.each(demoArr|demoObj, 함수(e, ele))
배열과 객체를 탐색하는 데 사용할 수 있습니다. 여기서 e는 인덱스 값 또는 키 값을 나타내고 ele는 값 값을 나타냅니다.

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

출력은

0 "자바스크립트"
1 "꿀꺽"
2 "CSS3"
3 "그런트"
4 "jQuery"
5 "각진"
여기서 주의할 점이 많습니다

• 루프를 건너뛰고 후속 루프를 계속 실행하려면 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'));
// 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 요소만
• 현재 순회하는 DOM 요소이므로 jQuery 메소드를 호출할 수 없습니다
• $(this) == $(ele) 현재 탐색 중인 요소의 jquery 객체, jquery 메서드를 호출하여 dom 작업을 수행할 수 있습니다

DOMList를 순회하려면 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) {}

类似这样的对象还有函数的属性arguments对象，当然字符串也是可以遍历的，但是因为字符串其他属性的enumerable被设置成了false，因此遍历出来的结果跟数组是一样的，也就不用担心这个问题了.
小补充

如果你发现有些人写函数这样搞，不要惊慌，也不要觉得他高大上。

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助。