ES6 새로운 기능의 Generator
1: 기본 개념
실제로Generator는 트랙터의 생성기입니다. 우리는Generator로 트랙터를 생성할 수 있습니다.Generator는 두 가지 뚜렷한 특징이 있다. 첫 번째는function 키워드와 함수 이름 사이에 별표가 있는데 일반적으로 둘을 함께 쓴다.두 번째는 함수 체내에 yield의 키워드가 있다는 것이다.
function* generator(){
yield 1;
yield 2;
return 3; //return next ， Generator
}
const firstGenerator = generator();
//
firstGenerator.next()
{ value: 1, done: false }
firstGenerator.next()
{ value: 2, done: false }
firstGenerator.next()
{ value: 3, done: true }
firstGenerator.next()
{ value: undefined, done: true }
firstGenerator.next()
{ value: undefined, done: true }2: 프로세스 수행
Generator 함수를 호출한 후에 실행하지 않습니다. 첫 번째 호출은 실행하지 않습니다.next를 호출할 때만 진정으로 실행됩니다.
function* generator(){
console.log(1);
yield 1;
console.log(2);
yield 2;
console.log(3)
return 3;
console.log(4);
}
const gen = generator();다음 상태로 바늘을 이동하기 위해next 방법을 호출합니다
function* generator(){
console.log(1);
yield 1;
console.log(2);
yield 2;
console.log(3)
return 3;
console.log(4);
}
const gen = generator();
gen.next();
// 1
{ value: 1, done: false }yield 또는return 문장까지 실행하면 next마다 다음 yield까지만 가거나 return으로 바로 넘어갈 수 있습니다.
function* generator() {
console.log(1);
yield 1;
console.log(2);
yield 2;
console.log(3);
return 3;
console.log(4);
}
const g = generator();
g.next();
g.next();
// 1
2
{ value: 2, done: false }next가 실행될 때,return,return은 next를 종료하는 표지판입니다.
function* generator() {
console.log(1);
yield 1;
console.log(2);
yield 2;
console.log(3);
return 3;
console.log(4);
}
const g = generator();
g.next();
g.next();
g.next();
g.next();
// 1
2
3
{ value: undefined, done: true }3: Generator 방법
function* generator(x) {
var y = 3 * (yield (x + 3));
var z = yield (y / 2);
return (x + y + z) * 2;
}
const gen1 = generator();
// gen1.next();
{ value: NaN, done: false }
gen1.next();
{ value: NaN, done: false } */
gen1.next();
{ value: NaN, done: false } */
gen1.next();
{ value: undefined, done: true }
function* generator(x) {
var y = 3 * (yield (x + 3));
var z = yield (y / 2);
return (x + y + z) * 2;
}
const gen2 = generator(10);
gen2.next();
// { value: 13, done: false }
/*
x = 10
13 = 10 + 3
*/
gen2.next(10);
// { value: 15, done: false }
/*
y = 30
15 = 3 * 10 / 2
*/
gen2.next(10);
// { value: 100, done: false }
/*
z = 10
100 = (10 + 10 + 30) * 2
*/function* generator(x) {
try {
yield;
} catch (err) {
console.log('inner error', err);
}
}
const g = generator();
g.next();
// { value: undefined, done: false }
g.throw(new Error('123'))
// inner error Error: 1234: Generator 함수 적용
function* generator1(){
yield* [1, 2, 3];
}
generator1().next();
// { value: 1, done: false }
function* generator2(){
for (var value of [1, 2, 3]) {
yield value;
}
}
generator2().next();
// { value: 1, done: false }
function* generator3(){
yield [1, 2, 3];
}
generator3().next();
// { value: Array(3), done: false }5:Generator 함수 적용
function* generator() {
yield 1;
yield 2;
yield 3;
return 4;
}
for (let s of generator()) {
console.log(s);
}
// 1
2
3const status = function* () {
while (true) {
console.log('On');
yield true;
console.log('Off');
yield false;
}
}();
status.next();
// On
{value: true, done: false}import axios from 'axios';
function* generator(){
const url = 'https://xxx.xxx.com';
const result = yield fetch(url);
return result();
}이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JavaScript로 카드 놀이를 넘기는 애니메이션을 만들려고했습니다.카드를 넘기는 애니메이션을 만들어 보았습니다. 폴더 구성은 다음과 같습니다. 코드는 다음과 같습니다. card_turning.html 다음은 JavaScript 코드입니다. cardTurning.js 결과는, 이런 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
