Javascript 반복자에 대한 실용적인 설명(데모 앱 포함)

17938 단어 es6tutorialsjavascript

반복자란 무엇입니까?



Iterators 평신도 용어로 객체 컬렉션을 반복하는 데 사용됩니다. 반복자는 ES6(EcmaScript6) 기능이며 일시 중지할 수 있는 고급 루프입니다. 반복자는 다음 항목을 반환하는 next() 메서드를 제공합니다. 시퀀스에서 value 속성을 사용하여 현재 항목의 값에 액세스할 수 있으며, next() 메서드가 done 속성이 true로 설정된 객체를 반환할 때 반복자는 종료된 것으로 간주됩니다.
다음은 아래 예입니다.

     function Iterator(names){
        //set the index to 0
        let nextIndex = 0;
        return {
            next() {
            return nextIndex < names.length 
                    ?
                {value:names[nextIndex++], done:false}
                    : 
                {done:true}
            }
        }
    }
    //Create an array
    let names = ['wale', 'ali', 'john', 'bubu'];
    //pass the array into the Iterator function
    let name = Iterator(names);
    console.log(name.next().value);//wale
    console.log(name.next().value);//ali
    console.log(name.next().value);//john
    console.log(name.next().value);//bubu
    console.log(name.next().value);//undefined


위의 코드에서 처음 네 번의 호출은 배열의 처음 네 항목의 값을 제공하고, 마지막 항목은 배열에 반복할 항목이 더 이상 없기 때문에 반복이 종료되었기 때문에 정의되지 않은 값을 반환합니다.
아래는 콘솔 출력입니다.


데모 앱을 구축하여 반복자에 대해 실질적으로 설명할 것이므로 실제 응용 프로그램에서 반복자가 사용되는 개요를 제공합니다. 이 앱에서는 https://api.github.com/users에서 데이터를 가져옵니다. 처음 46명의 사용자 프로필을 보려면
다음은 HTML 구조입니다.

    <!doctype html>
<html lang="en">
  <head>
    <title>Profile Scroller</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-6 mx-auto text-center">
          <h1 class="mb-3">Profile Scroller</h1>
          <div id="imageDisplay"></div>
          <br>
          <div id="profileDisplay"></div>
          <br>
          <button id="next" class="btn btn-dark btn-block">Next</button>
        </div>
      </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
    <script src="app.js"></script>
  </body>
</html>


아래는 자바스크립트 코드

         //create the function
  function Iterator(profile) {
    //set the index to 0
    let nextIndex = 0;

    return {
      next() {
        return nextIndex < profile.length 
              ?
          {value: profile[nextIndex++], done: false}
              :
          {done: true}
      }
    }
  }
  //html classes and ids stored in object
  let selector = {
    next : 'next',
    profile : 'profileDisplay',
    image: 'imageDisplay'
  }

//Using AJAX to fetch data
  var xhr = new XMLHttpRequest();

  xhr.open('GET', 'https://api.github.com/users', true);

  xhr.onload = function() {
    if (this.status === 200) {
      let data = JSON.parse(this.responseText);
      //pass the data coming in from the API into the iterator function
      let profile = Iterator(data);
      //call the load function to load the first profile
      loadProfile();
      //create an event listener for the button
      document.getElementById(selector.next).addEventListener('click', loadProfile);

      function loadProfile() {
        //get the value of the current and next data
        const currentProfile = profile.next().value
          //check if the current value is not undefined
          if(currentProfile !== undefined){
            document.getElementById(selector.profile).innerHTML =
            `<ul class="list-group">
                    <li class="list-group-item">Login: ${currentProfile.login}</li>
                    <li class="list-group-item">Id: ${currentProfile.id}</li>
                    <li class="list-group-item">Type: ${currentProfile.type}</li>
              </ul>
            `
            document.getElementById(selector.image).innerHTML = `<img src="${currentProfile.avatar_url}" class="w-25">`;
          }
        else {
          //reload the page after the last iteration
          window.location.reload();
        }
      }
    }
  }
  xhr.send()


위의 코드에서 Iterator 함수가 생성되었고 API에서 가져온 데이터가 Iterator 함수로 전달되었습니다. API에서 브라우저에 표시되는 아바타, 로그인, ID 및 유형에 액세스할 수 있습니다. , 마지막 반복 후 페이지가 다시 로드되고 loadProfile 함수가 다시 호출됩니다.

아래는 브라우저의 출력입니다.


메모



Generators도 있지만 Generators은 이터레이터와 약간 다릅니다. 가져오는 데이터를 생성할 수 있고 외부 API에서 데이터를 가져올 수도 있습니다.
다음은 앱에 대한 link입니다.
읽어주셔서 감사합니다. 즐거운 코딩 되세요!
OpenLayers3 고덕 맵 로드
이동 속도 제한

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage