diff --git a/img/ts/forof.JPG b/img/ts/forof.JPG new file mode 100644 index 0000000..b58a47f Binary files /dev/null and b/img/ts/forof.JPG differ diff --git a/typescript/ts-study-group.md b/typescript/ts-study-group.md index 8a7f9b5..3229393 100644 --- a/typescript/ts-study-group.md +++ b/typescript/ts-study-group.md @@ -2,23 +2,101 @@ http://www.typescriptlang.org/docs/handbook/iterators-and-generators.html +TypeScript 2.3 adds full support for generators and the Iterator -## Outline +https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-3.html -Iterator and Iterables +## Iterator and Iterables https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Iteration_protocols +> In order to be iterable, an object must implement the @@iterator method, meaning that the object (or one of the objects up its prototype chain) must have a property with a @@iterator key which is available via constant Symbol.iterator -有哪些 & 例子(array, string) +iterable, 允許 JavaScript 物件定義或客制他們的迭代行為。例如哪些值可在 for..of 語法結構中被迭代出來。 -for..of statements +* Default is an iterable object: + * Array + * Map + * Set + * String -for..of vs. for..in statements +## for..of statements -what is generator +> <code>for..of</code> loops over an iterable object, invoking the Symbol.iterator property on the object. -怎麼使用 generator +印出 target iterable object 的 value + +```js +let someArray = [1, "string", false]; + +for (let entry of someArray) { + console.log(entry); // 1, "string", false +} +``` + +### Implement <code>for..of</code> by youself (compile result) + +```js +let numbers = [1, 2, 3]; +for (let num of numbers) { + console.log(num); +} +``` + +```js +var numbers = [1, 2, 3]; +for (var _i = 0; _i < numbers.length; _i++) { + var num = numbers[_i]; + console.log(num); +} +``` + +## for..of vs. for..in statements + +> <code>for..in</code> returns a list of keys on the object being iterated, whereas <code>for..of</code> returns a list of values of the numeric properties of the object being iterated. + +<code>for..in</code> 回傳 key + +<code>for..of</code> 回傳 value + + +```js +let list = [4, 5, 6]; + +for (let i in list) { + console.log(i); // "0", "1", "2", +} + +for (let i of list) { + console.log(i); // "4", "5", "6" +} +``` + +> <code>for..in</code> operates on any object; it serves as a way to inspect properties on <strong>this object</strong>. <code>for..of</code> on the other hand, is mainly interested in values of <strong>iterable objects</strong>. + +```js +let pets = new Set(["Cat", "Dog", "Hamster"]); +pets["species"] = "mammals"; + +for (let pet in pets) { + console.log(pet); // "species" +} + +for (let pet of pets) { + console.log(pet); // "Cat", "Dog", "Hamster" +} +``` + +<code>for..in</code> 專注於這個物件 + +<code>for..of</code> 專注於 iterable objects + + + + +## what is generator + +## 怎麼使用 generator ## Reference