９　基本オブジェクト

（１） 静的プロパティ（定数）

Number オブジェクトの主なプロパティについて説明します。

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
document.getElementById("d1").textContent=Number.EPSILON;
document.getElementById("d2").textContent=Number.MAX_SAFE_INTEGER;
document.getElementById("d3").textContent=Number.MAX_VALUE;
document.getElementById("d4").textContent=Number.MIN_SAFE_INTEGER;
document.getElementById("d5").textContent=Number.MIN_VALUE;
document.getElementById("d6").textContent=Number.NaN;
document.getElementById("d7").textContent=Number.NEGATIVE_INFINITY;
document.getElementById("d8").textContent=Number.POSITIVE_INFINITY;
</script>

（２） 静的メソッド

Number オブジェクトの主なメソッドについて説明します。一般的なオブジェクト指向言語の「クラスメソッド」の意味合いです。

（２－１） 比較

記述例

<span id="d11"></span>　<span id="d12"></span><br>
<!-- 以下略 -->

<script>
document.getElementById("d11").textContent=Number.isNaN("xxx");
document.getElementById("d12").textContent=Number.isNaN(0 / 0);
document.getElementById("d21").textContent=Number.isFinite(1e1000);
document.getElementById("d22").textContent=Number.isFinite(1e308);
document.getElementById("d31").textContent=Number.isInteger(0.5);
document.getElementById("d32").textContent=Number.isInteger(1);
document.getElementById("d41").textContent=Number.isSafeInteger(9007199254740992);
document.getElementById("d42").textContent=Number.isSafeInteger(9007199254740991);
</script>

（２－２） 解析

記述例

<span id="d01"></span>　<span id="d11"></span><br>
<!-- 以下略 -->

<script>
document.getElementById("d01").textContent=Number.parseFloat("26.7");
document.getElementById("d02").textContent=Number.parseFloat("AAA");
document.getElementById("d03").textContent=Number.parseFloat(5 / 0);
document.getElementById("d11").textContent=Number.parseInt("26.7");
document.getElementById("d12").textContent=Number.parseInt("AAA");
document.getElementById("d13").textContent=Number.parseInt(5 / 0);
</script>

（１）インスタンス生成

記述例

<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<script>
let n1 = new Number("123");
document.getElementById("d1").textContent=typeof n1;
let n2 = Number("123");                 // これは Number 関数で、数値に変換している
document.getElementById("d2").textContent=typeof n2;
let n3 = 123;                           // これは数値
document.getElementById("d2").textContent=typeof n3;
</script>

new Number() はインスタンスが生成されるので type は object になります。それ以外は、数値なので number になります。ただし、実用上は暗黙の型変換が行わるためか、これらに余り違いはありません。

（２） インスタンス・メソッド

Number インスタンスの主なメソッドについて説明します。

（２－１） 有効桁

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
let n = 26.1234;
document.getElementById("d1").textContent=n.toExponential();
document.getElementById("d2").textContent=n.toExponential(2);
document.getElementById("d3").textContent=n.toExponential(4);

document.getElementById("d11").textContent=n.toFixed();
document.getElementById("d12").textContent=n.toFixed(3);

document.getElementById("d21").textContent=n.toPrecision();
document.getElementById("d22").textContent=n.toPrecision(3);
</script>

（２－２） 文字列変換

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
let c = 1234;
document.getElementById("d1").textContent=c.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' });
document.getElementById("d2").textContent=c.toLocaleString('en-IN', { style: 'currency', currency: 'EUR' });
document.getElementById("d3").textContent=0.352.toLocaleString('ja-JP', { style: 'percent', minimumFractionDigits: 2 });

document.getElementById("d11").textContent=c.toString();
document.getElementById("d12").textContent=c.toString(16);
</script>

（２－３） 変換

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
let n = new Number(26.1234);
let c = new Number(1234);
document.getElementById("d1").textContent=n.valueOf();
document.getElementById("d2").textContent=c.valueOf();
</script>

（１） 静的メソッド

String オブジェクトの主なメソッドについて説明します。一般的なオブジェクト指向言語の「クラスメソッド」の意味合いです。

（１－１）文字列生成

UTF-16 で指定された Unicode の文字列を返します。

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
document.getElementById("d1").textContent=String.fromCharCode(0x41);
document.getElementById("d2").textContent=String.fromCharCode(0x6F22, 0x5B57);
document.getElementById("d3").textContent=String.fromCharCode(0xD840, 0xDC0B);
document.getElementById("d4").textContent=String.fromCharCode(0x2000B);   // 32ビットに非対応（下位16ビットのみ変換）
document.getElementById("d5").textContent=String.fromCodePoint(0x2000B);  // 32ビットに対応
</script>

二つ目の例は、文字コードが２つ指定されていますので２文字になります。

三つ目の例も、文字コードが２つ指定されていますが、こちらは１文字です。このコードは３２ビットで１文字を表します。

四つ目と五つ目の例は、三つ目の例と同じ文字を３２ビットで指定していますが、fromCharCode は非対応です。

（１） インスタンス生成

記述例

<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<script>
let s1 = new String(123);
document.getElementById("d1").textContent=typeof s1;
let s2 = String(123);                   // これは String 関数で、文字列に変換している
document.getElementById("d2").textContent=typeof s2;
let s3 = "123";                         // これは文字列
document.getElementById("d2").textContent=typeof n3;
</script>

new String() はインスタンスが生成されるので type は object になります。それ以外は、文字列なので string になります。ただし、実用上は暗黙の型変換が行わるためか、これらに余り違いはありません。

（２） インスタンス・プロパティ

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
document.getElementById("d1").textContent="ABC".length;
document.getElementById("d2").textContent="漢字".length;
document.getElementById("d3").textContent="".length;

document.getElementById("d4").textContent="𠀋".length;
</script>

"𠀋" という文字は UTF-16 で 32ビットのコードなので、一文字なのに length は 2 が返ってきています。

（３） インスタンス・メソッド

（３－１） 比較

文字列をロケール、オプションを考慮して比較し、その大小関係を返します。

記述例

<span id="d01"></span>　<span id="d11"></span>　<span id="d21"></span>　<span id="d31"></span><br>
<!-- 以下略 -->

<script>
let s = new String("ああ");
document.getElementById("d01").textContent=s.localeCompare("あ、い");
document.getElementById("d02").textContent=s.localeCompare("あ、い", "ja", {ignorePunctuation:true});
document.getElementById("d03").textContent=s.localeCompare("あ、い", "ja", {ignorePunctuation:false});
s = "2"
document.getElementById("d11").textContent=s.localeCompare("10");
document.getElementById("d12").textContent=s.localeCompare("10", "ja", {numeric:true});
document.getElementById("d13").textContent=s.localeCompare("10", "ja", {numeric:false});
s = "AA"
document.getElementById("d21").textContent=s.localeCompare("aa");
document.getElementById("d22").textContent=s.localeCompare("aa", "en", {caseFirst:true});
document.getElementById("d23").textContent=s.localeCompare("aa", "en", {caseFirst:"upper"});
document.getElementById("d24").textContent=s.localeCompare("aa", "en", {caseFirst:"lower"});
s = "\xE1" // á
document.getElementById("d31").textContent=s.localeCompare("a");
document.getElementById("d32").textContent=s.localeCompare("a", "fr", {sensitivity:"base"});
document.getElementById("d33").textContent=s.localeCompare("a", "fr", {sensitivity:"accent"});
document.getElementById("d34").textContent=s.localeCompare("a", "fr", {sensitivity:"case"});
document.getElementById("d35").textContent=s.localeCompare("a", "fr", {sensitivity:"variant"});
</script>

（３－２） 存在チェック

