９　基本オブジェクト

（１） 静的メソッド

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.5707963267948966
  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.5000000000000001
  document.getElementById("d9").textContent=Math.cosh(1);         // 1.5430806348152437
  document.getElementById("d10").textContent=Math.sin(Math.PI/6); // 0.49999999999999994
  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(2023,6,17);
let k2 = new Date(2023,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(2023,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("2023/7/11", "山の日");
} catch(e) {
  document.getElementById("d3").textContent=e;                                // （例外が発生する）
}
</script>

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

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

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

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

（２－２）要素取得

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

記述例

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

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

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

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

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

（２－３）検査

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

記述例

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

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

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

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

（２－４）要素削除

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

記述例

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

<script>
let weakmap = new WeakMap();
let k1 = new Date(2023,6,17);
let k2 = new Date(2023,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);   // 山の日
</script>

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

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

（１） インスタンス生成

記述例

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

<script>
let k1 = new Date(2023,6,17);
let k2 = new Date(2023,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(2023,6,17));       // [object WeakSet]
document.getElementById("d2").textContent=weakset.add(new String("2023/7/17"));   // [object WeakSet]
document.getElementById("d3").textContent=weakset.add("2023/7/17");               // （例外が発生する）
</script>

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

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

（２－２）検査

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

記述例

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

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

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

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

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

（２－３）要素削除

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

記述例

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

<script>
let weakset = new WeakSet();
let k = new Date(2023,6,17);
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(2023,6,17));
document.getElementById("d3").textContent=weakset.has(k);                      // true
</script>

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

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

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

（１） 静的メソッド

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

（１－１）生成

{
  "プロパティ名":ディスクリプタ[, "プロパティ名":ディスクリプタ, ... , "プロパティ名":ディスクリプタ]
}

{
  value : "値",
  writable : true,
  configurable : false,
  enumerable : false,
  get : function(){},
  set : function(){},
}

記述例

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

<script>
function disp(obj) {
  var s = "{";
  var k = Object.keys(obj);
  for (var i in k) {
    s += k[i] + ":" + obj[k[i]] + " ";
  }
  return s + "}";
}
var o1 = { a:1 };
var o2 = { b:2 };
var o3 = { c:3 };
var obj;
  obj = Object.assign(o1, o2, o3);
  document.getElementById("d1").textContent=disp(obj);  // { a:1, b:2, c:3 }

  obj = Object.create(null);
  document.getElementById("d2").textContent=disp(obj);  // {}

  obj = Object.create({}, {d : {value:10,enumerable:true}});
  document.getElementById("d3").textContent=disp(obj);  // { d:10 }
</script>

３例目の d は enumerable:true が指定してあります。これが指定されているので、disp 関数の for ... in 命令で列挙されるようになります。

（１－２）プロパティ定義

{
  "プロパティ名":ディスクリプタ[, "プロパティ名":ディスクリプタ, ... , "プロパティ名":ディスクリプタ]
}

{
  value : "値",
  writable : true,
  configurable : false,
  enumerable : false,
  get : function(){},
  set : function(){},
}

記述例

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

<script>
function disp(obj) {
  var s = "{";
  var k = Object.keys(obj);
  for (var i in k) {
    s += k[i] + ":" + obj[k[i]] + " ";
  }
  return s + "}";
}
var obj = {};
Object.defineProperties(obj, {
  "prop1": { value:true, writable:true, enumerable:true },
  "prop2": { value:"Hello", writable:false, enumerable:true }
});
document.getElementById("d1").textContent=disp(obj);  // {prop1:true prop2:Hello }

Object.defineProperties(obj, {
  "prop1": { value:false, writable:true, enumerable:true },
  "prop3": { value: 100, writable:true, enumerable:true }
});
document.getElementById("d2").textContent=disp(obj);  // {prop1:false prop2:Hello prop3:100 }

Object.defineProperty(obj, "prop3", {value:200});
document.getElementById("d3").textContent=disp(obj);  // {prop1:false prop2:Hello prop3:200 }

Object.defineProperty(obj, "prop2", {value:"Good-bye"});
document.getElementById("d4").textContent=disp(obj);  // （例外が発生する）
</script>

最初の例では、prop1 と prop2 を定義しています。

