2020年 11月 の投稿一覧

• 2020.11.29

JavaScriptのコンストラクタは、子クラスのインスタンス化を検知できる

'use strict'; const p = console.log; /** * Abstract Class Animal. * * @class Animal */ class Animal { constructor() { p(this.constructor, 'Animalのコンストラクタ'); } } /** * Concrete Class Cat. * * @class Cat */ class Cat extends Animal { constructor() { super(); p(this.constructor, 'Catのコンストラクタ'); } } /** * Concrete Class Mike. * * @class Mike */ class Mike extends Cat { constructor() { super(); p(this.constructor, 'Mikeのコンストラクタ'); } } const constructorsTest1 = () => { p('Mikeのインスタンス化前', new Mike(), 'Mikeのインスタンス化後'); }; // module.exports = constructorsTest1; constructorsTest1();

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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

'use strict';   const p = console.log;   /** * Abstract Class Animal. * * @class Animal */ class Animal {   constructor() {     p(this.constructor, 'Animalのコンストラクタ');   } }   /** * Concrete Class Cat. * * @class Cat */ class Cat extends Animal {   constructor() {     super();       p(this.constructor, 'Catのコンストラクタ');   } }   /** * Concrete Class Mike. * * @class Mike */ class Mike extends Cat {   constructor() {     super();       p(this.constructor, 'Mikeのコンストラクタ');   } }   const constructorsTest1 = () => {   p('Mikeのインスタンス化前', new Mike(), 'Mikeのインスタンス化後'); };   // module.exports = constructorsTest1; constructorsTest1();

[class Mike extends Cat] Animalのコンストラクタ [class Mike extends Cat] Catのコンストラクタ [class Mike extends Cat] Mikeのコンストラクタ Mikeのインスタンス化前 Mike {} Mikeのインスタンス化後

1 2 3 4

[class Mike extends Cat] Animalのコンストラクタ [class Mike extends Cat] Catのコンストラクタ [class Mike extends Cat] Mikeのコンストラクタ Mikeのインスタンス化前 Mike {} Mikeのインスタンス化後

• 2020.11.25

JSの分割代入の練習

'use strict'; const p = console.log; const getArray = () => [123, () => 'hello', 'あいう']; const [a, b] = getArray(); const [c, d, e, f] = getArray(); p('a b() :', a, b()); p('c d() e f :', c, d(), e, f);

1 2 3 4 5 6 7 8 9 10

'use strict';   const p = console.log; const getArray = () => [123, () => 'hello', 'あいう'];   const [a, b] = getArray(); const [c, d, e, f] = getArray();   p('a b() :', a, b()); p('c d() e f :', c, d(), e, f);

a b() : 123 hello c d() e f : 123 hello あいう undefined

1 2	a b() : 123 hello c d() e f : 123 hello あいう undefined

• 2020.11.24

自作のイテレータを自作のジェネレータ関数にかけてみる