文字列を検索して、存在しているかどうかを返します。

記述例

<span id="d01"></span>　<span id="d11"></span>　<span id="d21"></span><br>
<!-- 以下略 -->

<script>
let s = new String("ABCDEFGABC");
document.getElementById("d01").textContent=s.includes("BC");
document.getElementById("d02").textContent=s.includes("X");
document.getElementById("d03").textContent=s.includes("CD", 3);
document.getElementById("d11").textContent=s.startsWith("ABC");
document.getElementById("d12").textContent=s.startsWith("ABC", 1);
document.getElementById("d13").textContent=s.startsWith("ABC", 7);
document.getElementById("d21").textContent=s.endsWith("BC");
document.getElementById("d22").textContent=s.endsWith("BC", 9);
document.getElementById("d23").textContent=s.endsWith("BC", 3);
</script>

（３－３） 存在位置

文字列を検索して、存在している位置を返します。

記述例

<span id="d01"></span>　<span id="d11"></span><br>
<!-- 以下略 -->

<script>
let s = new String("ABCDEFGABC");
document.getElementById("d01").textContent=s.indexOf("BC");
document.getElementById("d02").textContent=s.indexOf("BC", 2);
document.getElementById("d03").textContent=s.indexOf("X");
document.getElementById("d11").textContent=s.lastIndexOf("ABC");
document.getElementById("d12").textContent=s.lastIndexOf("ABC", 7);
document.getElementById("d13").textContent=s.lastIndexOf("G", 6);
</script>

lastIndexOf("ABC", 7) の結果が 7 である点に注意してください。検索開始位置は 7 なので、検索範囲は、ABCDEFGA ですが、7文字目の A が検索文字列の先頭文字の A と等しいので、その後ろの BC が比較され、結果として等しいため 7 が返るようです。

（３－４） マッチング

正規表現に一致する文字列が存在しているかどうかを検査し、その文字列や位置を返します。

引数は文字列ではありません。正規表現を "" で囲まないで、直に書きます。

記述例

<span id="d01"></span>　<span id="d11"></span><br>
<!-- 以下略 -->

<script>
let s = new String("ABCDxEFGxABxC");
document.getElementById("d01").textContent=s.match(/x./);
document.getElementById("d02").textContent=s.match(/B.{0,2}/g);
document.getElementById("d03").textContent=s.match(/^B/);
document.getElementById("d11").textContent=s.search(/x./);
document.getElementById("d12").textContent=s.search(/B.{0,2}/g);
document.getElementById("d13").textContent=s.search(/^B/);
</script>

正規表現が /B.{0,2}x/g （B で始まり x で終わる 2～4 文字の文字列）のときは複数の位置に一致するはずですが、search では最初の位置しか戻り値に設定されません。

（３－５） 部分取り出し

文字列の一部分を取り出します。

記述例

<span id="d01"></span>　<span id="d11"></span><br>
<!-- 以下略 -->

<script>
let a = "ABCDEFGHIJ";
let k = "あいうえお";
document.getElementById("d01").textContent=a.charAt(2);
document.getElementById("d02").textContent=k.charAt(2);
document.getElementById("d11").textContent=a.substring(2,4);
document.getElementById("d12").textContent=k.substring(2,4);
document.getElementById("d21").textContent=a.slice(2,4);
document.getElementById("d22").textContent=k.slice(2,4);
document.getElementById("d31").textContent=a.slice(-4,-2);
document.getElementById("d32").textContent=k.slice(-4,-2);
document.getElementById("d41").textContent=a.substr(2,4);
document.getElementById("d42").textContent=k.substr(2,4);
document.getElementById("d51").textContent=a.substr(-4,2);
document.getElementById("d52").textContent=k.substr(-4,2);
document.getElementById("d61").textContent=a.charCodeAt(2).toString(16);
document.getElementById("d62").textContent=k.charCodeAt(2).toString(16);
</script>

最後の charCodeAt は UTF-16 のコードが返ってくるので、16進数表示にしています。ちなみに 43 は 'C' で、3046 は 'う' です。

（３－６） トリミング

文字列の前後の空白（全角空白、タブ、改行なども含む）を取り除きます。

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
let a = "	　\n ab c	　\n ";  // "(タブ)(全角空白)\n(空白)ab(空白)c(タブ)(全角空白)\n(空白)"
document.getElementById("d1").textContent="|" + a.trim() + "|";
document.getElementById("d2").textContent="|" + a.trimLeft() + "|";
document.getElementById("d3").textContent="|" + a.trimRight() + "|";
</script>

（３－７） 分割と連結

文字列を分割しその部分文字列を取り出したり、２つの文字列を連結したり、同じ文字列を繰り返し生成し連結します。

記述例

<span id="d01"></span>　<span id="d02"></span>　<span id="d03"></span>　<!-- 中間略 -->　<span id="d07"></span><br>
<!-- 以下略 -->

<script>
function set(n, w) {
  for (var i = 0 ; i < w.length ; i++) {
    document.getElementById(n + (i + 1)).textContent="'" + w[i] + "'";
  }
}
let a = "abc,de,,f,g,";
let w = a.split(",");
set("d0", w);
w = a.split(",", 4);
set("d1", w);

document.getElementById("d21").textContent="abcde".concat("xyz");
document.getElementById("d31").textContent="○×".repeat(5);
</script>

（３－８） 置換

文字列の一部分を別の文字列に置き換えます。

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
document.getElementById("d1").textContent="abcdebcd".replace("bc", "xyz");
document.getElementById("d2").textContent="a1b23c456d78e".replace(/\d/g, "#");
document.getElementById("d3").textContent="ABC,XY".replace(/(.*),(.*)/, function(str, p1, p2) {return p2 + "," + p1});
document.getElementById("d4").textContent="abcde".replace("x", "#");
</script>

１つ目は最初に見つかった "bc" を "xyz" に置き換えています。

２つ目は正規表現ですべての数字を捜し "#" に置き換えています。

３つ目は正規表現によって "," で分割し、関数に引数として渡しています。この例では、str が元の文字列の "ABC,XY"、p1 が "ABC"、p2 が "XY" です。分割数が多い場合はそれに合わせて引数を増やします。

４つ目は一致する文字列がありませんので、置換されず元の文字列のままになります。

（３－９） 変換

文字列の大文字・小文字を変換した文字列に置き換えます。

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
let a = "Aa Àà Аа Αα Ａａ あぁ";
document.getElementById("d1").textContent=a.toLowerCase();
document.getElementById("d2").textContent=a.toUpperCase();
document.getElementById("d3").textContent=a.toLocaleLowerCase();
document.getElementById("d4").textContent=a.toLocaleUpperCase();
</script>

現状、変化があるのはアルファベットだけのようです。また、toLowerCase() と toLocaleLowerCase() との違いはないようです。

ちなみに文字は、英語　フランス語　ロシア語　ギリシャ語　全角　ひらがな　の順です。

（３－１０） タグ付

開始タグ、終了タグで囲んだ文字列を返します。

ただし、HTML5 で廃止されたタグを出力するものもありますので、使用することは推奨されていません。

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
let s = "ABC";
document.getElementById("d1").textContent=s.anchor("label");
document.getElementById("d2").textContent=s.link("#label");
document.getElementById("d3").textContent=s.bold();
document.getElementById("d4").textContent=s.italics();
document.getElementById("d5").textContent=s.small();
document.getElementById("d6").textContent=s.sub();
document.getElementById("d7").textContent=s.sup();
document.getElementById("d8").textContent=s.big();
document.getElementById("d9").textContent=s.blink();
document.getElementById("d10").textContent=s.fixed();
document.getElementById("d11").textContent=s.fontcolor("white");
document.getElementById("d12").textContent=s.fontsize("16pt");
document.getElementById("d13").textContent=s.strike();
</script>