二つ目の例では、prop1 と prop3 を定義していますが、prop1 は既に定義済みで writable:true なので、prop1 が変更になります。

三つ目の例では、prop3 が既に定義済みで writable:true なので、やはり prop3 が変更になります。

最後の例は、prop2 も既に定義済みですが writable:false なので、変更できず例外が発生します。

（１－３）プロパティ取得

記述例

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

<script>
function disp(obj) {
  var s = "{";
  var k = Object.keys(obj);
  for (var i in k) {
    s += k[i] + ":" + obj[k[i]] + " ";
  }
  return s + "}";
}
var obj = {};
var arr = ["a", "b", "c"];
var value;
Object.defineProperties(obj, {
  "prop1": { value:"Hello", writable:true, enumerable:false },
  "prop2": { get:function() { return value; }, set:function(v) { value = v; }, enumerable:true }
});

document.getElementById("d1").textContent=disp(Object.getOwnPropertyDescriptor(obj, "prop1"));

document.getElementById("d2").textContent=disp(Object.getOwnPropertyDescriptor(obj, "prop2"));

document.getElementById("d3").textContent=Object.getOwnPropertyNames(obj);

document.getElementById("d4").textContent=Object.getOwnPropertyNames(arr);

document.getElementById("d5").textContent=Object.keys(obj);
</script>

最初の例では、prop1 のプロパティディスクリプタを表示しています。

二つ目の例では、prop2 のプロパティディスクリプタを表示しています。

三つ目の例では、obj のプロパティ名を表示しています。列挙可能・不可能を問わずすべてのプロパティ名が得られます。

四つ目の例では、配列 arr のプロパティ名を表示しています。配列の要素番号がプロパティ名として表示されています。また、最後に length というプロパティがあることがわかります。

最後の例では、三つ目の例と同じく obj のプロパティ名を表示していますが、列挙可能なプロパティ名しか得られません。

（１－４）変更不可

記述例

<span id="d11"></span><span id="d12"></span><span id="d13"></span><br>
<span id="d21"></span><span id="d22"></span><br>
<span id="d23"></span><span id="d24"></span><br>
<span id="d31"></span><span id="d32"></span><br>
<span id="d33"></span><span id="d34"></span><br>

<script>
var obj = {};
Object.defineProperties(obj, {
  "prop1": { value:"One", writable:true, enumerable:true },
  "prop2": { value:"Two", writable:true, enumerable:true },
  "prop3": { get: function() { return value; }, set: function(v) { value = v; }, enumerable:true }
});
obj.prop1 = "un";
Object.freeze(obj);  // --------------------------------------------------------------------------------
obj.prop2 = "deux";
obj.prop3 = "trois";
document.getElementById("d11").textContent=obj.prop1;
document.getElementById("d12").textContent=obj.prop2;
document.getElementById("d13").textContent=obj.prop3;

var obj2 = {};
Object.defineProperty(obj2, "prop1", { value: "One", configurable: true });
document.getElementById("d21").textContent=obj2.prop1;
Object.preventExtensions(obj2);  // ----------------------------------------------------------------------
obj2.prop1 = "un";
document.getElementById("d23").textContent=obj2.prop1;
try {
  Object.defineProperty(obj2, "prop2", { value: "Two" });
} catch(e) {document.getElementById("d22").textContent=e;}    // prop2 は freeze の後なので変更できない
delete obj2.prop1;  // 削除できる
document.getElementById("d24").textContent=obj2.prop1;  // 削除されたので、値が表示されない（undefined と表示される）

