ES6 생성기 및 반복자 : 개발자 안내서

ES6은 JavaScript 언어에 많은 새로운 기능을 도입했습니다. 이 기능 중 두 가지 기능인 발전기 및 반복자는보다 복잡한 프론트 엔드 코드에서 특정 기능을 작성하는 방식을 크게 변경했습니다.

그들이 함께 잘 작동하는 동안 실제 기능은 약간 혼란 스러울 수 있으므로 자세히 살펴 보겠습니다.

키 포인트

es6는 루프에 대한 더 깨끗한 방법을 제공하여 데이터 세트의 요소와 직접 상호 작용하는 더 많은 파이썬과 같은 방법을 제공하여 코드를 쉽게 읽고 쓸 수 있도록합니다.

ES6의 생성기는 각 호출 사이의 상태를 기억하는 함수입니다. 호출 할 때마다 순서대로 다음 값을 생성 할 수 있으며 효과적으로 사용자 정의 반복을 생성 할 수 있습니다.

생성기 함수의"수율 "키워드는"return "과 유사하지만 기능의 상태를 유지하여 다음 호출의 인터럽트에서 계속 실행할 수 있습니다.

노드 및 최신 브라우저는 ES6 기능을 지원하는 반면, 이전 브라우저는 Babel과 같은 번역기가 ES6 코드를 ECMAScript 5 코드로 변환하도록 요구할 수 있습니다.
반복자
• 반복은 프로그래밍의 일반적인 관행이며, 일반적으로 일련의 값을 루프하거나 각 값을 변환하거나 나중에 사용하기 위해 어떤 방식으로 사용하거나 저장하는 데 사용됩니다.
JavaScript에서는 항상 루프에 대한 그런 것들을 가지고 있습니다 :
그러나 ES6은 또 다른 옵션을 제공합니다
• 이것은 아마도 더 간결하고 사용하기 쉬우므로 Python 및 Ruby와 같은 언어를 상기시켜줍니다. 그러나이 새로운 반복에 대해 주목해야 할 또 다른 중요한 사항이 있습니다. 데이터 세트의 요소와 직접 상호 작용할 수 있습니다.
배열의 각 숫자가 소수인지 확인하고 싶다고 가정합니다. 이를 수행하는 함수를 만들어이 작업을 수행 할 수 있습니다. 다음과 같이 보일 수 있습니다

세계에서 최고는 아니지만 작동합니다. 다음 단계는 숫자 목록을 루프하고 반짝이는 새 기능을 사용하여 각 숫자가 프라임인지 확인하는 것입니다. 매우 간단합니다 :

다시, 그것은 작동하지만, 그것은 서투르며,이 서투른 것은 주로 JavaScript가 루프에 대한 처리 방식에 달려 있습니다. 그러나 ES6을 사용하면 새로운 반복기에서 거의 파이썬과 같은 옵션을 얻습니다. 따라서, 이전의 루프는 다음과 같이 쓸 수 있습니다 :

이것은 훨씬 깨끗하지만 가장 눈에 띄는 것은 for 루프입니다. 변수 i는 이제 vosivePrimes라는 배열의 실제 항목을 나타냅니다. 따라서 더 이상 인덱스로 호출 할 필요가 없습니다. 이것은 우리가 루프에서 가능한 프리임스 [i]를 호출 할 필요가 없지만 i를 호출한다는 것을 의미합니다.

뒤에서이 반복은 ES6의 반짝이는 새 Symbol.erator () 메소드를 활용합니다. 이 방법은 반복을 설명하는 데 도움이되며 호출되면 루프의 다음 값을 포함하는 JavaScript 객체와 루프가 완료되는지에 따라 true 또는 false입니다.

이 세부 사항에 관심이 있다면 Jake Archibald 의이 멋진 블로그 게시물 "Iterators Gonnate Irate"를 읽을 수 있습니다. 우리는이 기사의 다른 부분 인 발전기를 파헤 치면서도 무대 뒤에서 무슨 일이 일어나고 있는지에 대한 좋은 아이디어를 제공합니다.

발전기 발전기 ( "ITER Factory"라고도 함)는 특정 반복을 생성하는 데 사용되는 새로운 유형의 JavaScript 함수입니다. 그들은 당신에게 컨텐츠를 통해 반복 할 수있는 특별한 맞춤형 방법을 제공합니다.