（１） 静的メソッド

Date オブジェクトの主なメソッドについて説明します。一般的なオブジェクト指向言語の「クラスメソッド」の意味合いです。

（１－１）経過ミリ秒

協定世界時（UTC）の 1970 年 1 月 1 日 00:00:00 から経過したミリ秒を返します。

世界各地の標準時は協定世界時（UTC）を基準として定めており、日本標準時（JST）は協定世界時（UTC）より9時間早く、「GMT+0900」と表記しますが、省略したら日本標準時（JST）になります。

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
document.getElementById("d1").textContent=Date.now();
document.getElementById("d2").textContent=Date.parse("2019/5/1");
document.getElementById("d3").textContent=Date.parse("2019/5/1 12:00:00 GMT+900"); // 日本標準時（GMT+900 は省略できる）
document.getElementById("d4").textContent=Date.parse("2019/5/1 12:00:00 GMT");     // 協定世界時（日本標準時の９時間遅れ）
document.getElementById("d5").textContent=Date.UTC(2019, 4, 1);     // UTC は協定世界時、月は 0～11
document.getElementById("d6").textContent=Date.UTC(2019, 4, 1, 12);
document.getElementById("d7").textContent=Date.UTC(2019, 4, 1, 12, 5);
document.getElementById("d8").textContent=Date.UTC(2019, 4, 1, 12, 5, 30);
document.getElementById("d9").textContent=Date.UTC(2019, 4, 1, 12, 5, 30, 500);
</script>

（１） インスタンス生成

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
let dt1 = new Date();
document.getElementById("d1").textContent=typeof dt1;
let dt2 = Date();
document.getElementById("d2").textContent=typeof dt2;

document.getElementById("d3").textContent=dt1;
dt1 = new Date("2019/5/1");
document.getElementById("d4").textContent=dt1;
dt1 = new Date("2019/5/1 12:00");
document.getElementById("d5").textContent=dt1;
dt1 = new Date(2019, 4, 1);
document.getElementById("d6").textContent=dt1;
dt1 = new Date(2019, 4, 1, 12, 5, 30, 500);
document.getElementById("d7").textContent=dt1;
</script>

new Date() はインスタンスが生成されるので type は object になります。Date() は、現在の日時を表す文字列なので string になります。ただし、実用上は暗黙の型変換が行わるためか、これらに余り違いはありません。

３行目は現在日時の Date インスタンスが得られます。４行目以降は指定した日時の Date インスタンスが得られます。

（２） インスタンス・メソッド

（２－１）日本標準時（JST）の取得

日本標準時（JST）の年月日時分秒などを取得します。

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
let dt1 = new Date();
document.getElementById("d1").textContent=dt1.getFullYear();
document.getElementById("d2").textContent=dt1.getMonth();
document.getElementById("d3").textContent=dt1.getDate();
document.getElementById("d4").textContent=dt1.getHours();
document.getElementById("d5").textContent=dt1.getMinutes();
document.getElementById("d6").textContent=dt1.getSeconds();
document.getElementById("d7").textContent=dt1.getMilliseconds();
document.getElementById("d8").textContent=dt1.getDay();
document.getElementById("d9").textContent=dt1.getTime();
document.getElementById("d10").textContent=dt1.getTimezoneOffset();
</script>

日本標準時（JST）の現在時刻を表示しています。

（２－２）協定世界時（UTC）の取得

協定世界時（UTC）の年月日時分秒などを取得します。

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
let dt1 = new Date();
document.getElementById("d1").textContent=dt1.getUTCFullYear();
document.getElementById("d2").textContent=dt1.getUTCMonth();
document.getElementById("d3").textContent=dt1.getUTCDate();
document.getElementById("d4").textContent=dt1.getUTCHours();
document.getElementById("d5").textContent=dt1.getUTCMinutes();
document.getElementById("d6").textContent=dt1.getUTCSeconds();
document.getElementById("d7").textContent=dt1.getUTCMilliseconds();
document.getElementById("d8").textContent=dt1.getUTCDay();
</script>

協定世界時（UTC）の現在時刻を表示しています。

（２－３）日本標準時（JST）の設定

日本標準時（JST）の年月日時分秒などを設定します。

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
function disp(d) {
  return d.toLocaleString() + "." + ("00"+d.getMilliseconds()).slice(-3);
}
let dt0 = new Date();    // 現在時刻
let dt1 = new Date(0);   // 1970/1/1 00:00:00
document.getElementById("d1").textContent=disp(dt1);
dt1.setFullYear(dt0.getFullYear());                    // 年
document.getElementById("d2").textContent=disp(dt1);
dt1.setMonth(dt0.getMonth());                          // 月
document.getElementById("d3").textContent=disp(dt1);
dt1.setDate(dt0.getDate());                            // 日
document.getElementById("d4").textContent=disp(dt1);
dt1.setHours(dt0.getHours());                          // 時
document.getElementById("d5").textContent=disp(dt1);
dt1.setMinutes(dt0.getMinutes());                      // 分
document.getElementById("d6").textContent=disp(dt1);
dt1.setSeconds(dt0.getSeconds());                      // 秒
document.getElementById("d7").textContent=disp(dt1);
dt1.setMilliseconds(dt0.getMilliseconds());            // ミリ秒
document.getElementById("d8").textContent=disp(dt1);
dt0 = new Date();    // 現在時刻
dt1.setTime(dt0.getTime());
document.getElementById("d9").textContent=disp(dt1);
</script>

一行目が初期日時ですが、順に年、月、日、時、分、秒、ミリ秒と設定しています。最後の行は、現在時刻を取り直して一度に設定し直しています。

（２－４）協定世界時（UTC）の設定

協定世界時（UTC）の年月日時分秒などを設定します。

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
function disp(d) {
  return d.toUTCString() + "." + ("00"+d.getUTCMilliseconds()).slice(-3);
}
let dt0 = new Date();    // 現在時刻
let dt1 = new Date(0);   // 1970/1/1 00:00:00
document.getElementById("d1").textContent=disp(dt1);
dt1.setUTCFullYear(dt0.getUTCFullYear());                    // 年
document.getElementById("d2").textContent=disp(dt1);
dt1.setUTCMonth(dt0.getUTCMonth());                          // 月
document.getElementById("d3").textContent=disp(dt1);
dt1.setUTCDate(dt0.getUTCDate());                            // 日
document.getElementById("d4").textContent=disp(dt1);
dt1.setUTCHours(dt0.getUTCHours());                          // 時
document.getElementById("d5").textContent=disp(dt1);
dt1.setUTCMinutes(dt0.getUTCMinutes());                      // 分
document.getElementById("d6").textContent=disp(dt1);
dt1.setUTCSeconds(dt0.getUTCSeconds());                      // 秒
document.getElementById("d7").textContent=disp(dt1);
dt1.setUTCMilliseconds(dt0.getUTCMilliseconds());            // ミリ秒
document.getElementById("d8").textContent=disp(dt1);
</script>

一行目が初期日時ですが、順に年、月、日、時、分、秒、ミリ秒と設定しています。

（２－５）文字列変換

日時を文字列に変換します。

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
let dt1 = new Date();    // 現在時刻
document.getElementById("d1").textContent=dt1.toDateString();
document.getElementById("d2").textContent=dt1.toTimeString();
document.getElementById("d3").textContent=dt1.toString();
document.getElementById("d4").textContent=dt1.toUTCString();
</script>

（２－６）ロケールに従った文字列変換

