> 웹 프론트엔드 > JS 튜토리얼 > JavaScript Iterator 패턴 구현 방법 및 사용 예에 ​​대한 자세한 설명

JavaScript Iterator 패턴 구현 방법 및 사용 예에 ​​대한 자세한 설명

伊谢尔伦
풀어 주다: 2017-07-24 14:20:44
원래의
1728명이 탐색했습니다.

반복자 패턴은 객체의 내부 표현을 노출하지 않고 집계 객체의 개별 요소에 순차적으로 액세스하는 방법을 제공하는 것을 의미합니다.

1. jQuery의 반복자


$.each([1, 2, 3], function(i, n) {
  console.log("当前下标为:"+ i + " 当前元素为:"+ n );
});
로그인 후 복사

2. 자신만의 반복자 구현


var each = function(ary, callback) {
  for(var i = 0, l = ary.length; i < l; i++) {
    callback.call(ary[i], i, ary[i]);
  }  
};
each([1, 2, 3], function(i, n) {
  console.log("当前下标为:"+ i + " 当前元素为:"+ n );
});
로그인 후 복사


[1, 2, 3].forEach(function(n, i, curAry){
  console.log("当前下标为:"+ i + " 当前元素为:"+ n + " 当前数组为:" + curAry);
})
로그인 후 복사

3. 내부 반복자, 외부 반복자

(1) 내부 iterator: 반복 규칙이 정의되어 전체 반복 프로세스를 완전히 담당하며 외부에서 초기 호출만 필요합니다. 위의 사용자 정의 각각은 내부 반복자입니다!
(2) 외부 반복자: 다음 요소의 반복은 명시적으로 요청되어야 합니다.
예: 두 배열이 동일한지 확인

예 1: 내부 반복기


// 内部迭代器
var each = function(ary, callback) {
  for(var i = 0, l = ary.length; i < l; i++) {
    callback.call(ary[i], i, ary[i]);
  }  
};
// 比较函数
var compareAry = function(ary1, ary2) {
  if(ary1.length != ary2.length) {
    throw new Error("不相等"); // return console.log("不相等"); 
  }
  // 且住
  each(ary1, function(i, n) {
    if(n !== ary2[i]) {
      // return console.log("不相等"); 
      // return 只能返回到each方法外,后续console.log("相等")会继续执行,所以这里得使用throw
      throw new Error("不相等");
    }
  });
  console.log("相等");
}

compareAry([1, 2, 3], [1, 2, 4]);
로그인 후 복사

예 2: 외부 반복기


// 外部迭代器
var Iterator = function(obj) {
  var current = 0,
    next = function() {
      current++;
    },
    isDone = function() {
      return current >= obj.length;  
    },
    getCurrentItem = function() {
      return obj[current];
    };
  return {
    next: next,
    isDone: isDone,
    getCurrentItem: getCurrentItem
  };
};
// 比较函数
var compareAry = function(iterator1, iterator2) {
  while( !iterator1.isDone() && !iterator2.isDone() ){
    if(iterator1.getCurrentItem() !== iterator2.getCurrentItem()) {
      throw new Error("不相等");
    }
    iterator1.next();
    iterator2.next();
  }
  console.log("相等");
}

compareAry(new Iterator([1, 2, 3]), new Iterator([1, 2, 4]));
로그인 후 복사

4. 반복기 종료


var each = function(ary, callback) {
  for(var i = 0, l = ary.length; i < l; i++) {
    if(callback.call(ary[i], i, ary[i]) === false) {
      break;
    }
  }
}

each([1, 2, 4, 1], function(i, n) {
  if(n > 3) {
    return false;
  }
  console.log(n);
});
로그인 후 복사
.

위 내용은 JavaScript Iterator 패턴 구현 방법 및 사용 예에 ​​대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