Web Design Leaves

if(true) {
  let foo = "foo";
  console.log(foo);  //foo
}
console.log(foo);  //Uncaught ReferenceError: foo is not defined
//ブロックの外からアクセスしようとするとエラーになります。

let foo;  //宣言と初期化
foo = "foo";  //値の代入
console.log(foo);  //foo

foo = "foo2";  //値の再代入
console.log(foo);   //foo2

let foo = "foo3";  //Uncaught SyntaxError: Identifier 'foo' has already been declared
//同じ変数を再度宣言するとエラーになります。

function myfunc() {
  console.log(foo); //Uncaught ReferenceError: Cannot access 'foo' before initialization
  let foo = 'foo';
}
myfunc(); 

let foo = 'foo';
console.log(window.foo);  //undefined

var bar = 'bar';  //var キーワードで宣言
console.log(window.bar);  //bar

boo = 'boo';  //キーワードなしで宣言。
// "use strict" を指定している場合はエラー（ReferenceError: boo is not defined）
console.log(window.boo);   //boo

if(true) {
  const foo = "foo";
  console.log(foo);  //foo
}
console.log(foo);  //Uncaught ReferenceError: foo is not defined
//ブロックの外からアクセスしようとするとエラーになります。

const foo;  //エラー Uncaught SyntaxError: Missing initializer in const declaration

const foo = null;  //値がなく変更できない変数
console.log(foo);  //null

const foo = 'foo';  //値を代入して初期化
foo = 'new foo'; //エラー Uncaught TypeError: Assignment to constant variable.

const array = [ 'a', 'b', 'c' ];
//const i の後に i++ があり再代入になる Uncaught TypeError: Assignment to constant variable.
for(const i = 0; i < array.length; i++) {  //エラー
  console.log(array[i]);
}

//以下のように let であればOK
for(let i = 0; i < array.length; i++) {
  console.log(array[i]);
}

//以下の場合は問題ありません（for ループごとに新しいブロックとなるため）
for(const val of array ) {
  console.log(val);
} 

const foo = 'foo';
const foo = 'new foo'; //Uncaught SyntaxError: Identifier 'foo' has already been declared

const array = [ 'a', 'b', 'c' ];

for(let i = 0; i < array.length; i++) {
  const value = array[i];
  console.log(value);
}

const foo = 'foo';
console.log(window.foo);  //undefined

var bar = 'bar';  //var キーワードで宣言
console.log(window.bar);  //bar

boo = 'boo';  //キーワードなしで宣言。
console.log(window.boo);   //boo
// "use strict" を指定している場合はエラー（ReferenceError: boo is not defined）

const FOO = 'FOO';
//FOO は常に'FOO'という値で変更できない

const foo = {  //オブジェクト
  name: 'foo'
};
console.log(foo.name);  //foo

foo.name = 'who';   //オブジェクトのプロパティ（name）を変更
console.log(foo.name);  //who

const bar = [1, 2, 3];  //配列
console.log(bar[1]);  //2（2番めの要素の値）

bar.forEach(function(value, index, array) {
  array[index] = value * 2;  //配列の要素を変更（値を倍に）
});
console.log(bar[1]);  //4

bar.shift();   //配列の要素を変更（先頭の要素を削除）
console.log(bar[1]);  //6

関数`テンプレート`

function myTag(strings, url, link, target) {
  // 第1引数 strings は以下の4つ要素を持つ配列
  let str0 = strings[0]; // <a href="
  let str1 = strings[1]; // ">
  let str2 = strings[2]; // </a>
  //let str3 = strings[3]; // この例の場合、最後の要素は空文字（使用しない）

  if(target) {
    return  `${str0}${url}" target="_blank" rel="noopener${str1}${link}${str2}`;
  }else{
    return  `${str0}${url}${str1}${link}${str2}`;
  }
}

let url = 'http://example.com';
let link = 'Example Doamain';
let target = true;

let output = myTag`<a href="${ url }">${ link }</a>${ target }`;
console.log(output);
//<a href="http://example.com" target="_blank" rel="noopener">Example Doamain</a>
// target = false の場合は以下のような出力
//<a href="http://example.com">Example Doamain</a>

function myTag(strings) {
  console.log('strings.raw[0] :' + strings.raw[0]);  // raw プロパティ
  console.log('strings[0] :' + strings[0]);
}

myTag`line 1 \n line 2`;

//以下が出力
strings.raw[0] :line 1 \n line 2  // \n は文字として出力される（raw プロパティ）
strings[0] :line 1    // \n は改行として処理される
 line 2

myTag`C:\Development\profile\about.html`;

//以下が出力
strings.raw[0] :C:\Development\profile\about.html   //入力された通り（raw プロパティ）
strings[0] :C:Developmentprofileabout.html   //バックスラッシュが取り除かれている

function myTag(strings) {
  for(let i = 0 ; i < strings.length; i++) {
    console.log(strings.raw[i]); //配列の個々の要素の raw プロパティ
  }
  console.log(strings.raw); //配列全体（raw プロパティ）
}

myTag`line1 ${1} \n line2 ${2}`;

//以下が出力（配列の個々の要素と配列全体）
raw[0] : line1
raw[1] :  \n line2
raw[2] :
["line1 ", " \n line2 ", ""] //3つの要素を持つ配列

const filePath = String.raw`C:\Development\profile\about.html`;

console.log(filePath); //C:\Development\profile\about.html

const file = '\\about.html';
const filePath = String.raw`C:\Development\profile${file}`;

console.log(filePath);  //C:\Development\profile\about.html

const file = 'about.html';
const filePath = String.raw`C:\Development\profile\${file}`;

console.log(filePath);  //C:\Development\profile\${file}

function 関数名( 仮引数 = デフォルト値, 仮引数 = デフォルト値 ) {

}

function divide(x = 10, y = 5) {
  if(y !== 0) {
    return x / y;
  }else{
    return 'cannot divide by 0 or null';
  }
}
console.log( divide( 10, 2 ) );  //5
console.log( divide( 3 ) );   //0.6
console.log( divide( 3, undefined ) );   //0.6
console.log( divide() );  //2

function add(x, y = 5) {
  return x + y;
}
console.log( add( 10, 2 ) );  //12
console.log( add( 10 ) );  //15
console.log( add() );  //NaN
console.log( add( undefined, 3) );  //NaN

function funcRest(...args) {
  //args は配列
  for(let i = 0; i < args.length; i++) {
    console.log(args[i]);
  }
}
funcRest('a', 'b', 3, 'c');
//出力結果
a
b
3
c

function funcRest(...args) {
  for(let val of args) {
    console.log(val);
  }
}
funcRest('a', 'b');
//出力結果
a
b