指定されたロケールやオプションに従って日時を文字列に変換します。ただし、ブラウザによって表示形式が異なります。

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
let dt1 = new Date(2019,4,1,13,2,3);    // 2019/5/1 13:02:03
document.getElementById("d1").textContent=dt1.toLocaleDateString();
document.getElementById("d2").textContent=dt1.toLocaleDateString("en-US");
document.getElementById("d3").textContent=dt1.toLocaleDateString("ja-JP-u-ca-japanese");
document.getElementById("d4").textContent=dt1.toLocaleDateString("ja-JP", {weekday:"short", month:"long", day:"2-digit"});
document.getElementById("d5").textContent=dt1.toLocaleDateString("ja-JP", {weekday:"long", month:"2-digit", day:"numeric"});

document.getElementById("d11").textContent=dt1.toLocaleTimeString();
document.getElementById("d12").textContent=dt1.toLocaleTimeString("en-US");
document.getElementById("d13").textContent=dt1.toLocaleTimeString("ja-JP-u-ca-japanese");
document.getElementById("d14").textContent=dt1.toLocaleTimeString("ja-JP", {hour12:true, hour:"numeric"});
document.getElementById("d15").textContent=dt1.toLocaleTimeString("ja-JP", {hour12:false, hour:"2-digit"});

document.getElementById("d21").textContent=dt1.toLocaleString();
document.getElementById("d22").textContent=dt1.toLocaleString("en-US");
document.getElementById("d23").textContent=dt1.toLocaleString("ja-JP-u-ca-japanese");
document.getElementById("d23").textContent=dt1.toLocaleString("ja-JP-u-ca-japanese", {year:"numeric"});
document.getElementById("d24").textContent=dt1.toLocaleString("ja-JP", {hour12:true, month:"long", day:"numeric", hour:"numeric"});
document.getElementById("d25").textContent=dt1.toLocaleString("ja-JP", {hour12:false, month:"short", day:"2-digit", hour:"2-digit"});
</script>

ブラウザによって表示形式が異なります。また、オプションによって表示される項目（年月日時分秒）が変わりますが、それもブラウザによって異なります。

（１）静的プロパティ（定数）

Math オブジェクトの主なプロパティについて説明します。

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
document.getElementById("d1").textContent=Math.E;
document.getElementById("d2").textContent=Math.LN2;
document.getElementById("d3").textContent=Math.LN10;
document.getElementById("d4").textContent=Math.LOG2E;
document.getElementById("d5").textContent=Math.LOG10E;
document.getElementById("d6").textContent=Math.PI;
document.getElementById("d7").textContent=Math.SQRT1_2;
document.getElementById("d8").textContent=Math.SQRT2;
</script>

（２） 静的メソッド

Math オブジェクトの主なメソッドについて説明します。一般的なオブジェクト指向言語の「クラスメソッド」の意味合いです。

（２－１）三角関数

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
  document.getElementById("d1").textContent=Math.acos(-1);        // 約 3.141592653589793
  document.getElementById("d2").textContent=Math.acosh(2);        // 約 1.3169578969248166
  document.getElementById("d3").textContent=Math.asin(1);         // 約 1.570796326794897
  document.getElementById("d4").textContent=Math.asinh(1);        // 約 0.881373587019543
  document.getElementById("d5").textContent=Math.atan(1);         // 約 0.7853981633974483
  document.getElementById("d6").textContent=Math.atanh(0.5);      // 約 0.5493061443340548
  document.getElementById("d7").textContent=Math.atan2(90, 15);   // 約 1.4056476493802699
  document.getElementById("d8").textContent=Math.cos(Math.PI/3);  // 0.5
  document.getElementById("d9").textContent=Math.cosh(1);         // 約 1.5430806348152437
  document.getElementById("d10").textContent=Math.sin(Math.PI/6); // 0.5
  document.getElementById("d11").textContent=Math.sinh(1);        // 約 1.1752011936438014
  document.getElementById("d12").textContent=Math.tan(1);         // 約 1.5574077246549023
  document.getElementById("d13").textContent=Math.tanh(1);        // 約 0.7615941559557649
</script>

（２－２）対数

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
document.getElementById("d1").textContent=Math.log(10);        // 約 2.302585092994046
document.getElementById("d2").textContent=Math.log1p(1);       // 約 0.6931471805599453
document.getElementById("d3").textContent=Math.log10(2);       // 約 0.3010299956639812
document.getElementById("d4").textContent=Math.log2(3);        // 約 1.584962500721156
</script>

（２－３）累乗

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
document.getElementById("d1").textContent=Math.exp(1);        // 約 2.718281828459045
document.getElementById("d2").textContent=Math.expm1(-1);     // 約 -0.6321205588285577
document.getElementById("d3").textContent=Math.pow(7, 2);     // 49
</script>

（２－４）平方根・立方根

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
document.getElementById("d1").textContent=Math.hypot(3,4,5);    // 約 7.0710678118654755
document.getElementById("d2").textContent=Math.sqrt(2);         // 約 1.414213562373095
document.getElementById("d3").textContent=Math.cbrt(2);         // 約 1.2599210498948734
</script>

（２－５）繰り上げ・繰り下げ・絶対値

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
document.getElementById("d2").textContent=Math.abs(-2);         // 2
document.getElementById("d2").textContent=Math.ceil(45.95);     // 46
document.getElementById("d3").textContent=Math.floor(45.95);    // 45
document.getElementById("d2").textContent=Math.fround(1.337);   // 約 1.3370000123977661
document.getElementById("d2").textContent=Math.round(20.5);     // 21
document.getElementById("d3").textContent=Math.trunc(42.84);    // 42
</script>

（２－６）最大・最小

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
document.getElementById("d2").textContent=Math.max(5,-2,7,3,2);    // 7
document.getElementById("d2").textContent=Math.min(5,-2,7,3,2);    // -2
</script>

（２－７）乱数

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
document.getElementById("d1").textContent=Math.random();
</script>

（１） 静的メソッド

Array オブジェクトの主なメソッドについて説明します。一般的なオブジェクト指向言語の「クラスメソッド」の意味合いです。

（１－１）インスタンス生成

記述例

<span id="d1"></span>　<span id="d11"></span>　 <!-- 途中略 -->　<span id="d13"></span><br>
<!-- 以下略 -->

<script>
function set(array, label) {
  for (var i = 0 ; i < array.length ; i++) {
    document.getElementById(label+(i+1)).textContent=array[i];
  }
}
var a = Array.of(1, 2, 3);
set(a, "d1");    // 1, 2, 3
let b = Array.of("one", "two", "three");
set(b, "d2");    // "one", "two", "three"

let c = Array.from(a);
set(c, "d3");    // 1, 2, 3
let d = Array.from("abc");
set(d, "d4");    // "a", "b", "c"
let e = Array.from([1,2,3], function(x){return x*10});
set(e, "d5");    // 10, 20, 30
</script>

生成された配列の各要素を表示しています。

最後の例は、元の配列の要素の10倍した値を持った新しい配列が生成されています。

（１－２）検査

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
document.getElementById("d1").textContent=Array.isArray([]);            // true
document.getElementById("d2").textContent=Array.isArray(new Array);     // true
document.getElementById("d3").textContent=Array.isArray();              // false
document.getElementById("d4").textContent=Array.isArray(0);             // false
</script>

（１） インスタンス生成

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
let a = new Array();
document.getElementById("d1").textContent=a.length;    // 0
let b = new Array(3);
document.getElementById("d2").textContent=b.length;    // 3
let c = new Array("one", "two", "three");
document.getElementById("d3").textContent=c.length;    // 3
let d = ["one", "two", "three"];
document.getElementById("d4").textContent=d.length;    // 3
</script>

要素数を表示しています。また、最後の例のように記述しても配列が生成されます。