var obj3 = {};
Object.defineProperty(obj3, "prop1", { value: "One", configurable: true });
document.getElementById("d31").textContent=obj3.prop1;
Object.seal(obj3);  // -----------------------------------------------------------------------------------
obj3.prop1 = "un";
document.getElementById("d33").textContent=obj3.prop1;
try {
  Object.defineProperty(obj3, "prop2", { value: "Two");
} catch(e) {document.getElementById("d32").textContent=e;}    // prop2 は seal の後なので追加できない
delete obj3.prop1;  // 削除できない
document.getElementById("d34").textContent=obj3.prop1;  // 削除できなかったので、元の値が表示される
</script>

最初の例では、prop1 は freeze の前なので値を変更できますが、prop2 は freeze の後なので変更できません。ただし、prop3 のように set では変更できます。

二つ目の例では、prop1 は preventExtensions の前なので追加できますが、prop2 は preventExtensions の後なので追加できません。ただし、値の変更やプロパティの削除はできます。

最後の例では、prop1 は seal の前なので追加できますが、prop2 は seal の後なので追加できません。また、prop1 の削除もできません。ただし、値の変更はできます。

（１－５）プロトタイプ

記述例

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

<script>
function disp(obj) {
  var s = "{";
  var k = Object.keys(obj);
  for (var i in k) {
    s += k[i] + ":" + obj[k[i]] + " ";
  }
  return s + "}";
}

var proto1 = {
  "One": "unv",
  "Two": "deux"
};
var proto2 = {
  "One": "eins",
  "Two": "zwei"
};

var obj = Object.create(proto1);
var x = Object.getPrototypeOf(obj);  // ------------------------------------------------
document.getElementById("d1").textContent=disp(x);

Object.setPrototypeOf(obj, proto2);  // ------------------------------------------------
var x = Object.getPrototypeOf(obj);
document.getElementById("d2").textContent=disp(x);
</script>

最初の例は、proto1 をプロトタイプとして obj を生成しています。

二つ目の例は、obj のプロトタイプを proto2 に変更しています。

（１－６）検査

記述例

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

<script>
var obj1 = {
  "One": "unv",
  "Two": "deux"
};
var obj2 = {
  "One": "unv",
  "Two": "deux"
};

try {
  document.getElementById("d11").textContent=Object.is(obj1, obj2);
  document.getElementById("d12").textContent=Object.is(obj1, obj1);
} catch(e) {document.getElementById("d11").textContent=e;}

try {
  Object.preventExtensions(obj2);  // ------------------------------------------------
  document.getElementById("d21").textContent=Object.isExtensible(obj1);
  document.getElementById("d22").textContent=Object.isExtensible(obj2);
} catch(e) {document.getElementById("d21").textContent=e;}

try {
  Object.freeze(obj2);  // ------------------------------------------------
  document.getElementById("d31").textContent=Object.isFrozen(obj1);
  document.getElementById("d32").textContent=Object.isFrozen(obj2);
} catch(e) {document.getElementById("d31").textContent=e;}

try {
  Object.seal(obj2);  // ------------------------------------------------
  document.getElementById("d41").textContent=Object.isSealed(obj1);
  document.getElementById("d42").textContent=Object.isSealed(obj2);
} catchh(e) {document.getElementById("d41").textContent=e;}
</script>

最初の例では、同じ内容でもインスタンスが異なれば false になることを示しています。

二つ目以降の例では、preventExtensions、freeze や seal を実行していないインスタンスと実行したインスタンスを検査しています。

（１） インスタンス生成

記述例

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

<script>
let objA = new Object();
document.getElementById("d1").textContent=objA;             // [object Object]
let objB = new Object(1);
document.getElementById("d2").textContent=objB;             // 1
</script>

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

（２－１）検査

記述例

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

<script>
var obj1 = {
  "One": {value:"unv", enumerable:true },
  "Two": {value:"deux", enumerable:false }
};
document.getElementById("d11").textContent=obj1.hasOwnProperty("One");             // true
document.getElementById("d12").textContent=obj1.hasOwnProperty("Three");           // false

document.getElementById("d21").textContent=obj1.propertyIsEnumerable("One");       // true
document.getElementById("d22").textContent=obj1.propertyIsEnumerable("Two");       // false
document.getElementById("d23").textContent=obj1.propertyIsEnumerable("Three");     // false
</script>

最初の例は、obj1 には One はありますが Three はありません。

二つ目の例では、enumerable は One では true ですが Two では false です。

（２－２）文字列変換

記述例

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

<script>
var obj = {date:new Date(2023,6,17), event:"海の日"};
document.getElementById("d11").textContent=obj.toLocaleString();     // [object Object]
document.getElementById("d21").textContent=obj.toString();           // [object Object]

Object.prototype.toLocaleString = function() {
  return "{" + this.date.toLocaleDateString() + "," + this.event + "}";
}
Object.prototype.toString = function() {
  return "{" + this.date + "," + this.event + "}";
}

document.getElementById("d12").textContent=obj.toLocaleString(); // {2023年7月17日,海の日}
document.getElementById("d22").textContent=obj.toString();       // {Mon Jul 17 2023 00:00:00 GMT+0900 (日本標準時),海の日}
</script>

どちらの例も、最初は デフォルトの toString 関数などが返す [object Object] が表示されます。

デフォルトの toString に変わる関数を定義した後は、インスタンスの内容を表示しています。

（２－３）変換

記述例

<span id="d11"></span><span id="d12"></span><br>

<script>
var obj = {date:new Date(2023,6,17), event:"海の日"};
document.getElementById("d11").textContent=obj.valueOf();     // [object Object]

Object.prototype.valueOf = function() {
  return this.date.getTime();
}

document.getElementById("d12").textContent=obj.valueOf();     // 1689519600000
</script>

最初は デフォルトの valueOf 関数などが返す [object Object] が表示されます。

デフォルトの valueOf に変わる関数を定義した後は、インスタンスのプリミティブな値（この例では経過ミリ秒）を表示しています。

（１） インスタンス生成

記述例

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

<script>
document.getElementById("d1").textContent=new Boolean();
document.getElementById("d2").textContent=new Boolean(0);
document.getElementById("d3").textContent=new Boolean(-0);
document.getElementById("d4").textContent=new Boolean(null);
document.getElementById("d5").textContent=new Boolean(false);
document.getElementById("d6").textContent=new Boolean(NaN);
document.getElementById("d7").textContent=new Boolean(undefined);
document.getElementById("d8").textContent=new Boolean("");
document.getElementById("d11").textContent=new Boolean(1);
document.getElementById("d12").textContent=new Boolean(true);
document.getElementById("d13").textContent=new Boolean("false");
</script>

Internet Explorer ではすべてが true となります。

ただし、次の実行例のように表示は正しくないですが、値は正しく設定されているようです。

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

<script>
let f = new Boolean(false);
document.getElementById("d1").textContent=f;
document.getElementById("d2").textContent=(f == false ? "FALSE" : "TRUE");
let t = new Boolean(true);
document.getElementById("d11").textContent=t;
document.getElementById("d12").textContent=(t == true ? "TRUE" : "FALSE");
</script>

２つ目と４つ目は分かりにくいですが、ともに条件が成り立った時に選択される文字列が表示されています。

例えば２つ目は、表示が FALSE ならば、new Boolean(false) の戻り値が false であったということです。

（１）インスタンス生成

エラーインスタンスを生成します。

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

記述例

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

<script>
try {
  throw new Error("エラー", "xxxx.htm", 10);
}
catch(e) {
  document.getElementById("d1").textContent=e.message;
  document.getElementById("d2").textContent=e.name;
}
</script>

message と name を表示しています。

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

記述例

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


<script>
try {
  xxx();      // 未定義
}
catch(e) {
  document.getElementById("d2").textContent=e.toString();
}
</script>

xxx() が宣言されていませんので、例外が発生します。

（１）インスタンス生成

新規の Function インスタンスを生成します。

以下の３つの関数（add1、add2、add3）はすべて Function インスタンスです。

記述例

<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>
  var add1 = new Function("a", "b", "return a + b;");
  var add2 = function(a, b) {
    return a + b;
  }
  function add3(a, b) {
    return a + b;
  }
  document.getElementById("d11").textContent=add1(1, 2);
  document.getElementById("d12").textContent=add1 instanceof Function;
  document.getElementById("d21").textContent=add2(1, 2);
  document.getElementById("d22").textContent=add2 instanceof Function;
  document.getElementById("d31").textContent=add3(1, 2);
  document.getElementById("d32").textContent=add3 instanceof Function;
</script>

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

記述例

<span id="d11"></span>　<span id="d12"></span><br>
<span id="d21"></span><br>
<span id="d31"></span>　<span id="d32"></span>　<span id="d33"></span><br>
<script>
  var f1 = function func() {
    return func.caller == null ? "null" : func.caller;
  }
  var f2 = function() {
    return f1();
  }
  var f3 = new Function("a", "b", "return a + b;");

  document.getElementById("d11").textContent=f1();
  document.getElementById("d12").textContent=f2();
  document.getElementById("d21").textContent=f3.length;
  document.getElementById("d31").textContent=f1.name;
  document.getElementById("d32").textContent=f2.name;
  document.getElementById("d33").textContent=f3.name;
</script>

caller の値は、トップレベルから呼び出された場合は null に、関数から呼び出された場合はその関数のコードになります。

name の値は、Function で定義した場合は anonymous、function の後ろに名前が記述されている場合はその名前に、記述されていなければ代入された変数名になります。

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

this 参照値がインスタンスではなく null や undefined のときはグローバルオブジェクトである Window インスタンスに置き換わります。なお、this 参照値については、「７．５　this」 を参照してください。

記述例

<span id="d1"></span><br>
<span id="d2"></span><br>
<span id="d3"></span><br>
<script>
  var add = new Function("var sum = 0;for (var i = 0 ; i < arguments.length ; i++) sum += arguments[i]; return sum;");
  document.getElementById("d1").textContent=add.apply(null,[1,2,3]);
  var f = add.bind(null,1,2,3);   // 1,2,3 を引数とする関数を生成
  document.getElementById("d2").textContent=f(4,5);   // add.call(null,1,2,3,4,5) と同じ
  document.getElementById("d3").textContent=add.call(null,1,2,3);
</script>

（１）静的メソッド

URL.createObjectURL() メソッドは、引数で指定されたオブジェクトを表す URL を含む文字列を生成します。URL の寿命は、それを作成したドキュメントが表示されている間です。

記述例

<span id="d1"></span><br>
<script>
var blob = new Blob([JSON.stringify({hello: "world"}, null, 2)], {type : "application/json"});
d1.textContent = URL.createObjectURL(blob);
var file = new File(["foo"], "sample.txt", {type: "text/plain"});
d2.textContent = URL.createObjectURL(file);
var mediaSource = new MediaSource();
d3.textContent = URL.createObjectURL(mediaSource);
</script>

９．１４．２　　URL インスタンス

URL オブジェクトの持つメソッドについて説明します。

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

<script>
var url = new URL("http://foo.co.jp/aaa/111.htm");
d01.textContent = url.href;
url = new URL("/aaa/222.htm", "http://foo.co.jp/xxx/yyy/111.htm");
d02.textContent = url.href;
url = new URL("../bbb/222.htm", "http://foo.co.jp/aaa/yyy/zzz/111.htm");
d03.textContent = url.href;
url = new URL("ccc/222.htm", "http://foo.co.jp/aaa/bbb/111.htm");
d04.textContent = url.href;
url = new URL("../../../bbb/222.htm", "http://foo.co.jp/aaa/xxx/111.htm");
d05.textContent = url.href;

try {
  url = new URL("/bbb/222.htm");
  d11.textContent = url.href;
}
catch(err) {
  d11.textContent = err;
}
try {
  url = new URL("bbb/222.htm", "foo/111.htm");
  d12.textContent = url.href;
}
catch(err) {
  d12.textContent = err;
}
</script>

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

記述例

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

<script>
var url = new URL("http://foo.co.jp:8080/aaa/111.htm?on&parm=10#entry");
d01.textContent = url.origin;
d02.textContent = url.searchParams;
d03.textContent = url.href;
d04.textContent = url.protocol;
d05.textContent = url.host;
d06.textContent = url.hostname;
d07.textContent = url.port;
d08.textContent = url.pathname;
d09.textContent = url.search;
d10.textContent = url.hash;
</script>

（１）静的プロパティ

現在の許可を表す文字列です。

現在の許可状況を表示します。許可の状況が変更になったときの値は次の requestPermission() メソッドの例を参照してください。

記述例

<span id="d1"></span><br>

<script>
d1.textContent = Notification.permission;
</script>

（２）静的メソッド

Notification.requestPermission() メソッドは、通知を表示できるようにユーザに許可を要求します。

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

次の例は通知の許可・不許可をユーザに問い合わせます。ユーザは「許可」、「ブロック」を選択できます。ただし、一度決定してしまうとダイアログは表示されなくなります。再度ダイアログを表示するには、「確認（デフォルト）」に戻す必要があります。

記述例

<button class="button" onclick="request();">通知の許可</button>
<span id="d1"></span><br>
<button class="button" onclick="permission();">現在の許可</button>
<span id="d2"></span><br>

<script>
function request() { Notification.requestPermission(function(permission) { d1.textContent = permission; }); }
function permission() { d2.textContent = Notification.permission; }); }
</script>

