[ES6] Generator에 관하여

Notice

Recent Posts

Recent Comments

Link

« 2018/04 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Tags more

Archives

2017/02 (2)
2017/01 (6)
2016/12 (3)
2016/11 (2)
2016/10 (5)

Today: 24

Total: 53,265

관리 메뉴

KnP House for Daily

[ES6] Generator에 관하여 본문

Web/ES6

[ES6] Generator에 관하여

K.ung 2016.06.14 09:12

/*
	Generator 
	- 정의 : yield 키워드와 함께 사용되어지며 한번에 한개씩 순차적으로 yield구문을 실행한다.
			iterator와 비슷하게 generator객체가 .next() 가 실행될때마다 return 되어지며, yield의 우측 value를 return한다.
	- 형태 : function* (){ yield x;}
	- 특성 : 
		(1) generator는 스레드 하지 않기 때문에 generator와 함께 여러 코드가 실행 되지 않는다.
		(2) generator()의 yield가 실행될때마다 generator의 스택프레임에 스택이 하나씩 제거 되어지지만, 실제로는 참조하고 있기 때문에
			generator()를  재실행시 활성화시켜 다시 실행을 계속한다.
		(3) generator는 iteration의 .next() 와 [Symbol.iterator]() 를 가지고 있다.
 */

// 1) 사용법

// 1-1) iterator -> generator 로 변경

// iterator
const arrNum = [1,2,3,4];
class CustomIterable{
	constructor(arr){
		this.arr = arr;
		this.nextIdx = 0;
	}

[Symbol.iterator]() { return this; }

next(){
		let arr = this.arr;

if(this.nextIdx < arr.length){
			return { value : arr[this.nextIdx++] , done : false };
		}
		return { done : true };
	}
}
let cusomIterable = new CustomIterable([arrNum);
let ir = cusomIterable[Symbol.iterator]();
console.log(ir.next().value); // 1
console.log(ir.next().value); // 2

// generator
const arrNum = [1,2,3,4];

function* range(start, stop){
	for(let i=start ; i<stop ; i++){
		yield i;
	}
}

function go() {
  var start = arrNum[0];
  var stop = arrNum.length;
  for (var value of range(start, stop)) {
    alert("Ding! at floor #" + value);
  }
};

go();

// 1-2) 객체를 iterable 하게 만듬

let fibonacci = {
	*[Symbol.iterator](){
		let first = 0, cur = 1;
		for(;;){
			[first, cur] = [cur, first+cur];
			yield cur;
		}
	}
}

for(let n of fibonacci){
	if(n > 10)
		break;

console.log(n);
}

// 1-3) 배열 생성 함수 가능
function* splitArr(arr, splitLen){
	for(let i=0 ; i<arr.length ; i+=splitLen){
		yield arr.slice(i, i+splitLen);
	}
}

// 1-4) filterling, mapping 과 같은 iterable 을 다루는 도구로 사용이 가능
function* filter(test, iterable){
	for(let item of iterable){
		if(test(item)){
			yield item;
		}
	}
}

// 1-5) next() 파라미터로 전달 되는 값은 generator의 마지막 yield에 전달된다.
function* fibonacci(){
  let fn1 = 0;
  let fn2 = 1;
  while (true){  
	let currnet;
    [current, fn1, fn2] = [fn1, fn2, fn1+fn2]
    let reset = yield current;
    if (reset){
        fn1 = 0;
        fn2 = 1;
    }
  }
}

var sequence = fibonacci();
console.log(sequence.next().value);     // 0
console.log(sequence.next().value);     // 1
console.log(sequence.next().value);     // 1
console.log(sequence.next(true).value); // 0 //restart 
console.log(sequence.next().value);     // 1
console.log(sequence.next().value);     // 1

// 1-6) generator mathcing
// rest parameter 를 사용하여 변수에 할당이 가능

let fibonacci = function* (num){
  let fn1 = 0;
  let fn2 = 1;
  while (num-- > 0){  
	let currnet;
    [current, fn1, fn2] = [fn1, fn2, fn1+fn2]
    yield current;
  }
}

let numbers = [ ...fibonacci(10)];
console.log(numbers); //[0, 1, 1, 2, 3, 5, 8, 13, 21, 34]
let [a,b,c,...numbers] = fibonacci(10);
console.log(a,b,c,numbers); // 0,1,1,[2, 3, 5, 8, 13, 21, 34]

출처 : http://es6-features.org/, ECMAScript 6 길들이기,https://hacks.mozilla.org/category/es6-in-depth/page/2/

공감

sns신고

저작자표시

'Web > ES6' 카테고리의 다른 글

[ES6] Proxy API (0)	2016.06.14
[ES6] WeakMap/Set (0)	2016.06.14
[ES6] Generator에 관하여 (0)	2016.06.14
[ES6] Iteration 의 iterator, iterable 규약 (0)	2016.06.14
[ES6] 새롭게 생긴 primitive type인 Symbol (0)	2016.06.14
[ES6] 새로운 object literal 방식 (0)	2016.06.14

공유하기 링크

페이스북
카카오스토리
트위터

'Web/ES6' Related Articles

0 Comments

댓글쓰기 폼

이름 비밀번호

Secret

내용

Prev 1 ··· 18 19 20 21 22 23 24 25 26 ··· 95 Next

KnP House for Daily

[ES6] Generator에 관하여 본문

[ES6] Generator에 관하여

'Web > ES6' 카테고리의 다른 글

티스토리 툴바