（２） インスタンス・メソッド

Array インスタンスの主なメソッドについて説明します。一般的なオブジェクト指向言語の「インスタンスメソッド」の意味合いです。

（２－１）新配列生成

配列に他の配列や値を追加したり、一部を取り出したりして、新しい配列を生成します。

記述例

<span id="d11"></span> <!-- 途中略 --> <span id="d15"></span><br>
<!-- 以下略 -->

<script>
function set(array, label) {
  for (let i = 0 ; i < array.length ; i++) {
    document.getElementById(label+(i+1)).textContent=array[i];
  }
}
let arr = ["a", "b"];
let a1 = arr.concat(1, 2, 3);      // a b 1 2 3
set(a1, "d1");
let a2 = arr.concat([1, 2, 3]);    // a b 1 2 3
set(a2, "d2");
let a3 = arr.concat([1], [2, 3]);  // a b 1 2 3
set(arr, "d3");

let a4 = a3.slice(2);              // 1 2 3
set(a4, "d4");
let a5 = a3.slice(1, 3);           // b 1
set(a5, "d5");
let a6 = a3.slice(-5, -3);         // a b
set(a6, "d6");
</script>

concat は元の配列に要素が追加された新しい配列が作られます（元の配列は変更ありません）が、push と unshift は元の配列が変更されます。

（２－２）イテレータ（Iterator）

イテレータとは、一連の処理中において現在の処理位置を把握しつつ、コレクション中のアイテムへ一つずつアクセスする方法を備えたオブジェクトのことです。

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
let arr = ['a', 'b', 'c'];
let eArr = arr.entries();    // [0,a] [1,b] [2,c]
let i = 1;
for (let e of eArr) {
  document.getElementById("d1" + i++).textContent="[" + e[0] + "," + e[1] + "]";
}
eArr = arr.keys();           // 0 1 2
i = 1;
for (let e of eArr) {
  document.getElementById("d2" + i++).textContent=e;
}
eArr = arr.values();         // a b c
i = 1;
for (let e of eArr) {
  document.getElementById("d3" + i++).textContent=e;
}
</script>

（２－３）要素の値設定

配列中の開始位置から終了位置の前までの要素に、指定した値を設定します。

記述例

<span id="d11"></span> <!-- 途中略 --> <span id="d15"></span><br>
<!-- 以下略 -->

<script>
function set(array, label) {
  for (let i = 0 ; i < array.length ; i++) {
    document.getElementById(label+(i+1)).textContent=array[i];
  }
}
let arr = [1, 2, 3, 4, 5];
arr.fill(0);                    // 0 0 0 0 0
set(arr, "d1");
arr = [1, 2, 3, 4, 5];
arr.fill(0, 3);                 // 1 2 3 0 0
set(arr, "d2");
arr = [1, 2, 3, 4, 5];
arr.fill(0, 2, 4);              // 1 2 0 0 5
set(arr, "d3");
arr = [1, 2, 3, 4, 5];
arr.fill(0, -2, -1);            // 1 2 3 0 5
set(arr, "d4");
</script>

（２－４）要素の追加・削除

配列に他の配列や値を追加します。

記述例

<span id="d11"></span> <!-- 途中略 --> <span id="d15"></span><br>
<!-- 以下略 -->

<script>
function set(array, label) {
  for (let i = 0 ; i < array.length ; i++) {
    document.getElementById(label+(i+1)).textContent=array[i];
  }
}
let a1 = ["a", "b"];
let l1 = a1.push(1, 2, 3);                    // a b 1 2 3
set(a1, "d1");
let a2 = ["a", "b"];
let l2 = a2.unshift(1, 2, 3);                 // 1 2 3 a b
set(a2, "d2");
let i1 = a1.pop();                            // a b 1 2
set(a1, "d3");
document.getElementById("d35").textContent="(" + i1 + ")";     // (3)
let l2 = a1.shift();                          // b 1 2
set(a1, "d4");
document.getElementById("d45").textContent="(" + i2 + ")";     // (a)
</script>

最後の２つは取り除いた要素を最後に "()" に囲って表示しています。

（２－５）置換

配列に他の配列や値をつないでできた新しい配列を返します。

記述例

<span id="d11"></span> <!-- 途中略 --> <span id="d15"></span><br>
<!-- 以下略 -->

<script>
function set(array, label) {
  for (let i = 0 ; i < array.length ; i++) {
    document.getElementById(label+(i+1)).textContent=array[i];
  }
}
let a1 = ["a", "b"];
let r1 = a1.splice(1, 0, "x");                // a x b
set(a1, "d1");
document.getElementById("d15").textContent="(" + r1 + ")";  // ()
let r2 = a1.splice([1, 2, "b", "c"]);         // a b c
set(a1, "d2");
document.getElementById("d25").textContent="(" + r2 + ")";  // (x,b)

let a2 = [1, 2, 3, 4, 5];
a2.copyWithin(0, 3);                          // 4 5 3 4 5
set(a2, "d3");
a2 = [1, 2, 3, 4, 5];
a2.copyWithin(1, 3, 5);                       // 1 4 5 4 5
set(a2, "d4");
</script>

前の２つは、取り除いた要素を最後に "()" に囲って表示しています。

（２－６）並べ替え

配列の要素を並べ替えます。

記述例

<span id="d11"></span> <!-- 途中略 --> <span id="d15"></span><br>
<!-- 以下略 -->

<script>
function set(array, label) {
  for (let i = 0 ; i < array.length ; i++) {
    document.getElementById(label+(i+1)).textContent=array[i];
  }
}
// a < b  : -1
// a == b : 0
// a > b  : 1
function  compare(a, b) {
  return a < b ? -1 : (a == b ? 0 : 1);    // 昇順
}

let a1 = [5, 4, 3, 2, 1];
a1.sort();           // 1 2 3 4 5
set(a1, "d1");
a1 = ["e", "d", "c", "b", "a"];
a1.sort(compare);    // a b c d e
set(a1, "d2");

a1.reverse();        // e d c b a
set(a1, "d3");
</script>

（２－７）検査

配列の要素を指定された関数によって検査します。

各メソッドから呼び出される callback 関数は次のような仕様です。

記述例

<span id="d01"></span><span id="d02"></span><br>
<!-- 以下略 -->

<script>
function isPositive(element, index, array) {
  return (element > 0);
}
document.getElementById("d01").textContent=[5, 7, 3, 4, 2].every(isPositive);   // true
document.getElementById("d02").textContent=[5, 7, -2, 4, 2].every(isPositive);  // false

document.getElementById("d11").textContent="[" + [5, 7, -2, 4, 2].filter(isPositive) + "]";      // [5,7,4,2]
document.getElementById("d12").textContent="[" + [-5, -7, -2, -4, -2].filter(isPositive) + "]";  // []

document.getElementById("d21").textContent=[-5, -7, 3, -4, -2].find(isPositive);   // 3
document.getElementById("d22").textContent=[-5, -7, -2, -4, -2].find(isPositive) == undefined ? "undefined" : "";  // undefined

document.getElementById("d31").textContent=[-5, -7, 3, -4, -2].findIndex(isPositive);   // 2
document.getElementById("d32").textContent=[-5, -7, -2, -4, -2].findIndex(isPositive);  // -1

document.getElementById("d41").textContent=[-5, -7, 3, -4, -2].some(isPositive);   // true
document.getElementById("d42").textContent=[-5, -7, -2, -4, -2].some(isPositive);  // false
</script>

（２－８）各要素に対する順次処理

配列の各要素に対して指定された関数を実行します。ただし、配列の要素は変更しません。処理結果によって配列とは別のインスタンスを変更したり、新たな配列インスタンスを生成したりします。