function funcRest(arg1, arg2, ...args) {
  console.log(arg1);
  console.log(arg2);
  console.log(args);
}
funcRest('a', 'b', 3, 'c');
//出力結果
a
b
[3, "c"]  //要素2つの配列

function funcRest(...args) {
  let sortedArgs = args.sort();
  return sortedArgs;
}
console.log(funcRest( 'x', 'a', 'e', 'c'));

//出力結果
["a", "c", "e", "x"]

const arr = [1, 2]; // この配列から値を取り出す

// 変数 a に arr[0] の値、変数 b に arr[1] の値を代入
const [a, b] = arr;

console.log(a); // 1
console.log(b); // 2

const arr = [1, 2];
const a = arr[0];
const b = arr[1];

let a, b;  //宣言と初期化
[a, b] = [1, 2];   //値の代入

console.log(a); // 1
console.log(b); // 2

let a, b;
//既定値を指定
[a = 3, b = 5] = [7];

console.log(a); // 7
console.log(b); // 5（既定値）

function myFunc() {
  return [1, 2];
}

let [a, b] = myFunc();
console.log(a); // 1
console.log(b); // 2

const [a, b, ...c] = [1, 2, 3, 4, 5];

console.log(a); // 1
console.log(b); // 2
console.log(c); // [3, 4, 5]

let a = 1;
let b = 2;