알았어, 그럼 무슨 뜻이야? 예를 살펴 보겠습니다. 우리가 함수를 원하고 호출 할 때마다 다음 소수가 주어집니다.

당신이 JavaScript에 익숙하다면,이 물건 중 일부는 마법과 비슷해 보이지만 실제로는 나쁘지 않습니다. 키워드 기능 후에 이상한 별표가 있지만 JavaScript에 생성기를 정의하고 있다고 말합니다.

또 다른 이상한 부분은 수율 키워드입니다. 이것은 실제로 발전기가 부르는 것입니다. 반환과 거의 동일하지만 호출 할 때마다 모든 것을 다시 시작하는 대신 함수의 상태를 유지합니다. 런타임시 위치를 "기억"하므로 다음에 전화 할 때 인터럽트에서 계속됩니다.

이것은 우리가 이것을 할 수 있다는 것을 의미합니다 :

그러면 우리가 얻고 싶을 때마다 - 당신은 그것을 추측했습니다 - 다음 소수, 우리는 다음 프라이움에 전화 할 수 있습니다 :

당신은 또한 다음과 같은 객체를 반환하기 때문에 발전기가 무한하지 않을 때 유용한 NextPrime.next ()를 호출 할 수 있습니다.

for (var i = 0; i < foo.length; i++) {
  // 对i执行某些操作
}

여기서, 완료 키는 함수가 작업을 완료했는지 여부를 알려줍니다. 우리의 경우, 우리의 기능은 끝나지 않으며, 이론적으로 모든 소수를 무한대로 제공합니다 (컴퓨터 메모리가 많은 경우).

<,> 멋지다. 그래서 지금 생성기와 반복자를 사용할 수 있습니까?

ECMAScript 2015가 완료되었으며 수년 동안 주변에 있었지만 기능 (특히 발전기)에 대한 브라우저 지원은 완벽하지 않습니다. 이 이러한 현대 기능과 다른 현대적인 기능을 사용하려면 ECMAScript 2015 코드를 ECMAScript 5 코드와 동등한 (가능한 경우) ECMAScript 5 코드로 변환하는 Babel 및 Traceur와 같은 번역기를 살펴볼 수 있습니다.

ECMAScript 2015를 지원하거나 특히 Facebook의 재생기 및 JS Bin에 중점을 둔 많은 온라인 편집자도 있습니다. 당신이 그냥 플레이하고 지금 JavaScript가 쓰여진 방법을 배우고 싶다면, 이것들은 가치가 있습니다.

결론 <🎜 🎜> 발전기 및 반복자는 JavaScript 문제에 대한 우리의 접근 방식에 대한 많은 새로운 유연성을 제공합니다. 반복자를 통해 우리는 더 많은 파이썬과 같은 방식으로 루프를 쓸 수있게되므로 코드는 더 깨끗하고 읽기 쉬운 것으로 보입니다.

생성기 함수를 통해 우리는 마지막으로 본 위치를 기억하는 기능을 작성하고 인터럽트에서 계속 실행할 수 있습니다. 또한 실제로 기억하는 측면에서 무한 할 수 있으며 경우에 따라 매우 편리합니다.

for (const i of foo) {
  // 对i执行某些操作
}

이 발전기와 반복자에 대한 지원이 좋습니다. 인터넷 익스플로러를 제외한 노드와 모든 현대식 브라우저에서 지원됩니다. 이전 브라우저를 지원 해야하는 경우 가장 좋은 방법은 Babel과 같은 번역기를 사용하는 것입니다.

ECMAScript 2015 발전기 및 반복자 (FAQ) ECMAScript 2015의 반복자와 발전기의 차이점은 무엇입니까?

반복자와 생성기는 모두 ECMAScript 2015의 기능이며 데이터 흐름을 처리하는 데 사용됩니다. 반복자는 프로그래머가 컬렉션의 모든 요소를 ​​반복 할 수있는 객체입니다. 다음 항목을 순서대로 리턴하는 다음 () 메소드가 있습니다. 반면에, 발전기는 중간 멈추고 정지에서 계속할 수있는 함수입니다. 다시 말해, 생성기는 함수처럼 보이지만 반복자처럼 작동합니다.