各メソッドから呼び出される callback 関数は次のような仕様です。

記述例

<div id="d1"></div>
<div id="d2"></div>

<script>
function calculate(element, index, array) {
  this[0] += element;
  this[1] *= element;
}
function twice(element, index, array) {
  return element + element;
}
let result = [0, 1];  // [和,積]
[5, 7, 3, 4, 2].forEach(calculate, result);
document.getElementById("d1").textContent="[" + result + "]";   // [21,840]

document.getElementById("d2").textContent="[" + [5, 7, -2, 4, 2].map(twice) + "]";      // [10,14,-4,8,4]
</script>

（２－９）全要素から処理

配列の各要素に対して指定された関数を実行します。ただし、配列の要素は変更しません。各要素に順に処理した単一の結果を返します。

各メソッドから呼び出される callback 関数は次のような仕様です。

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
function calculate(previousValue, currentValue, index, array) {
  return previousValue - currentValue;
}
document.getElementById("d1").textContent=[1, 2, 3, 4, 5].reduce(calculate);            // -13
document.getElementById("d2").textContent=[1, 2, 3, 4, 5].reduce(calculate, 6);         // -9

document.getElementById("d3").textContent=[1, 2, 3, 4, 5].reduceRight(calculate);       // -5
document.getElementById("d4").textContent=[1, 2, 3, 4, 5].reduceRight(calculate, 6);    // -9
</script>

一つ目は、((((1 - 2) - 3) - 4) - 5) → -13

二つ目は、(((((6 - 1) - 2) - 3) - 4) -5) → -9

三つ目は、((((5 - 4) - 3) - 2) - 1) → -5

四つ目は、(((((6 - 5) - 4) - 3) - 2) - 1) → -9

（２－１０）検索

配列の要素を検索します。

記述例

<span id="d01"></span><span id="d02"></span><span id="d03"></span><br>
<!-- 以下略 -->

<script>
document.getElementById("d01").textContent=[5, 4, 3, 2, 4].includes(4);        // true
document.getElementById("d02").textContent=[5, 4, 3, 2, 4].includes(4, 2);     // true
document.getElementById("d03").textContent=[5, 4, 3, 2, 4].includes(5, -3);    // false

document.getElementById("d11").textContent=[5, 4, 3, 2, 4].indexOf(4);         // 1
document.getElementById("d12").textContent=[5, 4, 3, 2, 4].indexOf(4, 2);      // 4
document.getElementById("d13").textContent=[5, 4, 3, 2, 4].indexOf(5, -3);     // -1

document.getElementById("d21").textContent=[5, 4, 3, 2, 4].lastIndexOf(4);     // 4
document.getElementById("d22").textContent=[5, 4, 3, 2, 4].lastIndexOf(4, 2);  // 1
document.getElementById("d23").textContent=[5, 4, 3, 2, 4].lastIndexOf(2, -3); // -1
</script>

（２－１１）文字列

配列の要素をつないで文字列にします。

記述例

<div id="d01"></div>
<!-- 以下略 -->

<script>
document.getElementById("d01").textContent=[1, 2, 3, 4, 5].join();                     // 1,2,3,4,5
document.getElementById("d02").textContent=["サゴシ", "コハダ", "サワラ"].join("->");   // サゴシ->コハダ->サワラ

document.getElementById("d11").textContent=[new Date(), Date.now()].toLocaleString();  // yyyy年mm月dd日 hh:mm:ss, ...(略)
document.getElementById("d12").textContent=[new Date(), Date.now()].toString();        // アメリカ英語式日時文字列
</script>

（１） インスタンス生成

記述例

<div id="d1"></div>
<div id="d2"></div>

<script>
let mapA = new Map();
document.getElementById("d1").textContent=mapA.size;                     // 0
let mapB = new Map([['犬', 'dog'], ['猫', 'cat'], ['山羊', 'goat']]);
document.getElementById("d2").textContent=mapB.size;                     // 3
</script>

要素数を表示しています。

（２） インスタンス・プロパティ

Map インスタンスの主なプロパティについて説明します。

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
let map = new Map();
document.getElementById("d1").textContent=map.size;                     // 0
map.set('犬', 'dog');
document.getElementById("d2").textContent=map.size;                     // 1
map.set('猫', 'cat');
document.getElementById("d3").textContent=map.size;                     // 2
</script>

要素数を表示しています。

（３） インスタンス・メソッド

Map インスタンスの主なメソッドについて説明します。

（３－１）イテレータ（Iterator）

イテレータとは、一連の処理中において現在の処理位置を把握しつつ、コレクション中のアイテムへ一つずつアクセスする方法を備えたオブジェクトのことです。

記述例

<div id="d11"></div><div id="d12"></div><div id="d13"></div>
<!-- 以下略 -->

<script>
let map = new Map();
map.set('a', 10);
map.set('b', 100);
map.set('c', 50);
let eMap = map.entries();    // [a,10] [b,100] [c,50]
let i = 1;
for (let e of eMap) {
  document.getElementById("d1" + i++).textContent="[" + e[0] + "," + e[1] + "]";
}
eMap = map.keys();           // a b c
i = 1;
for (let e of eMap) {
  document.getElementById("d2" + i++).textContent=e;
}
eMap = map.values();         // 10 100 50
i = 1;
for (let e of eMap) {
  document.getElementById("d3" + i++).textContent=e;
}
</script>

（３－２）要素追加

指定された key と value を追加します。キーあるいは値として任意の値（インスタンス、プリミティブ値とも）を使うことができます。

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
let map = new Map();
document.getElementById("d1").textContent=map.size;                     // 0
map.set('猫', 'cat');
map.set([1, 2], [100, 200, 300]);
let x = {a: 1};
map.set(x, {x:100, y:200});
map.set(1, 100);
document.getElementById("d2").textContent=map.size;                     // 4
map.set(1, 999);                     // 同じ 1 というキーで set する
document.getElementById("d3").textContent=map.size;                     // 4（要素数は増えない）
map.set([1, 2], [1]);                // 同じ [1, 2] というキーで set する
document.getElementById("d4").textContent=map.size;                     // 5（要素数が増える）
map.set(x, {});                      // 同じ {a: 1} というキーで set する
document.getElementById("d5").textContent=map.size;                     // 5（要素数は増えない）
</script>

要素数を表示しています。

set で新しい要素を追加します。ただし、同じキーを指定した場合は追加ではなく、値の更新になります。

map.set(1, 999); では、キー 1 の値を 100 から 999 にするだけなので、要素数は増えません。

しかし、map.set([1, 2], [1]); では、要素数が 4 から 5 に増えています。これは、同じ [1, 2] でもインスタンスが異なるため違うキーと判断されるからです。

map.set(x, {}); のようにインスタンスを変数に代入して行えば、もちろん同じインスタンスなので何度 set を実行しても要素数が増えることはありません。

（３－３）要素取得

指定された key で保存されている value を取得します。

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
let map = new Map();
let x = {a: 1};
map.set('猫', 'cat');
map.set(1, 100);
map.set(1, 999);
map.set([1, 2], [100, 200, 300]);
map.set(x, {x:100, y:200});
document.getElementById("d1").textContent=map.get('猫');                            // cat
document.getElementById("d2").textContent=map.get(1);                               // 999
document.getElementById("d3").textContent=map.get([1, 2])==undefined;               // true
document.getElementById("d4").textContent="x:" + map.get(x).x + " y:" + map.get(x).y; // x:100 y:200
document.getElementById("d5").textContent=map.get('x')==undefined;                  // true
</script>

指定したキーの値を取り出します。同じキーで何回も set している場合は最後の値が取り出されます。キーが見つからなければ、undefined になります。