（１）インスタンス生成

新規の Notification インスタンスを生成し、通知を表示します。

画面の右下に通知が表示されます。そして、一定時間が過ぎると消えます。表示時間はブラウザによって異なります。

ただし、Windows10 の場合、すでに通知がアクションセンターにある場合には表示されないことがあります。そのときは「すべての通知をクリア」などをクリックして、通知を消してください。

では image は表示されないようです。

また、 では icon の大きさにも制限があるようですし、すべてで badge は表示されないようです。

記述例

<button class="button" onclick="notify();">通知</button>　　　<br>

<script>
var n;
Notification.requestPermission();
function notify() {
  n = new Notification(
    "くま",
    {
      dir: 'ltr',
      lang: 'jp',
      badge: 'images/JSs.png',
      body: 'クマ科に属する哺乳類の総称である。体はよく肥え、がんじょうで、毛はあらい。',
      tag: 'tag',
      icon: 'figures/book.png',
      image: 'figures/bear.png',
      data: {
        xxx: '任意のデータ'
      },
      silent: true,
    }
  );
}
</script>

ブラウザによる違い　（Windows10）

	「アクションセンター」ではなく、画面右下にポップアップする。 表示時間：２５秒くらい

タグが付加されていない場合や異なる名前のタグが付いている場合は別の通知と見なされ表示を待つ列に加えられます。そして、前の通知の表示が消えると次の通知が表示されることになります。ただし、ＯＳやブラウザによって表示のされ方は異なります。