ECMAScript 2015에서 수율 키워드를 사용하는 방법은 무엇입니까?

수율 키워드는 ECMAScript 2015 일시 정지 및 복원 생성기 기능 (함수* 또는 레거시 생성기 함수)에 사용됩니다. 수율은 생성기 함수에서 값을 반환 할 수 있습니다. 이 반환 값은 일반적으로 값과 완료의 두 가지 속성을 가진 객체입니다. 값 속성은 수율 표현식을 계산 한 결과이며, 수행 된 부울 값은 발전기가 마지막 값을 생성했는지 여부를 나타내는 부울 값입니다.

ECMAScript 2015에서 다음 () 메소드의 목적은 무엇입니까?

다음 () 메소드는 ECMAScript 2015의 반복자 프로토콜의 핵심 부분입니다. 값과 완료라는 두 가지 속성이있는 객체를 반환합니다. 값 속성은 반복 시퀀스의 다음 값이며 반복이 완료되는지 여부를 나타내는 부울 값입니다. 완료되면 반복자가 반복 시퀀스의 끝을 초과했습니다.

ECMAScript 2015에서 비동기 프로그래밍에 생성기를 사용하는 방법은 무엇입니까?

ECMAScript 2015의 발전기는 비동기 프로그래밍을 단순화하는 데 사용될 수 있습니다. 전체 프로그램을 차단하지 않고 비동기 작업이 완료 될 때까지 실행을 차단하는 데 사용할 수 있습니다. 이로 인해 비동기 코드가 보이고 동기 코드처럼 행동 할 수 있습니다.이 코드는 이해하기 쉽고 이유가 있습니다.

ecmascript 2015의 루프에서…

ecmascript 2015의 루프의 for… 각기 다른 속성의 값에 대해 실행될 진술을 사용하여 사용자 정의 반복 후크를 호출합니다. 반면에, for… in loop은 객체의 특성을 통과하는 데 사용됩니다. 반복되는 객체의 키 목록을 반환합니다.

ECMAScript 2015에서 사용자 정의 반복자를 만드는 방법은 무엇입니까?

ECMAScript 2015에서 다음 () 메소드가있는 객체를 정의하여 사용자 정의 반복기를 만들 수 있습니다. 이 방법은 값과 완료의 두 가지 속성이있는 객체를 반환해야합니다. 값 속성은 반복 시퀀스의 다음 값이며 반복이 완료되는지 여부를 나타내는 부울 값입니다.

ECMAScript 2015에서 Symbol.iterator의 역할은 무엇입니까?

Symbol.iterator는 ECMAScript 2015의 특수 내장 기호입니다. 객체의 기본 반복자를 지정하는 데 사용됩니다. 객체를 반복 해야하는 경우 (예를 들어…

ECMAScript 2015에서 발전기 기능의 예를 제공 할 수 있습니까?

물론 이것은 ECMAScript 2015의 발전기 기능의 간단한 예입니다.

<,>이 예에서 idmaker 함수는 일련의 숫자를 생성하는 생성기입니다.

ECMAScript 2015에서 Throw () 메소드 및 생성기를 사용하는 방법은 무엇입니까?

<)> ECMAScript 2015의 Throw () 메소드는 발전기 기능의 실행을 복원하고 수율 표현식에서 오류를 던지기 위해 생성기에서 사용될 수 있습니다. Throw () 메소드를 사용하여 생성기 함수 실행 중에 발생하는 오류를 처리 할 수 ​​있습니다.

for (var i = 0; i < foo.length; i++) {
  // 对i执行某些操作
}

ECMAScript 2015 반복자에서 완료 된 속성의 중요성은 무엇입니까?

완성 된 속성은 ECMAScript 2015의 반복자가 반환 한 부울 값입니다. 반복자가 더 많은 값을 반환할지 여부를 나타냅니다. 완료되면 반복자가 반복 시퀀스의 끝을 초과했습니다. 완료된 경우 반복자는 여전히 더 많은 값을 생성 할 수 있습니다.

위 내용은 ES6 생성기 및 반복자 : 개발자 안내서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!