そのため、[1, 2] というキーは、値としては同じですがインスタンスが異なるため、undefined となります。

変数に入れたインスタンスで set と get をする場合は、もちろん同じインスタンスなので値を取得できます。

（３－４）検査

指定された key で保存されている value があるかどうかを検査します。

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
let map = new Map();
let x = {a: 1};
map.set('猫', 'cat');
map.set(1, 100);
map.set([1, 2], [100, 200, 300]);
map.set(x, {x:100, y:200});
document.getElementById("d1").textContent=map.has('猫');                 // true
document.getElementById("d2").textContent=map.has(1);                    // true
document.getElementById("d3").textContent=map.has([1, 2]);               // false
document.getElementById("d4").textContent=map.has(x);                    // true
document.getElementById("d5").textContent=map.has('x');                  // false
</script>

指定したキーで保存された値があるかどうか検査します。存在している場合は true に、存在していなければ、false になります。

そのため、[1, 2] というキーは、値としては同じですがインスタンスが異なるため、false となります。

変数に入れたインスタンスの場合は、もちろん同じインスタンスなので true になります。

（３－５）各要素に対する順次処理

連想配列の各要素に対して指定された関数を実行します。ただし、配列の要素は変更しません。処理結果によって配列とは別のオブジェクトを変更したりします。

各メソッドから呼び出される callback 関数は次のような仕様です。

記述例

<span id="d1"></span><span id="d2"></span><span id="d3"></span>

<script>
function add(value, key, map) {
  this[key] += value;
}
let result = {'a':0, 'b':0, 'c':0};
let mapA = new Map();
mapA.set('a', 10);
mapA.set('b', 100);
let mapB = new Map();
mapB.set('a', 10);
mapB.set('c', 50);
mapA.forEach(add, result);
mapB.forEach(add, result);
document.getElementById("d1").textContent=result.a;   // 20
document.getElementById("d2").textContent=result.b;   // 100
document.getElementById("d3").textContent=result.c;   // 50
</script>

mapA.forEach では、result の a と b にそれぞれ 10 と 100 が加えられ、mapB.forEach では、result の a と c にそれぞれ 10 と 50 が加えられます。

（３－６）要素削除

連想配列の要素を削除します。

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
function disp(value, key, map) {
  this[0] += "[" + key + "," + value + "]";
}
let s = [""];
let map = new Map();
map.set('a', 10);
map.set('b', 100);
map.set('c', 50);
map.forEach(disp, s);
document.getElementById("d1").textContent="[" + s[0] + "]";   // [[a,10][b,100][c,50]]
map.delete('b');
s[0] = "";
document.getElementById("d2").textContent="[" + s[0] + "]";   // [[a,10][c,50]]
map.clear();
s[0] = "";
document.getElementById("d3").textContent="[" + s[0] + "]";   // []
</script>

（１） インスタンス生成

記述例

<div id="d1"></div>
<div id="d2"></div>

<script>
let setA = new Set();
document.getElementById("d1").textContent=setA.size;                     // 0
let setB = new Set(['犬', '猫', '山羊', '猫']);
document.getElementById("d2").textContent=setB.size;                     // 3
</script>

要素数を表示しています。Set インスタンスは同じ値を持てませんので、２つ目の '猫' は追加されません。

（２） インスタンス・プロパティ

Set インスタンスの主なプロパティについて説明します。

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
let set = new Set();
document.getElementById("d1").textContent=set.size;                     // 0
set.add('犬');
document.getElementById("d2").textContent=set.size;                     // 1
set.add('猫');
document.getElementById("d3").textContent=set.size;                     // 2
</script>

要素数を表示しています。

（３） インスタンス・メソッド

Set インスタンスの主なメソッドについて説明します。

（３－１）イテレータ（Iterator）

イテレータとは、一連の処理中において現在の処理位置を把握しつつ、コレクション中のアイテムへ一つずつアクセスする方法を備えたインスタンスのことです。

記述例

<div id="d1"></div>
<div id="d2"></div>

<script>
let set = new Set();
set.add('a');
set.add('b');
set.add('c');
let eSet = set.entries();    // [a,a] [b,b] [c,c]
let i = 1;
for (let e of eSet) {
  document.getElementById("d1" + i++).textContent="[" + e[0] + "," + e[1] + "]";
}
eSet = set.values();         // a b c
i = 1;
for (let e of eSet) {
  document.getElementById("d2" + i++).textContent=e;
}
</script>

（３－２）要素追加

指定された value を追加します。値として任意の値（インスタンス、プリミティブ値とも）を使うことができます。

また、Set インスタンスは同じ値を持てませんので、同じ値を追加しようとしても無視されます。

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
let set = new Set();
document.getElementById("d1").textContent=set.size;                     // 0
set.add('猫');
set.add([1, 2]);
let x = {a: 1};
set.add(x);
set.add(1);
document.getElementById("d2").textContent=set.size;                     // 4
set.add(1);                     // 同じ 1 というキーで set する
document.getElementById("d3").textContent=set.size;                     // 4（要素数は増えない）
set.add([1, 2]);                // 同じ [1, 2] というキーで set する
document.getElementById("d4").textContent=set.size;                     // 5（要素数が増える）
set.add(x);                      // 同じ {a: 1} というキーで set する
document.getElementById("d5").textContent=set.size;                     // 5（要素数は増えない）
</script>

要素数を表示しています。

add で新しい要素を追加します。ただし、同じキーを指定した場合は無視されます。

set.add(1); では無視されるので、要素数は増えません。

しかし、set.add([1, 2]); では、要素数が 4 から 5 に増えています。これは、同じ [1, 2] でもインスタンスが異なるため違う値と判断されるからです。

set.set(x); のようにインスタンスを変数に代入して行えば、もちろん同じインスタンスなので何度 add を実行しても要素数が増えることはありません。

（３－３）検査

指定された value があるかどうかを検査します。

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
let set = new Set();
let x = {a: 1};
set.add('猫');
set.add(1);
set.add([1, 2]);
set.add(x);
document.getElementById("d1").textContent=set.has('猫');                 // true
document.getElementById("d2").textContent=set.has(1);                    // true
document.getElementById("d3").textContent=set.has([1, 2]);               // false
document.getElementById("d4").textContent=set.has(x);                    // true
document.getElementById("d5").textContent=set.has('x');                  // false
</script>

指定したキーで保存された値があるかどうか検査します。存在している場合は true に、存在していなければ、false になります。

そのため、[1, 2] という値は、値としては同じですがインスタンスが異なるため、false となります。

変数に入れたインスタンスの場合は、もちろん同じインスタンスなので true になります。

（３－４）各要素に対する順次処理

固有値配列の各要素に対して指定された関数を実行します。ただし、配列の要素は変更しません。処理結果によって配列とは別のインスタンスを変更したりします。

各メソッドから呼び出される callback 関数は次のような仕様です。

記述例

<div id="d1"></div>

<script>
function count(value1, value2, set) {
  let range = this[0];          // [最小値, 最大値]
  if (value1 >= range[0] && value1 <= range[1])
   this[1]++;    // 件数
}
let result = [[6, 10], 0];      // [[最小値, 最大値], 件数]
let setA = new Set();
setA.add(6);
setA.add(5);
setA.add(10);
setA.add(11);
setA.add(7);
setA.forEach(count, result);    // count 関数内で result が this として扱われる
document.getElementById("d1").textContent=result[1];   // 3
</script>

（３－５）要素削除

