Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Commit7d9f571

Browse files
committed
add iterator-generators.md file
1 parent4bbc1ad commit7d9f571

File tree

3 files changed

+139
-6
lines changed

3 files changed

+139
-6
lines changed

‎README.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@ This repository will cover the following topics:
2121
11.[Async/Await](async-await.md)
2222
12.[Classes-Objects](classes-objects.md)
2323
13.[ES6-classes](ES6-classes.md)
24-
14.[Memory](memory.md)
24+
14.[Iterators and Generators](iterators-generators.md)
25+
15.[Memory](memory.md)
2526

2627
---
2728

@@ -86,3 +87,5 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects
8687
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management
8788

8889
https://blog.sessionstack.com/how-javascript-works-memory-management-how-to-handle-4-common-memory-leaks-3f28b94cfbec
90+
91+
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterator_protocol

‎iterators-generators.md‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
2+
##Iterable and Iterator Protocols
3+
4+
As ES6 introduced new syntax, it also introduced new protocols, these protocols can be implemented by any object respecting some conventions.
5+
6+
---
7+
8+
##Iterable protocol:
9+
10+
iterable protocol allows javascript objects to define or customize their iteration behavior such as what values are looped over in a`for .. of` construct.
11+
12+
###Iterable Built-in types:
13+
14+
some types has built-in interation behavior, this means that you can directly contrcut`for .. of` on these types example:
15+
16+
1. Array
17+
2. Map
18+
3. String
19+
20+
####Example 14.0:
21+
22+
```javascript
23+
constmyArray= [1,2,3];
24+
for(constnumof myArray) {
25+
console.log(num);
26+
}
27+
28+
// 1
29+
// 2
30+
// 3
31+
32+
```
33+
34+
As we can see in this example myArray (of type`Array`) has a built-in iteration behavior
35+
36+
---
37+
38+
###Non-iterable type:
39+
40+
An example of non iterable type is`Object`, but we can make an`Object` iterable by implementing`@@iterator` method, this means that the Object or its prototype needs to have a property with key`@@iterator` this is available via a constant`Symbol.iterator`
41+
42+
43+
`Symbol.iterator` is a zero argument function that returns an object, conforming to the iterator protocol
44+
45+
46+
---
47+
48+
49+
##Iterator protocol:
50+
51+
Iterator protocol defines a standard way to produce a sequence of values, an object is iterator when it implements a`next()` method with the following semantics
52+
53+
1. 0 argument function`next()` that returns an object
54+
2. The returned object should contain 2 properties`done` (Boolean) and`value` (Any javascript type value)
55+
56+
---
57+
58+
59+
##How to make an iterable object
60+
61+
As we discussed for an object to be iterable it has to contain a property with key`Symbol.iterator` that contains a 0 argument function, where that function should return an iterator Object that contains`next()` method, where that method returns an Object that contains`value` and`done` properties:D !!!
62+
63+
64+
####Example 14.1:
65+
66+
```javascript
67+
let numbersIterable= {};
68+
// After implementing `Symbol.iterator` numbersIterable became iterable object
69+
numbersIterable[Symbol.iterator]=function() {
70+
let number=0;
71+
// This returned object is called iterator object
72+
return {
73+
next:function() {
74+
if(number<10) {
75+
return { done:false, value:++number };
76+
}else {
77+
return { done:true };
78+
}
79+
}
80+
}
81+
}
82+
// for..of is introduced in ES6 and it is a consumer to iterables, you can't use for..of on non iterable objects
83+
// Since we change `numberIterable` to be iterable now we can use for..of
84+
for(let numof numbersIterable) {
85+
console.log(num);
86+
}
87+
```
88+
89+
---
90+
91+
##How to make an iterator(not iterable) object
92+
93+
As we can see from example 14.1 we had to create iterator object to make`numberIterable` iterable, it is very important to differentiate between`iterable` and`iterator`, in the next example we will create iterator
94+
95+
####Example 14.2:
96+
97+
```javascript
98+
letnumbersIterator=function(max) {
99+
let number=0;
100+
return {
101+
next:function() {
102+
if(number< max) {
103+
return { done:false, value:++number };
104+
}else {
105+
return { done:true };
106+
}
107+
}
108+
}
109+
}
110+
constmyNumbersIterator=numbersIterator(6);
111+
console.log(myNumbersIterator.next().value);// 1
112+
console.log(myNumbersIterator.next().value);// 2
113+
console.log(myNumbersIterator.next().value);// 3
114+
console.log(myNumbersIterator.next().value);// 4
115+
console.log(myNumbersIterator.next().value);// 5
116+
console.log(myNumbersIterator.next().value);// 6
117+
console.log(myNumbersIterator.next().value);// undefined
118+
```
119+
---
120+
121+
##Javascript iterable based constructs:
122+
123+
1.`for-of` loop
124+
2.`[]` array destrcuturing pattern
125+
3.`...` spread operator
126+
127+
128+
---
129+
130+

‎memory.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ It is very important to understand how memory allocation is done, javascript aut
2323

2424
---
2525

26-
####Example14.0:
26+
####Example15.0:
2727

2828
```javascript
2929
var num=10;// allocates memory for number
@@ -51,7 +51,7 @@ The main notion garbage collection algorithms rely on is the notion of reference
5151

5252
This is the most naive garbage collection algorithm. This algorithm reduces the definition of`an object is not needed anymore` to`an object has no other objects referencing it`. An object is considered garbage collectible if there are zero references pointing at this object.
5353

54-
####Example14.1:
54+
####Example15.1:
5555

5656

5757
```javascript
@@ -90,7 +90,7 @@ innerObjNewRef = 1;
9090

9191
There is a limitation when it comes to cycles. In the following example, two objects are created and reference one another, thus creating a cycle. They will go out of scope after the function call, so they are effectively useless and could be freed. However, the reference-counting algorithm considers that since each of the two objects is referenced at least once, neither can be garbage-collected.
9292

93-
####Example14.2:
93+
####Example15.2:
9494

9595
```javascript
9696
functionf() {
@@ -127,7 +127,7 @@ Common memory leak mistakes
127127

128128
In javascript using an undeclared variable will create a new variable in global object, in browser it will be created under`window` object
129129

130-
####Example14.3:
130+
####Example15.3:
131131

132132
In this example we will see how initializing a variable without declaring it can cause an unintended leak.
133133

@@ -140,7 +140,7 @@ temp(); // function execution is done but tempVar is still saved in global objec
140140

141141
We can avoid this by adding`use strict` at the beginning of our javascript file, this will switch to strict mode in javascript execution and prevent such unintended global variables creation.
142142

143-
####Example: 14.3:
143+
####Example 15.3:
144144

145145
In this example we will see how incorrect usage of[`this`](context.md) can cause unintended global variables and as a result Leak.
146146

0 commit comments

Comments
 (0)

[8]ページ先頭

©2009-2025 Movatter.jp