/* 自作のイテレータを自作のジェネレータ関数にかけてみる */ 'use strict'; const p = console.log; const generatorFunction = function* (a) { yield* a; }; const createIterableObject = () => { const iterableObject = { [Symbol.iterator]: () => { let cnt = 0; const iterator = { next: () => { if (cnt < 5) { return { value: cnt++, done: false }; } return { value: undefined, done: true }; }, }; return iterator; }, }; return iterableObject; }; const mainIteratorAndGenerator = () => { const myIterableObject = createIterableObject(); const myGenerator = generatorFunction(myIterableObject); p(...myGenerator); // 0 1 2 3 4 p(...myGenerator); // p(...myIterableObject); // 0 1 2 3 4 p(...myIterableObject); // 0 1 2 3 4 }; // module.exports = mainIteratorAndGenerator; mainIteratorAndGenerator();

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 31 32 33 34 35 36 37 38

/* 自作のイテレータを自作のジェネレータ関数にかけてみる */ 'use strict';   const p = console.log;   const generatorFunction = function* (a) {   yield* a; };   const createIterableObject = () => {   const iterableObject = {     [Symbol.iterator]: () => {       let cnt = 0;       const iterator = {         next: () => {           if (cnt < 5) {             return { value: cnt++, done: false };           }           return { value: undefined, done: true };         },       };       return iterator;     },   };   return iterableObject; };   const mainIteratorAndGenerator = () => {   const myIterableObject = createIterableObject();   const myGenerator = generatorFunction(myIterableObject);   p(...myGenerator); // 0 1 2 3 4   p(...myGenerator); //   p(...myIterableObject); // 0 1 2 3 4   p(...myIterableObject); // 0 1 2 3 4 };   // module.exports = mainIteratorAndGenerator; mainIteratorAndGenerator();

0 1 2 3 4 0 1 2 3 4 0 1 2 3 4

1 2 3 4

0 1 2 3 4   0 1 2 3 4 0 1 2 3 4

• 2020.11.23

JavaScriptのGenerator(ジェネレータ)の練習

'use strict'; const p = console.log; // ジェネレータはアロー関数にできないとのこと const gfn = function* (from, to) { while (from <= to) { yield from++; } }; const mainGenerator = () => { const g = gfn(0, 4); const iterator1 = g[Symbol.iterator](); const iterator2 = g[Symbol.iterator](); p(iterator1 === g); // true p(iterator2 === g); // true p(iterator1.next()); // { value: 0, done: false } p(iterator1.next()); // { value: 1, done: false } p(iterator1.next()); // { value: 2, done: false } p(iterator1.next()); // { value: 3, done: false } p(iterator1.next()); // { value: 4, done: false } p(iterator1.next()); // { value: undefined, done: true } p(iterator2.next()); // { value: undefined, done: true } p(iterator2.next()); // { value: undefined, done: true } p(iterator2.next()); // { value: undefined, done: true } p(iterator2.next()); // { value: undefined, done: true } p(iterator2.next()); // { value: undefined, done: true } p(iterator2.next()); // { value: undefined, done: true } }; // module.exports = mainGenerator; mainGenerator();

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 31 32 33 34 35 36 37

'use strict';   const p = console.log;   // ジェネレータはアロー関数にできないとのこと const gfn = function* (from, to) {   while (from <= to) {     yield from++;   } };   const mainGenerator = () => {   const g = gfn(0, 4);     const iterator1 = g[Symbol.iterator]();   const iterator2 = g[Symbol.iterator]();     p(iterator1 === g); // true   p(iterator2 === g); // true     p(iterator1.next()); // { value: 0, done: false }   p(iterator1.next()); // { value: 1, done: false }   p(iterator1.next()); // { value: 2, done: false }   p(iterator1.next()); // { value: 3, done: false }   p(iterator1.next()); // { value: 4, done: false }   p(iterator1.next()); // { value: undefined, done: true }     p(iterator2.next()); // { value: undefined, done: true }   p(iterator2.next()); // { value: undefined, done: true }   p(iterator2.next()); // { value: undefined, done: true }   p(iterator2.next()); // { value: undefined, done: true }   p(iterator2.next()); // { value: undefined, done: true }   p(iterator2.next()); // { value: undefined, done: true } };   // module.exports = mainGenerator; mainGenerator();

true true { value: 0, done: false } { value: 1, done: false } { value: 2, done: false } { value: 3, done: false } { value: 4, done: false } { value: undefined, done: true } { value: undefined, done: true } { value: undefined, done: true } { value: undefined, done: true } { value: undefined, done: true } { value: undefined, done: true } { value: undefined, done: true }

1 2 3 4 5 6 7 8 9 10 11 12 13 14

true true { value: 0, done: false } { value: 1, done: false } { value: 2, done: false } { value: 3, done: false } { value: 4, done: false } { value: undefined, done: true } { value: undefined, done: true } { value: undefined, done: true } { value: undefined, done: true } { value: undefined, done: true } { value: undefined, done: true } { value: undefined, done: true }

• 2020.11.23

JavaScriptのIterator(イテレータ)の練習

'use strict'; const p = console.log; const myIterableObject = { [Symbol.iterator]: () => { let cnt = 0; const iterator = { next: () => { const done = 5 <= cnt; return { value: cnt++, done }; }, }; return iterator; }, }; const processIterable = (iterableObject, callback) => { const iterator = iterableObject[Symbol.iterator](); let ir = iterator.next(); while (!ir.done) { callback(ir); ir = iterator.next(); } }; const mainIterator = () => { p(...myIterableObject); p(...myIterableObject); processIterable(myIterableObject, p); processIterable(myIterableObject, p); }; // module.exports = mainIterator; mainIterator();

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 31 32 33 34 35 36

'use strict';   const p = console.log;   const myIterableObject = {   [Symbol.iterator]: () => {     let cnt = 0;     const iterator = {       next: () => {         const done = 5 <= cnt;         return { value: cnt++, done };       },     };     return iterator;   }, };   const processIterable = (iterableObject, callback) => {   const iterator = iterableObject[Symbol.iterator]();   let ir = iterator.next();   while (!ir.done) {     callback(ir);     ir = iterator.next();   } };   const mainIterator = () => {   p(...myIterableObject);   p(...myIterableObject);     processIterable(myIterableObject, p);   processIterable(myIterableObject, p); };   // module.exports = mainIterator; mainIterator();

0 1 2 3 4 0 1 2 3 4 { value: 0, done: false } { value: 1, done: false } { value: 2, done: false } { value: 3, done: false } { value: 4, done: false } { value: 0, done: false } { value: 1, done: false } { value: 2, done: false } { value: 3, done: false } { value: 4, done: false }

1 2 3 4 5 6 7 8 9 10 11 12

0 1 2 3 4 0 1 2 3 4 { value: 0, done: false } { value: 1, done: false } { value: 2, done: false } { value: 3, done: false } { value: 4, done: false } { value: 0, done: false } { value: 1, done: false } { value: 2, done: false } { value: 3, done: false } { value: 4, done: false }

• 2020.11.22

スプレッド構文はイテラブルなオブジェクトを展開する構文である

/* イテレータリザルト：valueとdoneを持つオブジェクト イテレータ：イテレータリザルトを返却するメソッドnextを持つオブジェクト イテラブルなオブジェクト：イテレータを返却するメソッド[Symbol.iterator]を持つオブジェクト スプレッド構文：イテラブルなオブジェクトを展開する構文...。実行結果は配列にはならない */ 'use strict'; const p = console.log; const myIterableObject = { [Symbol.iterator]: () => { let cnt = 100; const iterator = { next: () => { if (cnt < 105) { return { value: cnt++, done: false }; } return { value: undefined, done: true }; }, }; return iterator; }, }; const mainSpread = () => { p(...myIterableObject); p(...[1, 2, 3, 4, 5]); p(...[1, 2, 3, 4, 5].keys()); }; // module.exports = mainSpread; mainSpread();

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 31 32 33 34

/* イテレータリザルト：valueとdoneを持つオブジェクト イテレータ：イテレータリザルトを返却するメソッドnextを持つオブジェクト イテラブルなオブジェクト：イテレータを返却するメソッド[Symbol.iterator]を持つオブジェクト スプレッド構文：イテラブルなオブジェクトを展開する構文...。実行結果は配列にはならない */   'use strict';   const p = console.log;   const myIterableObject = {   [Symbol.iterator]: () => {     let cnt = 100;     const iterator = {       next: () => {         if (cnt < 105) {           return { value: cnt++, done: false };         }         return { value: undefined, done: true };       },     };     return iterator;   }, };   const mainSpread = () => {   p(...myIterableObject);   p(...[1, 2, 3, 4, 5]);   p(...[1, 2, 3, 4, 5].keys()); };   // module.exports = mainSpread; mainSpread();

100 101 102 103 104 1 2 3 4 5 0 1 2 3 4

1 2 3

100 101 102 103 104 1 2 3 4 5 0 1 2 3 4

• 2020.11.22

イテレータの練習。0から4までの整数を回せるイテラブルなオブジェクト

'use strict'; const p = console.log; // 0から4までの整数を回せるイテラブルなオブジェクト const myIterableObject = { [Symbol.iterator]: () => { let cnt = 0; return { next: () => { if (cnt < 5) { return { value: cnt++, done: false }; } return { value: undefined, done: true }; }, }; }, }; p('<1回目のfor>'); for (const e of myIterableObject) { p(e); } p('<2回目のfor>'); for (const e of myIterableObject) { p(e); }

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

'use strict';   const p = console.log;   // 0から4までの整数を回せるイテラブルなオブジェクト const myIterableObject = {   [Symbol.iterator]: () => {     let cnt = 0;     return {       next: () => {         if (cnt < 5) {           return { value: cnt++, done: false };         }         return { value: undefined, done: true };       },     };   }, };   p('<1回目のfor>'); for (const e of myIterableObject) {   p(e); }   p('<2回目のfor>'); for (const e of myIterableObject) {   p(e); }

<1回目のfor> 0 1 2 3 4 <2回目のfor> 0 1 2 3 4

1 2 3 4 5 6 7 8 9 10 11 12

<1回目のfor> 0 1 2 3 4 <2回目のfor> 0 1 2 3 4