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(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

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를 사용할 수 없으며 루프에서 계속 점프할 수 없습니다. 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, 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'));
// 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) {}

이와 같은 객체에는 함수의 속성 인수 객체도 있습니다. 물론 문자열도 순회할 수 있지만 문자열의 다른 속성의 열거 가능 항목이 false로 설정되어 있으므로 순회 결과는 배열과 동일합니다. 즉, 더 이상 이 문제에 대해 걱정하지 마세요.
소량 추가

어떤 사람들이 이와 같은 함수를 작성하는 것을 발견하더라도 당황하지 말고 그들이 너무 고상해서 새를 살 여유가 없다고 생각하지 마십시오

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

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