[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1

const obj = {
  foo: 'FOO',
  bar: 'BAR'
}

const { foo, bar } = obj;

console.log(foo);  //FOO
console.log(bar);  //BAR

const obj = {
  foo: 'FOO',
  bar: 'BAR'
}

const foo = obj.foo;
const bar = obj.bar;

const app = {
  name: 'foo',
  version: '1.0.0',
  type: 'apps'
}
const name = app.name;
const version = app.version;
const type = app.type;

const app = {
  name: 'foo',
  version: '1.0.0',
  type: 'apps'
}

const { name, version, type } = app;

/* 以下と同じこと
const name = app.name;
const version = app.version;
const type = app.type;
*/

const {PI} = Math;

//const PI = Math.PI  と同じことですが、PI を2回記述せずに済みます

console.log(PI);  //3.141592653589793

const obj = {
  foo: 'FOO',
  bar: 'BAR'
}

const { bar, foo } = obj;

console.log(foo);  //FOO
console.log(bar);  //BAR

const obj = {
  foo: 'FOO',
  bar: 'BAR'
}

const { bar } = obj;

console.log(bar);  //BAR

const obj = {
  foo: 'FOO',
  bar: 'BAR'
}

//既定値を指定
const { foo = 'default1', bar = 'default2' , boo = 'default3'} = obj;

console.log(foo);  //FOO
console.log(bar);  //BAR
console.log(boo);  //default3（既定値）

const obj = {
  foo: 'FOO',
  bar: 'BAR'
}
let foo, bar;  //セミコロンが必要

//代入文の周りを括弧で囲む
({foo, bar} = obj);

console.log(foo);  //FOO
console.log(bar);  //BAR

const obj = {
  foo: 'FOO',
  bar: 'BAR'
}

//プロパティ名 : 変数名
const { foo:a, bar:b } = obj;

console.log(a);  //FOO
console.log(b);  //BAR

const obj = {
  foo: 'FOO',
  bar: 'BAR'
}

const { foo:a= 'default1', bar:b= 'default2' , boo:c='default3' } = obj;

console.log(a);  //FOO
console.log(b);  //BAR
console.log(c);  //default3（既定値） 

const obj = {
  foo: {
    name: 'Foo',
    age: 20
  },
  bar: {
    name: 'Bar',
    age: 30
  }
}

const { foo, bar } = obj;

console.log(foo); //{name: "Foo", age: 20}
console.log(foo.age); //20
console.log(bar); //{name: "Bar", age: 30}
console.log(bar.age);  //30

const obj = {
  foo: {
    name: 'Foo',
    age: 20
  },
  bar: {
    name: 'Bar',
    age: 30
  }
}

const {  foo: {age:foo_age}, bar: {age:bar_age}} = obj;

console.log(foo_age); //20
console.log(bar_age); //30 

const obj = {
  foo: 'FOO',
  bar: 'BAR'
}
function func({ foo }) {
    console.log(foo);
}
func(obj); //FOO 

const obj = {
  foo: {
    name: 'Foo',
    age: 20
  },
  bar: {
    name: 'Bar',
    age: 30
  }
}
function func({ foo: {name:foo_name}, foo: {age:foo_age}} ) {
  console.log(foo_name + ' is ' + foo_age + ' years old.');
  //console.log(`${foo_name} is ${foo_age} years old.`);
}
func(obj); //Foo is 20 years old.    

function func([a, b]) {
  console.log(a); // 1
  console.log(b); // 2
  let c = a + b;
  console.log(c);  // 3
}
const arr = [1, 2];
func(arr);

//配列を生成
let array  = ['a', 'b', 'c'];

//メソッド [Symbol.iterator]() を実行してイテレータを取得
let iterator = array[Symbol.iterator]();

//イテレータを出力
console.log(iterator);  //Array Iterator {}

/* 以下はイテレータ（Array Iterator）をインスペクタで展開した内容 */
Array Iterator {}
  __proto__: Array Iterator
    next: ƒ next()   // next() メソッドを持っている
      Symbol(Symbol.toStringTag): "Array Iterator"
    __proto__:
      Symbol(Symbol.iterator): ƒ [Symbol.iterator]() //Symbol.iterator
        arguments: (...)
        caller: (...)
        length: 0
        name: "[Symbol.iterator]"
      __proto__: ƒ ()
      [[Scopes]]: Scopes[0]
    __proto__: Object
/* ここまで（イテレータをインスペクタで展開した内容） */

//イテレータ の next() メソッドを実行して結果（IteratorResult）を取得
let iteraotResult = iterator.next();

//結果（IteratorResult）を出力
console.log( iteraotResult );

//出力：value と done プロパティを持つオブジェクト
{value: "a", done: false}

let array  = ['a', 'b', 'c'];
//配列のイテレータ
let iterator = array[Symbol.iterator]();

//next() メソッドを反復処理して結果を表示
while(true){
  // iteratorResult を取得
  let iteratorResult = iterator.next();
  //value プロパティと done プロパティの値をコンソールに出力
  console.log(`value: ${iteratorResult.value}, done: ${iteratorResult.done}`);
  //done プロパティの値が true になったら終了（break）
  if(iteratorResult.done) break;
}

//出力
value: a, done: false
value: b, done: false
value: c, done: false
value: undefined, done: true

Array.from(arrayLike, mapFn, thisArg)

let foo = Array.from('foo'); //文字列から配列を生成
console.log(foo);  //["f", "o", "o"]

//Map 関数で大文字に変換
let foo_capital = Array.from('foo', function(char) {
  return char.toUpperCase();
});
console.log(foo_capital);  // ["F", "O", "O"]

//Map 関数で各文字にインデックス番号を追加
let foo_index = Array.from('foo', function(char, index) {
  return index + ':' + char;
});
console.log(foo_index); // ["0:f", "1:o", "2:o"] 

Array.from(document.getElementsByTagName('div'), (elem, i) => {
  if(elem.id) {
    //取得した div 要素に id が付与されていれば出力
    console.log(elem.id);
  }
})

// 上記は以下と同じこと
// 配列のようなオブジェクトを取得
const divElems = document.getElementsByTagName('div');
// 配列のようなオブジェクトを配列に変換
const divElemsArray = Array.from(divElems);
// 配列のメソッド forEach() を使う
divElemsArray.forEach(function(elem) {
  if(elem.id) {
    console.log(elem.id);
  }
});

//出力例
/*
header
header_inner
search_box
navi
container
content
・・・*/

const myArray = Array.from({length: 3}, (v, i) => i) ;
console.log(myArray); // [0, 1, 2]

const myArray = Array.from({length: 3}).map((v, i) => i);

const myArray = [...Array(3)].map((v, i) => i);

[
  { label: "H1", value: "h1" },
  { label: "H2", value: "h2" },
  { label: "H3", value: "h3" },
  { label: "H4", value: "h4" },
  { label: "H5", value: "h5" },
  { label: "H6", value: "h6" }
]

const headingTagOptions = [];
for (let i = 1; i <= 6; i++) {
  headingTagOptions.push({ label: `H${i}`, value: `h${i}` });
}

const headingTagOptions = Array.from({ length: 6 }, (_, i) => ({
  label: `H${i + 1}`,
  value: `h${i + 1}`,
}));

Array.of(element0, element1, ..., elementN)

let arrOf3 = Array.of(3);
console.log(arrOf3);
/*
[3]  単一の要素を持つ配列
0: 3
length: 1
 */

let arr3 = Array(3);  //Array コンストラクタ（new を省略）
console.log(arr3);
/*
(3) [empty × 3] length プロパティが3の空の配列
length: 3
*/

//以下の場合は同じ
console.log(Array.of(1, 2, 3)); // [1, 2, 3]
console.log(Array(1, 2, 3));   // [1, 2, 3]

console.log(Array.of('a', 'b', 'c')); // ["a", "b", "c"]
console.log(Array('a', 'b', 'c'));  // ["a", "b", "c"]

console.log(Array.of(-1)); //[-1]

console.log(Array(-1));  // Uncaught RangeError: Invalid array length

console.log(Array.of(5.7));  //[5.7]

console.log(Array(5.7));  //Uncaught RangeError: Invalid array length

arr.find(callback(element, index, array), thisArg)

const arr = [3, 12, 37, 8, 9, 22];

const found = arr.find(function(elem) {
  return elem > 8;
});

console.log(found);  //12  

const arr = [3, 12, 37, 8, 9, 22];

const found = arr.find(elem => elem > 8);

console.log(found);  //12

const arr = [3, 12, 37, 8, 9, 22];

//filter() は条件に合致する「要素の配列」を返す
const found = arr.filter(elem => elem > 8)[0];  //最初の要素

console.log(found);  //12

const arr = [3, 12, 37, 8, 9, 22];

//findIndex() は条件に合致する最初の要素の添字を返す
const foundIndex = arr.findIndex(elem => elem > 8);

console.log(foundIndex);  //1

const myMembers = [
  { id: '001', name: 'foo', age: 22 },
  { id: '002', name: 'bar', age: 36 },
  { id: '003', name: 'baz', age: 57 },
];

// id プロパティの値が の要素
const id002 = myMembers.find(member => member.id === '002');
console.log(id002.name);  //bar

// age プロパティの値が 50 より大きい要素
const over50 =  myMembers.find(member => member.age >= 50);
console.log(over50.name);  // baz

arr.findIndex(callback(element, index, array), thisArg) 

const fruits = ["apple", "banana", "cherry", "pineapple"];
const index = fruits.findIndex(fruit => fruit === "pineapple");

console.log(index); //3
console.log(fruits[index]);  //pineapple

const fruits = ["apple", "banana", "cherry", "pineapple"];
const index = fruits.indexOf("pineapple");

console.log(index); //3
console.log(fruits[index]);  //pineapple

const fruits = ["apple", "banana", "cherry", "pineapple"];
const index = fruits.findIndex(fruit => fruit.length > 5);
console.log(index); //1

console.log(fruits[index]);  //banana

<ul id="myList">
  <li>apple</li>
  <li>banana</li>
  <li class="foo">cherry</li>
  <li>pineapple</li>
</ul>

<script>
//li 要素の集まり（NodeList）を配列に変換
const listItemsArray = Array.from(document.querySelectorAll('#myList li'));
//class 属性の値が foo の最初の要素の位置（インデックス）を取得
const index = listItemsArray.findIndex(item => item.className ==='foo');

console.log(index); //2
console.log(listItemsArray[index].textContent);  //cherry
</script>

//期待通りに動作しない（オブジェクトとして return できない）
const func = () => { foo: 123 }

console.log(func());  // undefined

//括弧 () で囲むことでオブジェクトとして return
const func = () => ({ foo: 123 })

console.log(func());  // {foo: 123}

//または以下でもOK
const func2 = () => { return {foo: 123} }

console.log(func2());  // {foo: 123}

let obj = {
  name: 'Three brothers',
  members: ['foo', 'bar', 'boo'],
  showObj() {
    this.members.forEach(
      //以下の this.name は obj.name と同じになる
      member => console.log(this.name + ': ' + member)
    );
  }
};
obj.showObj();

/* 出力
Three brothers: foo
Three brothers: bar
Three brothers: boo
*/ 

let obj = {
  name: 'Three brothers',
  members: ['foo', 'bar', 'boo'],
  showObj() {
    //コールバック関数の外側のスコープで this を一時変数に代入
    let that = this;
    this.members.forEach(function(member) {
      //that でアクセス
      console.log(that.name + ': ' + member)
    });
  }
};


//以下の場合は undefined.name にアクセスするためエラーになります
let obj = {
  name: 'Three brothers',
  members: ['foo', 'bar', 'boo'],
  showObj() {
    this.members.forEach(function(member) {
      console.log(this.name + ': ' + member)  //エラー
      //Uncaught TypeError: Cannot read property 'name' of undefined
    });
  }
};

var obj = {foo: 'FOO', bar: 'BAR', boo: 'BOO'};

//obj にイテレータを実装
obj[Symbol.iterator] = function() { //関数リテラル
  var iterator = {};
  var current = 0;
  var keys = Object.keys(this);  //this は obj
  iterator.next = ()  => {  //アロー関数
    var iteratorResult = (current < keys.length)
      ? { value: this[keys[current]], done: false }  //this は obj
      : { value: undefined, done: true };
    current++;
    return iteratorResult;
  };
  return iterator;
};

//8行目からのアロー関数を function() に書き換え
obj[Symbol.iterator] = function() { //関数リテラル
  var iterator = {};
  var current = 0;
  var keys = Object.keys(this);
  var that = this;  // this を一時変数 that に代入
  iterator.next = function()  { //関数リテラル
    var iteratorResult = (current < keys.length)
      ? { value: that[keys[current]], done: false }  //一時変数 that
      : { value: undefined, done: true };
    current++;
    return iteratorResult;
  };
  return iterator;
};

//両方ともアロー関数に書き換え
obj[Symbol.iterator] = () =>{ //アロー関数
  var iterator = {};
  var current = 0;
  var keys = Object.keys(obj);  //this は Window
  iterator.next = ()  => { //アロー関数
    var iteratorResult = (current < keys.length)
      ? { value: obj[keys[current]], done: false }  //this は Window
      : { value: undefined, done: true };
    current++;
    return iteratorResult;
  };
  return iterator;
};

//イベントを登録する要素を取得
var btn = document.getElementById("btn");

//要素にイベントリスナーを登録
btn.addEventListener('click',function() {
  //this は btn（クリックされるボタン要素）
  alert(this.textContent);
}); 

btn.addEventListener('click', () => alert(this.textContent) );

btn.addEventListener('click', (e) => alert(e.currentTarget.textContent) ); 

jQuery(function($){
  $('h3').each( function() {
    console.log($(this).text()); // 全ての h3 要素のテキストが表示される
  });
});

jQuery(function($){
  $('h3').each( () => {
    console.log($(this).text());  //想定外の表示になる
  });
});

jQuery(function($){
  $('h3').each( (index, element) => {
    console.log($(element).text()); // 全ての h3 要素のテキストが表示される
  });
});

import(モジュール名) 

export const foo = 'foo';
export const bar = 3;
export default () => console.log("Default Hello");

<script>
  // response に名前空間オブジェクトが渡される
  import('./module.js').then((response) => {
    console.log(response.foo, response.bar); // foo 3
    response.default(); // Default Hello
  });
</script>

import('./module.js').then(({foo, bar}) => {
  console.log(foo, bar); // foo 3
});

import('./module.js').then(({foo, bar}) => {
  console.log(foo, bar);
});
console.log('同期的処理');

// 同期的処理
// foo 3

(async () => {
  const response =  await import('./module.js');
  console.log(response.foo, response.bar); // foo 3
  response.default(); // Default Hello
})();

<script type="module">
  // ファイルがモジュールの場合（スクリプトの場合はエラーになる）
  const response =  await import('./module.js');
  console.log(response.foo, response.bar); // foo 3
  response.default(); // Default Hello
</script>

const flag = true;

if (flag) {
  import('./module.js').then(({ foo, bar }) => {
    console.log(foo, bar);
  });
}

const url = './module.js';

import(url).then(({ foo, bar }) => {
  console.log(foo, bar);
});

const sym = Symbol();  //Symbol を作成
const obj = {
  sym : 'foo'   //キー sym は文字列
}
console.log(obj.sym);  //foo （ . で文字列でアクセス）
console.log(obj[sym]);  //undefined （シンボルでアクセス）

const sym = Symbol();  //Symbol を作成
const obj = {}
obj[sym] = 'foo'; //キー sym は Symbol
console.log(obj[sym]);  //foo

const str1 = 'property', str2 = 'name';
const obj = {
  [str1 + str2] : 'bar' //[ ] の中の式が展開（計算）される
}
console.log(obj.propertyname);  //bar

const sym = Symbol();
const obj = {
  [sym] : 'foo'   //キー [sym] は Symbol
}
console.log(obj[sym]);  //foo

//中身が空の Map オブジェクトを作成
const myMap = new Map();

console.log(myMap);  //Map(0)
console.log(myMap.size);  //0 （size が0）

new Map([[key, value] , [key, value] ...]);

//初期値に1つのエントリー（要素）を指定してマップを作成
const myMap = new Map([['key1', 'value1']]);

console.log(myMap);  //Map(1) {"key1" => "value1"}
console.log(myMap.size);  //1（要素数）
console.log(myMap.get('key1')); //value1 （key1 の値）

//初期値に2つのエントリー（要素）を指定してマップを作成
const myMap2 = new Map([['k1', 'v1'], ['k2', 'v2']]);

console.log(myMap2); //Map(2) {"k1" => "v1", "k2" => "v2"}
console.log(myMap2.size);  //2（要素数）
console.log(myMap2.get('k1')); //v1（k1 の値）
console.log(myMap2.get('k2')); //v2（k2 の値）

//キー・値の2次元配列
let myArray = [["キー1", "値1"], ["キー2", "値2"]];

//コンストラクタを使ってキー・値の2次元配列をマップに変換（マップを作成）
let myMap = new Map(myArray);

console.log(myMap.size);  //2
console.log(myMap.get('キー1')); //値1
console.log(myMap.get('キー2')); //値2

map.set(key, value)  //要素の追加
map.get(key)  //値の取得

// 新しいマップの作成
const myMap = new Map();

// 新しい要素の追加
myMap.set("key1", "value1");
console.log(myMap.size); // 1
console.log(myMap.get("key1")); //value1

// 新しい要素の追加
myMap.set("key2", "value2");
console.log(myMap.size); // 2
console.log(myMap.get("key2")); // value2

// 要素の上書き
myMap.set("key1", "new value1");
console.log(myMap.get("key1")); // new value1

// 新しいマップの作成
let myMap = new Map();

//キーと成る変数を作成
let foo = { name: 'FOO' };
let bar = function(val) { console.log(val); }
let boo = 'boo';

// マップに要素を追加して値を設定
myMap.set(foo, "foo（オブジェクト）と結び付けられた値");
myMap.set(bar, "bar（関数）と結び付けられた値");
myMap.set(boo, "boo（文字列）と結び付けられた値");

// キーにひもづいた値を取得（変数を指定）
console.log(myMap.size);  //3
console.log(myMap.get(foo));  //foo（オブジェクト）と結び付けられた値
console.log(myMap.get(bar));  //bar（関数）と結び付けられた値
console.log(myMap.get(boo));  //boo（文字列）と結び付けられた値

// キーに文字列を指定（オブジェクトとは異なりキーは文字列には変換されない）
console.log(myMap.get('foo'));  //undefined (foo !== 'foo')
console.log(myMap.get('bar'));  //undefined (bar !== 'bar')
console.log(myMap.get('boo'));  //boo（文字列）と結び付けられた値 (boo === 'boo') 

// 新しいマップの作成
let myMap = new Map();

// set() をチェーンして呼び出して要素を追加
myMap.set('key1', 'value1')
     .set('key2', 'value2')
     .set('key3', 'value3');

console.log(myMap.size);  //3

// 値を出力
console.log(myMap.get('key1'));  // value1
console.log(myMap.get('key2'));  // value2
console.log(myMap.get('key3'));  // value3

map.has(key)  //存在するかを確認

// 新しいマップの作成
let myMap = new Map();

// set() をチェーンして要素を追加
myMap.set('key1', 'value1')
     .set('key2', null)
     .set('key3', undefined)
     .set('key4');

console.log(myMap.size);  //4

// 値を出力
console.log(myMap.get('key1'));  // value1
console.log(myMap.get('key2'));  // null
console.log(myMap.get('key3'));  // undefined
console.log(myMap.get('key4'));  // undefined（値が存在しない）
console.log(myMap.get('key5'));  // undefined（要素が存在しない）

// 要素の存在（有無）を確認
console.log(myMap.has('key1'));  // true
console.log(myMap.has('key2'));  // true（値が null でも true）
console.log(myMap.has('key3'));  // true（値が undefined でも true）
console.log(myMap.has('key4'));  // true（要素は存在すれば値がなくても true）
console.log(myMap.has('key5'));  // false（要素が存在しない）

map.delete(key) //指定した要素を削除
map.clear() //全ての要素を削除

// 3つの要素を持つ新しいマップを作成
let myMap = new Map([['key1','value1'],['key2','value2'],['key3','value3']]);

console.log(myMap.size);  //3

//キーが key2 の要素を削除
myMap.delete('key2');
console.log(myMap.has('key2'));  //false
console.log(myMap.size);  //2

////全ての要素を削除
myMap.clear();
console.log(myMap.size);  //0
console.log(myMap);  //Map(0) {}（空のマップ）

map.forEach(callback) //全ての要素をコールバック関数で挿入順に反復処理
map.keys() //全ての要素のキーを挿入順に並べた Iterator オブジェクトを返す
map.values() //全ての要素の値を挿入順に並べた Iterator オブジェクトを返す
map.entries() //全ての要素を挿入順に並べた Iterator オブジェクトを返す

map.forEach(callback[, thisArg])

// 3つの要素を持つ新しいマップを作成
const myMap = new Map([['key1', 'value1'],['key2', 'value2'], ['key3', 'value3']]);

// マップの要素を挿入順に処理
myMap.forEach(function(value, key) {
  // キーと値をテンプレートリテラルで出力
  console.log(`key: ${key} / value: ${value}`);
})

/*出力結果
key: key1 / value: value1
key: key2 / value: value2
key: key3 / value: value3
*/

// 3つの要素を持つ新しいマップを作成
const myMap = new Map([
  ['key1','value1'],
  ['key2','value2'],
  ['key3','value3']
]);

// コールバック関数の3つ目の引数（map）を使って自身の要素の値を変更
myMap.forEach(function(value, key, map) {
  // 値を大文字に変換
  map.set(key, value.toUpperCase());
})

myMap.forEach(function(value, key, map) {
  console.log(`key: ${key} / value: ${value}`);
})

/*出力結果（値が大文字に変換されている）
key: key1 / value: VALUE1
key: key2 / value: VALUE2
key: key3 / value: VALUE3
*/

const myMap = new Map([
  ['key1','value1'],
  ['key2','value2'],
  ['key3','value3']
]);

//全ての要素のキーを挿入順に並べた Iterator オブジェクト
const myMapKeys = myMap.keys();

//イテレータの next() メソッドの戻り値の value プロパティ（キー）を出力
console.log(myMapKeys.next().value); //key1
console.log(myMapKeys.next().value); //key2
console.log(myMapKeys.next().value); //key3
console.log(myMapKeys.next().value); //undefined

// for...of を使って全ての要素のキーを挿入順に出力
for(const key of myMap.keys()) {
  console.log(key);
}

/*出力結果
key1
key2
key3
*/

const myMap = new Map([
  ['key1','value1'],
  ['key2','value2'],
  ['key3','value3']
]);

//Array.from() に渡して配列に変換
const keys_array = Array.from(myMap.keys());

console.log(keys_array);  //["key1", "key2", "key3"]

//キーの Iterator オブジェクト
const keys = myMap.keys();
//スプレッド構文を使って配列に変換
const keys_array2 =  [...keys];

console.log(keys_array2);  //["key1", "key2", "key3"]      

const myMap = new Map([
  ['key1','value1'],
  ['key2','value2'],
  ['key3','value3']
]);

//全ての要素の値を挿入順に並べた Iterator オブジェクト
const myMapValues = myMap.values();

//イテレータの next() メソッドの戻り値の value プロパティ（値）を出力
console.log(myMapValues.next().value); //value1
console.log(myMapValues.next().value); //value2
console.log(myMapValues.next().value); //value3
console.log(myMapValues.next().value); //undefined

// for...of を使って全ての要素の値を挿入順に出力
for(const value of myMap.values()) {
  console.log(value);
}

/*出力結果
value1
value2
value3
*/

// Array.from() に渡して配列に変換
const values_array = Array.from(myMap.values());
console.log(values_array);  //["value1", "value2", "value3"]


//値の Iterator オブジェクト
const values = myMap.values();
//スプレッド構文を使って配列に変換
const values_array2 =  [...values];

console.log(values_array2);  //["value1", "value2", "value3"]  

const myMap = new Map([
  ['key1','value1'],
  ['key2','value2'],
  ['key3','value3']
]);

//全ての要素のエントリーを挿入順に並べた Iterator オブジェクト
const myMapEntries = myMap.entries();

//イテレータの next() メソッドの戻り値の value プロパティ（エントリー）を出力
console.log(myMapEntries.next().value); // ["key1", "value1"]
console.log(myMapEntries.next().value); // ["key2", "value2"]
console.log(myMapEntries.next().value); // ["key3", "value3"]
console.log(myMapEntries.next().value); //  undefined

// for...of を使って全ての要素のエントリーを挿入順に出力
for(const entry of myMap.entries()) {
  console.log(entry);
}

/*出力結果
["key1", "value1"]
["key2", "value2"]
["key3", "value3"]
*/

const myMap = new Map([
  ['key1','value1'],
  ['key2','value2'],
  ['key3','value3']
]);

// for...of と分割代入を使って全ての要素のキーと値を挿入順に出力
for(const [key, value]  of myMap.entries()) {
  console.log(`${key} : ${value}`);
}

/*出力結果
key1 : value1
key2 : value2
key3 : value3
*/

//マップを for...of で反復処理（上記と同じこと）
for(const [key, value]  of myMap) {
  console.log(`${key} : ${value}`);
}
 /*出力結果（前の結果と同じ）
key1 : value1
key2 : value2
key3 : value3
*/

// 以下も同じこと
for(const [key, value]  of myMap[Symbol.iterator]()) {
  console.log(`${key} : ${value}`);
}
 /*出力結果（前の結果と同じ）
key1 : value1
key2 : value2
key3 : value3
*/ 

//3つの [key, value] から成る2次元配列
const array = [
  ['key1','value1'],
  ['key2','value2'],
  ['key3','value3']
];
// 上記配列を引数に指定して3つの要素を持つマップを作成
const map = new Map(array);

console.log(map.size); //3
console.log(map.get('key2'));   //value2

//Array.from を使って array と同じ配列を生成
const array2 = Array.from(map);
console.log(array2);
/*(3) [Array(2), Array(2), Array(2)]
0: (2) ["key1", "value1"]
1: (2) ["key2", "value2"]
2: (2) ["key3", "value3"]
length: 3 */

//スプレッド構文を使って array と同じ配列を生成
const array3 = [...map];
console.log(array3);
/*(3) [Array(2), Array(2), Array(2)]
0: (2) ["key1", "value1"]
1: (2) ["key2", "value2"]
2: (2) ["key3", "value3"]
length: 3 */ 

//中身が空の Set オブジェクトを作成
const mySet = new Set();

console.log(mySet);  //Set(0) {}
console.log(mySet.size);  //0 （size が0）

//配列（反復可能オブジェクト）を渡して Set オブジェクトを作成
const mySet = new Set(['foo', 'bar', 'boo']);

console.log(mySet);  //Set(3) {"foo", "bar", "boo"}
console.log(mySet.size);  //3

//重複した値を持つ配列を渡して Set オブジェクトを作成
const mySet2 = new Set([1, 2, 3, 1]);

//1 は重複するため片方は無視される
console.log(mySet2);  //Set(3) {1, 2, 3}
console.log(mySet2.size);  //3 （サイズは3）

const array = [1, 2, 4, 2, 3 , 3, 2, 4, 5, 7, 5, 6, 1, 2];

//配列をコンストラクタの引数に指定して重複のないセットを生成し、Array.from()で変換
const unique_array = Array.from(new Set(array));
console.log(unique_array);  //[1, 2, 4, 3, 5, 7, 6]

//プレッド構文で配列に変換
const unique_array2 = [...new Set(array)];
console.log(unique_array2);  //[1, 2, 4, 3, 5, 7, 6]

const mySet = new Set();

mySet.add(1);  //数値を追加
mySet.add('a');  //文字列を追加
let foo = {name: 'foo'};
mySet.add(foo);  //オブジェクトの参照を追加
console.log(mySet);  //Set(3) {1, "a", {…}}
console.log(mySet.size);  //3

mySet.add(2).add(3).add(4);  //チェーン呼び出しで要素を3つ追加
console.log(mySet.size);  //6

//特定の値を持っているかどうかを確認
console.log(mySet.has(1));  //true
console.log(mySet.has('a'));  //true
console.log(mySet.has(foo));  //true
console.log(mySet.has({name: 'foo'})); //false

mySet.delete(foo);  //値（要素）を削除
mySet.delete(1);  //値（要素）を削除

console.log(mySet.size); //4

mySet.clear();  //全ての値を削除
console.log(mySet.size); //0

const mySet = new Set();  //空のセットを作成

let foo = {name: 'foo'};
let bar = {name: 'bar'};
let boo = {name: 'boo'};

//アクセスがある度にセットにユーザーを追加
mySet.add(foo);
mySet.add(bar);
mySet.add(foo);
mySet.add(bar);
mySet.add(foo);
mySet.add(bar);

//セットはユニークな値のみを保持
console.log(mySet.size);  //2

//セットは for...of 文が使えます
for(const user of mySet) {
  console.log(user.name);
}
/*
foo
bar
*/

mySet.clear();  //全てのデータを削除
console.log(mySet.size); //0 

set.forEach(callback[, thisArg])

const mySet = new Set(['foo', 'bar', 'boo']);

mySet.forEach(function(val) {
  console.log('value: ' + val);
})
/*
value: foo
value: bar
value: boo
*/  

const mySet = new Set(['foo', 'bar', 'boo']);

// for...of 文を使って反復処理
for(const val of mySet) {
  console.log('value: ' + val);
}
/*
value: foo
value: bar
value: boo
*/

// 以下でも同じ結果になります。
for(const val of mySet.values()) {
  console.log('value: ' + val);
}

/*
value: foo
value: bar
value: boo
*/

//.entries() は [value, value] になるので、以下の場合は値が重複して出力されます
for(const val of mySet.entries()) {
  console.log('value: ' + val);
}

/*
value: foo,foo
value: bar,bar
value: boo,boo
*/
 

class MyClass {
  constructor() {  // コンストラクタ
    //処理の記述
  }
  ・・・その他のメソッド・・・
}

// 名前なし
let MyClass = class {
  constructor() {  // コンストラクタ
    //処理の記述
  }
  ・・・その他のメソッド・・・
};

// 名前付き（MyClass2 は class の内側でだけ見えます）
let MyClass = class MyClass2 {
  constructor() {  // コンストラクタ
    //処理の記述
  }
  ・・・その他のメソッド・・・
};

class Person {
  constructor(name) {  //コンストラクタ
    this.name = name;  //インスタンス変数
  }

  hello() {  //メソッド（プロトタイプメソッド）
    alert('My name is ' + this.name);
  }
}

let foo = new Person("Foo"); //オブジェクトの生成（インスタンス化）は new を使います
console.log(foo.name);   //Foo
foo.hello();  //My name is Foo

class クラス {
  プロパティ名 = プロパティの初期値;
}

class Person {

  // プロパティの宣言（初期値は省略可能）
  name = 'no name'; // クラスフィールド

  constructor(name) {
     //引数の値があればその値でプロパティを初期化
     if(name) {
      this.name = name;
     }
  }

  hello() {
    alert('My name is ' + this.name);
  }
}

class Person {
  constructor(name) {
    this.name = name;
    //インスタンスメソッド myMethod
    this.myMethod = () => {
      alert('Instance Method');
    }
  }

  //プロトタイプメソッド myMethod
  myMethod() {
    alert('Prototype Method');
  }
}

let foo = new Person("Foo");
foo.myMethod(); //Instance Method（インスタンスメソッドが呼び出されます）

class Person {
  // コンストラクタ
  constructor(name) {
    this.name = name;
  }

  //静的メソッド（引数に可変長のインスタンスを受け取る）
  static makeFriends(...persons) {
    // 以下の this はクラス自身（静的メソッドにおける this はそのクラス自身）
    console.log('Message from ' + this.name + ' クラス');
    for(let person of persons) {
      //渡されたインスタンスの name プロパティを使って出力
      console.log(person.name + ' is my friend.');
    }
  }
}

// インスタンスを生成
let foo = new Person("Foo");
let bar = new Person("Bar");
let boo = new Person("Boo");

// クラス名.メソッド名 で呼び出し
Person.makeFriends(foo, bar, boo);

/* 出力
Message from Person クラス
Foo is my friend.
Bar is my friend.
Boo is my friend.
*/

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} speaks.`);
  }
}

//Animal クラスを継承する Cat クラス
class Cat extends Animal {
  //メソッドの追加
  meow() {
    console.log('meow meow meow');
  }
}

let cat = new Cat('Mike');
cat.speak(); // Mike speaks. 親のメソッドを使用可能
cat.meow();  // meow meow meow 追加したメソッド    

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} speaks.`);
  }
}