固有値配列の要素を削除します。

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
function disp(value1, value2, set) {
  this[0] += value1 + " ";
}
let s = [""];
let set = new Set();
set.add('a');
set.add('b');
set.add('c');
set.forEach(disp, s);    // disp 関数内で s が this として扱われる
document.getElementById("d1").textContent="[" + s[0] + "]";   // [a b c]
set.delete('b');
s[0] = "";
set.forEach(disp, s);    // disp 関数内で s が this として扱われる
document.getElementById("d2").textContent="[" + s[0] + "]";   // [a,c]
set.clear();
s[0] = "";
set.forEach(disp, s);    // disp 関数内で s が this として扱われる
document.getElementById("d3").textContent="[" + s[0] + "]";   // []
</script>

（１） インスタンス生成

記述例

<div id="d1"></div>
<div id="d2"></div>

<script>
let weakmapA = new WeakMap();
document.getElementById("d1").textContent=weakmapA;                     // [object Object あるいは WeakMap]
let k1 = new Date(2016,6,18);
let k2 = new Date(2016,7,11);
let weakmapB = new WeakMap([[k1, "海の日"], [k2, "山の日"]]);
document.getElementById("d2").textContent=weakmapB.get(k1);             // 海の日
</script>

一つ目はインスタンスを、二つ目は要素を表示しています。

（２） インスタンス・メソッド

WeakMap インスタンスの主なメソッドについて説明します。

（２－１）要素追加

指定された key と value を追加します。値として任意の値（インスタンス、プリミティブ値とも）を使うことができますが、キーはインスタンスである必要があります。

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
let weakmap = new WeakMap();
let k = new Date(2016,7,11);
weakmap.set(k, "海の日");
document.getElementById("d1").textContent=weakmap.get(k);                     // 海の日
weakmap.set(k, "山の日");
document.getElementById("d2").textContent=weakmap.get(k);                     // 山の日
try {
  weakmap.set("2016/7/11", "山の日");
} catch(e) {
  document.getElementById("d3").textContent=e;                                // （例外が発生する）
}
</script>

要素を取り出して表示しています。

set で新しい要素を追加します。ただし、同じキーを指定した場合は追加ではなく、値の更新になります。

weakmap.set(k, "山の日"); では、値を "海の日" から "山の日" に変更していますので、 "山の日" が表示されます。

しかし、weakmap.set("2016/7/11", "山の日"); では、例外が発生しています。これは、"2016/7/11" がインスタンスではないからです。

（２－２）要素取得

指定された key で保存されている value を取得します。

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
let weakmap = new WeakMap();
let k = new Date(2016,7,11);
weakmap.set(k, "海の日");
weakmap.set(k, "山の日");
document.getElementById("d1").textContent=weakmap.get(k);                                 // 山の日
document.getElementById("d2").textContent=weakmap.get(new Date(2016,7,11))==undefined;   // true
document.getElementById("d3").textContent=weakmap.get(new String(""))==undefined;        // true
</script>

指定したキーの値を取り出します。同じキーで何回も set している場合は最後の値が取り出されます。キーが見つからなければ、undefined になります。

そのため、new Date(2016,7,11) というキーは、値としては同じですがインスタンスが異なるため、undefined となります。

変数に入れたインスタンスで set と get をする場合は、もちろん同じインスタンスなので値を取得できます。

（２－３）検査

指定された key で保存されている value があるかどうかを検査します。

記述例

<script>
let weakmap = new WeakMap();
let k = new Date(2016,7,11);
weakmap.set(k, "山の日");
document.getElementById("d1").textContent=weakmap.has(k);                     // true
document.getElementById("d2").textContent=weakmap.has(new Date(2016,7,11));   // false
document.getElementById("d3").textContent=weakmap.has(new String(""));        // false
</script>

指定したキーで保存された値があるかどうか検査します。存在している場合は true に、存在していなければ、false になります。

そのため、new Date(2016,7,11) というキーは、値としては同じですがインスタンスが異なるため、false となります。

変数に入れたインスタンスの場合は、もちろん同じインスタンスなので true になります。

（２－４）要素削除

連想配列の要素を削除します。

記述例

<span id="d11"></span><span id="d12"></span><br>
<span id="d21"></span><span id="d22"></span><br>
<span id="d31"></span><span id="d32"></span><br>

<script>
let weakmap = new WeakMap();
let k1 = new Date(2016,6,18);
let k2 = new Date(2016,7,11);
weakmap.set(k1, "海の日");
weakmap.set(k2, "山の日");
document.getElementById("d11").textContent=weakmap.get(k1);   // 海の日
document.getElementById("d12").textContent=weakmap.get(k2);   // 山の日
weakmap.delete(k1);
document.getElementById("d21").textContent=weakmap.has(k1);   // false
document.getElementById("d22").textContent=weakmap.get(k2);   // 山の日
weakmap.clear();
document.getElementById("d31").textContent=weakmap.has(k1);   // false
document.getElementById("d32").textContent=weakmap.has(k2);   // false
</script>

k1 を削除したので、has(k1) では false となります。

clear() 後には k1、k2 とも false となります。

（１） インスタンス生成

記述例

<div id="d1"></div>
<div id="d2"></div>

<script>
let k1 = new Date(2016,6,18);
let k2 = new Date(2016,7,11);
let weaksetA = new WeakSet();
document.getElementById("d1").textContent=weaksetA;                     // [object WeakSet]
let weaksetB = new WeakSet([k1, k2]);
document.getElementById("d2").textContent=weaksetB.has(k1);             // true
</script>

一つ目はインスタンスを、二つ目は要素が存在するかどうかを表示しています。

（２） インスタンス・メソッド

WeakSet インスタンスの主なメソッドについて説明します。一般的なオブジェクト指向言語の「インスタンスメソッド」の意味合いです。

（２－１）要素追加

指定されたインスタンスを追加します。

また、WeakSet インスタンスは同じ値を持てませんので、同じ値を追加しようとしても無視されます。

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
let weakset = new WeakSet();
document.getElementById("d1").textContent=weakset.add(new Date(2016,6,18));       // [object WeakSet]
document.getElementById("d2").textContent=weakset.add(new String("2016/7/18"));   // [object WeakSet]
document.getElementById("d3").textContent=weakset.add("2016/7/18");               // （例外が発生する）
</script>

インスタンスを追加しています。

sweakset.add の引数はインスタンスなければいけないので、文字列を引数にすると例外が発生します。

（２－２）検査

指定された value があるかどうかを検査します。

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
let weakset = new WeakSet();
let k = new Date(2016,6,18);
weakset.add(k);
document.getElementById("d1").textContent=weakset.has(k);                      // true
document.getElementById("d2").textContent=weakset.has(new Date(2016,6,18));    // false
document.getElementById("d3").textContent=weakset.has("2016/7/18");            // false
</script>

指定したキーで保存された値があるかどうか検査します。存在している場合は true に、存在していなければ、false になります。

そのため、new Date(2016,6,18) という値は、値としては同じですがインスタンスが異なるため、false となります。

変数に入れたインスタンスの場合は、もちろん同じインスタンスなので true になります。

（２－３）要素削除

弱参照連想配列の要素を削除します。

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
let weakset = new WeakSet();
let k = new Date(2016,6,18);
weakset.add(k);
document.getElementById("d1").textContent=weakset.has(k);                      // true
set.delete(k);
document.getElementById("d2").textContent=weakset.has(k);                      // false
weakset.add(k);
set.delete(new Date(2016,6,18));
document.getElementById("d3").textContent=weakset.has(k);                      // true
weakset.clear();
document.getElementById("d4").textContent=weakset.has(k);                      // false
</script>

指定したインスタンスを削除します。

delete(new Date(2016,6,18)) では、保存されているインスタンスと値は同じですが、インスタンスが異なるので削除されません。よって、true となります。

clear() 後には存在しませんので、false となります。