また、同じ名前のタグが付いている場合はその通知がすでに表示されている場合は、前の通知を閉じて新しい通知を表示します。

次の例のボタンをそれぞれ何回かクリックしてみてください。

記述例

<button class="button" onclick="notify(1);">異なる tag 通知</button>　<button class="button" onclick="notify(0);">同じ tag 通知</button><br>

<script>
var n;
Notification.requestPermission();
var titleNo = 0;
var tagNo = 0;
function notify(inc) {
  n = new Notification(
    "くま" + titleNo,
    {
      body: 'クマ科に属する哺乳類の総称である。',
      tag: 'tag' + tagNo,
      icon: 'figures/bear.png',
      silent: true,
    }
  );
  titleNo++;
  tagNo += inc;
}
</script>

異なる tag 通知のときの表示のされ方（Windows10 のとき）

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

記述例

<button class="button" onclick="notify();">通知</button>　　　<br>

<span id="d01"></span><br>

<!-- 以下略 -->


<script>
var n;
Notification.requestPermission();
function notify() {
  n = new Notification(
    "くま",
    {
      dir: 'ltr',
      lang: 'jp',
      badge: 'images/JSs.png',
      body: 'クマ科に属する哺乳類の総称である。体はよく肥え、がんじょうで、毛はあらい。',
      tag: 'tag',
      icon: 'figures/book.png',
      image: 'figures/bear.png',
      data: {
        xxx: '任意のデータ'
      },
      silent: true,
    }
  );

  d01.textContent = n.title;
  d02.textContent = n.dir;
  d03.textContent = n.lang;
  d04.textContent = n.badge;
  d05.textContent = n.body;
  d06.textContent = n.tag;
  d07.textContent = n.icon;
  d08.textContent = n.image;
  d09.textContent = n.data.xxx;
  d10.textContent = n.silent;
  d11.textContent = new Date(n.timestamp).toLocaleString();
}
</script>

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

[通知]ボタンを何回かクリックした後、[閉じる]ボタンをクリックしてください。下の例では、先に表示された通知から閉じます。

記述例

<button class="button" onclick="notify();">通知</button><br>
<button id="c" class="button" onclick="notificationClose();" style="disabled:true;">閉じる</button>

<script>
var nstack = [];
Notification.requestPermission();
var no = 0;
function notify() {
  var n = new Notification(
    "くま" + no++,
    {
      body: 'クマ科に属する哺乳類の総称である。',
      icon: 'figures/bear.png',
      silent: true
    }
  );
  nstack.push(n);
  c.disabled = false;
}

function notificationClose() {
  var n = nstack.shift();
  n.close();
  if (nstack.length <= 0) {
    c.disabled = true;
  }
}
</script>