class Cat extends Animal {
  //メソッドのオーバーライド
  speak() {
    console.log('meow meow meow');
  }
}

let cat = new Cat('Mike');
cat.speak(); //  オーバーライドしたメソッドを実行
//meow meow meow

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} speaks.`);
  }
}

class Cat extends Animal {
  //メソッドのオーバーライド
  speak() {
    //親メソッドの呼び出し
    super.speak();
    console.log('meow meow meow');
  }
}

let cat = new Cat('Mike');
cat.speak();  // オーバーライドしたメソッドを実行
/*
Mike speaks.
meow meow meow
*/      

class Shape {
  constructor(name) {
    this.name = name;
  }
  print() {
    console.log('This is ' + this.name);
  }
}

let foo = new Shape('circle');
foo.print();  //This is circle

//Shape クラスを継承して Rectangle クラスを定義
class Rectangle extends Shape {
  //コンストラクタをオーバライド
  constructor(height, width) {
    //親クラスのコンストラクタ処理を実行
    super(name);
    // this にアクセス
    this.name = 'Rectangle';
    this.height = height;
    this.width = width;
  }
  //親のメソッドをオーバーライド
  print() {
    //親メソッドの呼び出し
    super.print();
    //追加の処理
    console.log(`width: ${this.width} height: ${this.height}`);
  }
  //メソッドを追加
  area() {
    return this.width * this.height;
  }
}

let bar = new Rectangle(5,4);
bar.print();  //This is Rectangle. width: 4 height: 5
console.log(bar.area());  //20

class MyDate extends Date {
  //独自のメソッド myWeek を追加（その他は Date のデフォルト）
  myWeek() {
    let week = super.getDay();
    switch(week) {
      case 0:
        return '日曜日';
        break;
      case 1:
        return '月曜日';
        break;
      case 2:
        return '火曜日';
        break;
      case 3:
        return '水曜日';
        break;
      case 4:
        return '木曜日';
        break;
      case 5:
        return '金曜日';
        break;
      case 6:
        return '土曜日';
        break;
      default :
        return week;
    }
  }
}

const today = new MyDate();  //インスタンスを生成
console.log(today.myWeek()); //追加したメソッドを実行
//水曜日
console.log(today.toLocaleString());  // Date オブジェクトのメソッドを実行
//2020/5/13 11:16:00
const date2222 = new MyDate('2/22/2222');
console.log(date2222.myWeek());
//金曜日

// ES5
var a = 'foo', b = 'bar', c = 'boo';

//キー名 : 変数名（値）
obj = { a: a, b: b, c: c };

console.log(obj.a);  //foo
console.log(obj.b);  //bar
console.log(obj.c);  //boo

// ES6 短縮構文
var a = 'foo', b = 'bar', c = 'boo';

//キー名と値の変数名が同じ場合は以下のように省略可能
obj = { a, b, c };

console.log(obj.a);  //foo
console.log(obj.b);  //bar
console.log(obj.c);  //boo

function getUser(name, age, gender) {
  return {
    name: name,
    age: age,
    gender: gender
  };
}

let user = getUser('Mike', 28, 'male');
console.log(user.name); // Mike
console.log(user.age);  //28
console.log(user.gender);  //male

function getUser(name, age, gender) {
  return {  // ES6 短縮構文
    name,  // name: name と同じ
    age,   // age: age と同じ
    gender // gender: gender と同じ
  };
}

let user = getUser('Mike', 28, 'male');
console.log(user.name); // Mike
console.log(user.age);  //28
console.log(user.gender);  //male

const val1 = 'foo', val2 = 'bar';
const obj = {
  [val1 + val2] : 'BOO' //[ ] の中の式が展開（算出）されて foobar : 'BOO'
}
console.log(obj.foobar);  //BOO

//ES5 まで
var myKey = 'foo';  //変数
var obj = {};  //オブジェクトを生成
//オブジェクトを生成してからキーに変数を使用
obj[myKey] = 'FOO';

console.log(obj[myKey]);  //FOO
console.log(obj['foo']);  //FOO
console.log(obj.foo);  //FOO 

//ES6
let myKey = 'foo';
const obj = {
  //プロパティ名を[ ]で囲む
  [myKey]: 'FOO'
};

console.log(myKey);  // foo （変数 myKey は文字列 foo）
console.log(obj[myKey]);  //FOO （obj のプロパティ myKey ）
console.log(obj['foo']);  //FOO （obj のプロパティ foo ）
console.log(obj.foo);  //FOO （obj のプロパティ . アクセス ）
console.log(obj); //{foo: "FOO"}

let contact = [
  {
    name: "Foo",
    email: "foo@example.com"
  },
  {
    name: "Bar",
    email: "bar@example.com"
  },
  {
    name: "Boo",
    email: "boo@example.com"
  },
]

//配列の各要素のオブジェクトのプロパティ名にインデックス番号を追加した配列を生成
let indexContact = contact.map((item, index) => {
  return {
    ["name_" + index]: item.name,
    ["email_" + index]: item.email
  }
})

console.log(indexContact[1].email_1);  //bar@example.com

for(memeber of indexContact) {
  console.log(memeber);
}

/* 以下出力
{name_0: "Foo", email_0: "foo@example.com"}
{name_1: "Bar", email_1: "bar@example.com"}
{name_2: "Boo", email_2: "boo@example.com"}
*/

//ES5 までのメソッドの定義
var obj = {
  foo: function() {
    console.log('foo');
  },
  bar: function() {
    console.log('bar');
  }
};

//ES6 からは function を省略可能
const obj = {
  foo() {
    console.log('foo');
  },
  bar() {
    console.log('bar');
  }
};

const x = 'foo', y = 'bar';
const obj = {
  [x + y] () {
    console.log('FooBar');
  },
};

obj.foobar();  //FooBar

function* ジェネレータ関数名([params]) {
  statements
}

function* myGenerator() {
  yield 'foo';
  yield 'bar';
}

//ジェネレータ関数を呼び出して変数に代入
const generator = myGenerator();
//コンソールへ出力
console.log(generator);

/*出力結果（停止中の Generator オブジェクトであることがわかる）
myGenerator {<suspended>}
__proto__: Generator
*/

function* myGenerator() {
  yield 1;
  yield 2;
  yield 3;
}
const generator = myGenerator();

//for...of 文でジェネレータの値を取り出す
for(let value of generator) {
  console.log(value);
}

//出力
1
2
3

function* myGenerator() {
  yield 1;
  yield 2;
  yield 3;
}
const generator = myGenerator();

//next()が返す iteratorResult オブジェクトを格納する変数
let result;

//iteratorResult オブジェクトの done プロパティが false の間繰り返し
while (!(result = generator.next()).done)  {
  console.log(result.value);
}

function* myGenerator() {
  yield 1;
  yield 2;
  // return 文（for..of では取得できない）
  return 3;
}
const generator = myGenerator();

for(let value of generator) {
  console.log(value);
}

//出力（3は出力されない）
1
2

//オブジェクトを作成
var obj = {foo: 'FOO', bar: 'BAR', boo: 'BOO'};

// オブジェクトを iterable に（Symbol.iterator を実装）
obj[Symbol.iterator] = function(){
  var iterator = {};
  var current = 0;
  var keys = Object.keys(this);
  //イテレータの next() メソッドを定義
  iterator.next = ()  => {
    var iteratorResult = (current < keys.length)
      ? { value: this[keys[current]], done: false }
      : { value: undefined, done: true };
    current++;
    return iteratorResult;
  };
  return iterator;
};

//オブジェクトを作成
var obj = {foo: 'FOO', bar: 'BAR', boo: 'BOO'};

// Symbol.iterator をジェネレータ関数を使って実装
obj[Symbol.iterator] = function*(){
  //プロパティの名前（キー）の配列
  var keys = Object.keys(this);
  //オブジェクトの要素（プロパティ）の数は上記で取得した配列の length
  for(let i=0; i<keys.length; i++) {
    //オブジェクトの値はキーから取得して yield で返す
    yield this[keys[i]];
  }
}

//スプレッド構文を使って展開できる
console.log(...obj);   //FOO BAR BOO

//for...of 文を使って値を1つずつ取り出して繰り返し処理できる
for(var value of obj) {
  console.log(value);
}

/*
FOO
BAR
BOO
*/

 yield* expression;

function* myGenerator1() {
  yield 'foo';
  yield 'bar';
  yield 'buz';
}

function* myGenerator2() {
  yield 'HELLO!';
  //myGenerator1 を埋め込み（合成）
  yield* myGenerator1();
  yield 'BYE!';
}

const gen = myGenerator2();

console.log(gen.next()); // {value: "HELLO!", done: false}
console.log(gen.next()); // {value: "foo", done: false}
console.log(gen.next()); // {value: "bar", done: false}
console.log(gen.next()); // {value: "buz", done: false}
console.log(gen.next()); // {value: "BYE!", done: false}
console.log(gen.next()); // {value: undefined, done: true}

function* mixGenerator() {
  yield* [1, 2];
  yield* 'bar';
  yield* Array.from(arguments);
}

const gen = mixGenerator('foo');

console.log(gen.next()); // {value: 1, done: false}
console.log(gen.next()); // {value: 2, done: false}
console.log(gen.next()); // {value: "b", done: false}
console.log(gen.next()); // {value: "a", done: false}
console.log(gen.next()); // {value: "r", done: false}
console.log(gen.next()); // {{value: "foo", done: false}
console.log(gen.next()); // {value: undefined, done: true}

function* gntr1() {
  yield* [1, 2];
  return 'foo';
}

function* gntr2() {
  const returnValue = yield* gntr1();
  console.log(returnValue) // 'foo'（done:true の時の value の値）
  return returnValue;
}

const gen = gntr2();

console.log(gen.next()); // {value: 1, done: false}
console.log(gen.next()); // {value: 2, done: false}
// foo （8行目の出力）
console.log(gen.next()); // {value: "foo", done: true}
console.log(gen.next()); // {value: undefined, done: true}  

function* gntr1() {
  yield* [1, 2];
  // return を yield に変更
  yield 'foo';
}

function* gntr2() {
  const returnValue = yield* gntr1();
  console.log(returnValue) // undefined（done:true の時の value の値）
  return returnValue;
}

const gen = gntr2();

console.log(gen.next()); // {value: 1, done: false}
console.log(gen.next()); // {value: 2, done: false}
console.log(gen.next()); // {value: "foo", done: false}
// undefined
console.log(gen.next()); // {value: undefined, done: true} 

function* gntr() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = gntr();

console.log( gen.next() ); // { value: 1, done: false }
//return() を実行してジェネレータを終了（引数に与えられた値が value として返される）
console.log( gen.return("foo") ); // { value: "foo", done: true }
console.log( gen.next() ); // { value: undefined, done: true }

function* gntr() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = gntr();

console.log( gen.next() ); // { value: 1, done: false }
//throw() を実行して例外を発生させる
console.log( gen.throw(new Error("例外発生！")) ); // Uncaught Error: 例外発生！
console.log( gen.next() ); //実行されない

function* gntr() {
  try {
    yield 1;
    yield 2;
    yield 3;
  }catch(e){
    console.log(e); // エラーを捕捉してコンソールへ出力
  }
}

const gen = gntr();

console.log( gen.next() );  // { value: 1, done: false }
//throw() を実行して例外を発生させる
console.log( gen.throw(new Error("例外発生！")) ); // Error: 例外発生！ {value: undefined, done: true}
console.log( gen.next() );  //{value: undefined, done: true}

function* gntr() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = gntr();

console.log( gen.next() ); // { value: 1, done: false }

//呼び出し側のコードでもエラーを捕捉することができます
try {
  console.log( gen.throw(new Error("例外発生！")) );
} catch(e) {
  console.log(e); // エラーを捕捉してコンソールへ出力（Error: 例外発生！）
}

console.log( gen.next() ); //{value: undefined, done: true}