11. コレクション

コレクション とは、値のまとまりで管理するオブジェクトの事です。
JavaScriptで使えるコレクションは、ES5まではObjectとArrayのみでしたが、
ES6からMap,Set,WeakMap,WeakSetが使えるようになった。

11.1 配列(Array)

配列の場合は、値のみを格納 する。格納された値はそれぞれ、値に対応した
添え字(インデックス) が0から順に振られる。

11.1.1 配列の初期化

配列は、リテラル表記または、Arrayを使って初期化できる。

◆配列の初期化(リテラル表記)

配列リテラル([])を記述することで、配列を初期化できる。

[構文] リテラルを使った配列の初期化

const 配列 = [値1, 値2, 値3, ....];

(※) []は、配列のリテラルを定義するための記号です。省略可能を表す[]ではないので注意。

リテラルで配列を初期化する例

const fruits = ["banana", "orange", "grape"];
console.log(fruits);

◆配列の初期化(new Array)

new Arrayを記述して配列を初期化する。

[構文] Arrayを使用した配列の初期化
・引数が1つの場合：
const 配列 = new Array(配列の長さ);

・引数が2つ以上の場合：
const 配列 = new Array(値1, 値2,....);

new Arrayで配列を初期化する例

const emptyArray = new Array(3);
console.log(emptyArray);

const filledArray = new Array(1, 2, 3);
console.log(filledArray);

11.1.2 配列の基本操作

初期化した配列の操作方法について、生成した配列の特定の値を取得・変更したい場合は、添字を使う。

配列の要素の取得・変更の例

const fruits = ["banana", "orange", "grape"];
console.log(fruits[0]);
> banana

fruits[1] = "apple";
console.log(fruits);
> ["banana", "apple", "grape"];

配列の要素は、0番目から始める点に注意してください。
また、配列の長さ(個数)は、lengthプロパティから取得できる。

11.1.3 配列のメソッド

配列には、様々なメソッドが用意されている。メソッドを使うことで、宣言した後ででも、値の取得・変更・削除などを行うことができる。

◆ 配列に要素を追加

push - 末尾に追加
pushメソッドは、配列の末尾に要素を追加します。

[構文] pushの記法
配列.push(追加したい要素1,[追加したい要素2,....])

const fruits = ["banana", "orange", "grape"];
fruits.push("apple");
consol.log(fruits);
> ["banana", "orange", "grape", "apple"]

unshit - 先頭に追加
unshitメソッドは、配列の先頭に要素を追加する

[構文] unshiftの記法
配列.unshift(追加したい要素1,[追加したい要素2,....])

const fruits = ["banana", "orange", "grape"];

fruits.unshift("lemon");
console.log(fruits);

> ["lemon", "banana", "orange", "grape"];

◆ 配列から要素を削除

配列から要素を削除するときに使うメソッドです。

shift - 先頭を削除 shiftメソッドは、配列の先頭の要素を削除する

[構文] shiftの記法
let 削除した要素 = 配列.shift();

(使用例)
const fruits = ["banana", "orange", "grape"];
let returnVal = fruits.shift();
console.log(fruits);
> ["orange", "banana"]
console.log(returnVal);
> "banana"

pop - 末尾を削除 popメソッドは、配列の末尾の要素を削除します。

[構文]popの記法
let 削除した要素 = 配列.pop();

(使用例)
const fruits = ["banana", "orange", "grape"];
let returnVal = fruits.pop();
> ["banana", "orange"]

console.log(returnVal);
> "grape"

splice - 要素の切り取り spliceメソッドは、開始位置から特定の長さ分の要素を切り取りする。

[構文] spliceの記法
let 切り取られた配列 = 元の配列.splice(開始位置, 長さ[,要素追加1,要素追加2,....]);

(要素の切り取りの例)
const fruits = ["banana", "orange", "grape"];
let deletedVal = fruits.splice(1, 2);
console.log(fruits)
> ["banana"]

console.log(deletedVal);
> ["orange", "grape"]

(要素の切り取った箇所に要素を追加)
const fruits = ["banana", "orange", "grape"];
fruits.splice(1, 1, "apple", "lemon");

◆配列の結合・複製

配列の結合や複製(コピー)を行う場合には、concatメソッドを使う。また、特定の要素を複製したい場合にはsliceメソッド使う。

concat - 配列の結合以下のように、concatメソッドを使うと、別の配列を結合した新しい配列を作成する

[構文]concatの記法(配列の結合)
let 結合された配列 = 配列1.concat(配列2);

(使用例)
const fruits = ["banana", "orange", "grape"];
const newFruits = fruits.concat(["melon", "mango"]);
console.log(newFruits);
> ["banana", "orange", "grape", "melon", "mango"]

console.log(frutis);
> ["banana", "orange", "grape"]

[構文]concatの記法(配列の複製)
let 配列を複製した配列 = 配列.concat();

const fruits = ["banana", "orange", "grape"];
const newFruits = fruits.concat();
consle.log(newFruits);

> ["banana", "orange", "grape"]

slice - 特定の要素を抽出した新しい配列を作成 sliceメソッドは、開始位置から終了位置の直前の要素までを抽出した新しい配列を返す。
spliceと違い、元の配列に対しては影響を及ぼしません。

[構文]sliceの記法
let 切り取られた配列 = 元の配列.slice([開始位置,終了位置]);
const fruits = ["banana", "orange", "grape"];
const newFruits = fruits.slice(1, 2);
console.log(newFruits);
> ["orange"]

console.log(fruits);
> ["banana", "orange", "grape"]

const toEndFruits = frutis.slice(1);
console.log(toEndFruits);
> ["orange", "grape"]

const allFruits = fruits.slice();
console.log(allFruits);
> ["banana", "orange", "grape"]

◆ 配列内の要素の存在チェック

indexOf - 最初に一致した添え字を返す。
indexOf メソッドは、配列内で最初に一致した要素の添え字を返す。

[構文] indexOfの記法
let 一致した添え字 = 配列.indexOf(存在確認したい値);

const fruits = ["banana", "orange", "grape"];
const found = fruits.indexOf("grape");
console.log(found);
> 2

const notFound = fruits.indexOf("watermelon");
console.log(notFound);
> -1

includes - 値が存在するか確認
includes メソッドは、配列内の要素に値が存在するかを確認する。

[構文] includesの記法
let 真偽値 = 配列.includes(存在確認したい値);

const fruits = ["banana", "orange", "grape"];
const found = fruits.includes("grape");
console.log(found);
> true

const notFound = fruits.includes("lemon");
> false

◆その他のメソッド

join - 要素を結合した文字列を作成
join メソッドは、配列の要素を結合して文字列を作成する。

[構文] joinの記法
let 結合された文字列 = 配列.join([区切り文字]);

区切り文字: 要素を結合する際の区切り文字を設定する。省略したときはカンマ(,)で結合される。

(使用例)
const arry = ["Hello", "World"];
console.log(array.join(" "));
> Hello World

fill - 要素を特定の値で埋める
fill メソッドは、配列の開始位置、終了位置で範囲指定した添え字の要素に対して、
特定の値を設定する。開始位置、終了位置を省略した場合、すべての要素を指定した値で上書きする。

[構文] fillの記法
配列.fill(各要素に設定したい値[,開始位置,終了位置]);

(使用例)
const arry = new Array(100);
arry.fill(0);
console.log(arry);
> [0,0,0,0,...]

falt - 多次元配列の平坦化(次元を減らす) flat メソッドは、多次元配列を引数(平坦化レベル)で指定した次元分、配列の構造を平坦化する。
引数を指定しないと場合には、1次元分、平坦化する。多次元配列とは、配列構造が多階層で形成されている配列のことです。
配列の次元を調整するときに使う。

[構文] flatの記法
let 平坦化された配列 = 多次元配列.flat([平坦化レベル])

(使用例)
const arry3D = [
    1, [2], 3,
    [4, [5]]
];

const arry2D = arry3D.flat();
console.log(array2D);
> [1, 2, 3, 4, [5]]

const arry1D = arry3D.flat(2);
console.log(arry1D);
> [1, 2, 3, 4, 5]

reverse - 要素の順番を逆に置換
reverse メソッドは、配列の要素の並びを逆にする

[構文] reverseの記法
配列.reverse();

(使用例)
const arry = [1,2,3,4,5]
arry.reverse();
console.log(arry);

> [5, 4, 3, 2, 1]

11.1.4 コールバック関数を引数に取るメソッド

配列が保持するメソッドには、コールバック関数を引数に取るものがある。
コールバック関数を引数に取るメソッドは、配列の要素に対する繰り返し処理の記述の簡略化や処理の内容を明確する目的で使われる。

◆ forEach - 配列の各要素を使って繰り返し処理を行う

forEachメソッドを使うことで、配列の要素に対する繰り返し処理をコールバック関数を利用して記述できる。

[構文] forEachの記法
配列.forEach(function(value, index, arry) {
    /* 配列の各要素を使った処理 */
}[,_this]);

value: 配列の値が1つずつ渡されてくる。
index: 配列の添え字が1つずつ渡されてくる。
arry: 配列自体が渡される。
_this: コールバック関数内のthisの参照先を設定する。

(使用例)
const arry = [1, 2, 3, 4, 5];
arry.forEach(function(value, index, arry) {
    console.log(value, index, arry);
});
> 1 0 [1, 2, 3, 4, 5]
> 2 1 [1, 2, 3, 4, 5]
> 3 2 [1, 2, 3, 4, 5]
> 4 3 [1, 2, 3, 4, 5]
> 5 4 [1, 2, 3, 4, 5]

(使用例 アロー関数)
const arry = [1, 2, 3, 4, 5];
arry.forEach((value, index, arry) => console.log(value, index, arry));
> 1 0 [1, 2, 3, 4, 5]
> 2 1 [1, 2, 3, 4, 5]
> 3 2 [1, 2, 3, 4, 5]
> 4 3 [1, 2, 3, 4, 5]
> 5 4 [1, 2, 3, 4, 5]

(使用例 名前付き関数)
const arry = [1, 2, 3, 4, 5];
function multiply5(value) {
    console.log(value * 5);
}
arry.forEarch(multiply5);
> 5
> 10
> 15
> 20
> 25

◆ map - 新しい配列の作成

map メソッドは、コールバック関数の戻り値を要素に取る新しい配列を返す。

[構文] mapの記法
let 新しい配列 = 配列.map((value, index, arry) => {
    return 新しい配列に追加したい値;
}, [,this]);

mapメソッドの使い方は、forEachメソッドと同じであるが、mapは戻り値として新しい配列を返す点がことなる。

(使用例) 元の配列の数値に5を掛けた値を保持する配列を作成
const arry = [1, 2, 3, 4, 5];
function multiply5(value) {
    return value * 5;
}

const newArry = arry.map(multiply5);
// const newArry = arry.map(value => value * 5); と同じ意味
console.log(newArry);
> [5, 10, 15, 20, 25]

◆ filter - 特定の値を除いた新しい配列の作成

filterメソッドは、コールバック関数の条件がtrueになったときの配列の要素のみを保持する新しい配列を作成する。

[構文] filterの記法
let 新しい配列 = 配列.filter((value, index, arry) => {
    return 真偽値; // trueのとき、valueが新しい配列に追加される
},[_this]);

(使用例)
const arry = [1, 2, 3, 4, 5];
function gt3(value) {
    return value > 3;
}

const newArry = arry.filter(gt3);
console.log(newArry);

> [4, 5]

◆ every - すべての要素の値が条件に一致するか

everyメソッドは、すべての要素がコールバック関数で実装された条件でtrueとなるかどうかをテストする。
すべての条件が一致した場合に結果がtrueとなり、それ以外はfalseになる。

[構文]everyの記法
let 結果 = 配列.every((value, index, arry) => {
    return 真偽値;
},[_this]);

(使用例)
const arry = [1, 2, 3, 4, 5];

const result = arry.every(value => value > 0);
console.log(result);
> true

const result2 = arry.every(value => value > 3);
console.log(result2);
> false

◆ some - すくなくとも1つの値が条件に一致するか

someメソッドは、少なくとも1つの値がコールバック関数で実装された条件でtrueとなるかどうかをテストする。
1つも条件に一致しない場合には結果がfalseになり、それ以外はtrueになる。

[構文] someの記法
let 結果 = 配列.some((value, index, arry) => {
    return 真偽値;
}[,_this]);

(使用例)
const arry = [1, 2, 3, 4, 5];
const result1 = arry.some(value => value > 4);
console.log(result1);
> true

◆ find - 条件を満たした最初の要素の値を取得

findメソッドは、コールバック関数の条件を満たした最初の値を返す。

[構文] findの記法
let 条件を満たす最初の値 = 配列.find((value, index, arry) => {
    return 真偽値;
},[_this]);

(使用例)
const arry = [1, 2, 7, 8, 9];
const result = arry.find(value => value > 2);
console.log(result);
> 7

◆ sort - 配列の並び替え

sort メソッドは、要素の並べ替えることができる。

[構文] sortの記法
・文字列として昇順で要素を並べ替え
配列.sort();

・比較関数を使って要素を並べ替え
配列.sort(比較関数);

(使用例-昇順にする場合)
const strArry = ["b", "c", "a"];
strArry.sort();
console.log(strArry);
> ["a", "b", "c"]

(使用例-比較関数を使った並べ替え)
function compare(val1, val2) {
    if (val1 < val2) {
        return -1; // 戻り値が0より小さい場合、val1をval2の前に配置
    }
    if (val1 > val2) {
        return 1; // 戻り値が0より大きい場合、val2をval1の前に配置
    }
    return 0; // 戻り値が0の場合、val1, val2の順番をそのまま維持
}

const arry = [10, 2, 7, 3, 9];
arry.sort(compare);
console.log(arry);
> [2, 3, 7, 9, 10]

比較関数の戻り値と並び順

戻り値	並び順
負の時	val1 val2
正の時	val2 val1
0の時	並び順は変更なし

◆ reduce - 配列から単一の出力値を生成

reduceメソッドは、配列のループして各要素の値から単一の出力値を生成します。

[構文] reduceの記法
let result = 配列.reduce((totalValue, currentValue, index, arry) => {
    return nextTotalValue;
},[,initValue])

totalValue: 前のループの戻り値(nextTotalValue)が渡される。初回ループのときにはinitValueの値(initValueが設定されていた場合)、または配列の
1つめ目の要素が渡される。
currentValue: 配列の要素が1つずつ渡されてくる。初回ループのときは配列の1つ目の要素の値(initValueが設定されていた場合)、または配列の2つ目の要素の値が渡される。
index: 配列の添え字が1つずつ渡される。
arry: 配列自体が渡される。
nextTotalValue: 次のループのtotalValueに設定したい値を設定する。また、最後のループの戻り値がreduceメソッドの結果(result)となる。
result: 最後のループの値となる。
initValue: 設定された場合、1ループ目のtotalValueに渡される。


(使用例)
function reducer(totalValue, currentValue) {
    return totalValue + currentValue;
}

const arry = [1, 2, 3, 4, 5];
const result = arry.reduce(reducer);
console.log(result);
> 15;

11.1.5 静的メソッド

Arrayコンストラクタにも、静的メソッドがあらかじめ用意されている。

◆ from - 配列風オブジェクトや反復可能オブジェクトを配列に変換

from メソッドを使用すると、Setなどの反復オブジェクトやargumentsなどの配列風(array-like)オブジェクトから配列を作成できる。

・Setから配列を作成
const set = new Set();
set.add(1);
set.add(2);
set.add(3);

const convertedArray = Array.from(set);
console.log(convertedArray);
> [1, 2, 3]

◆ isArray - 配列かどうか判定

配列かどうかを調べるには、isArray メソッドを使う。

const set = new Set();
console.log(Array.isArray(set));
> false

const converedArray = Array.from(set);
console.log(Array.isArray(converedArray));
> true

11.1.6 分割代入

分割代入　とは 配列やオブジェクトの要素を直接、変数として取り出して使用する記法です。

◆ 配列の分割代入

配列の分割代入では、右オペランドの配列の要素が左オペランドの変数(変数A,変数B)にそれぞれ、代入される。
左辺の変数は、通常の変数宣言を行った変数と同じように使うことができる。

[構文] 分割代入の記法(配列)
let [変数A, 変数B = 初期値B] = 配列;

(使用例)
let arry = [1, 2, 3];
let [x,y,z] = arry;
console.log(x, y, z);
> 1 2 3

let [x1, z1] = arry;
console.log(x1, z1);
> 1, 3

let x2;
[x2] = arry;
console.log(x2);
> 1

let [,,,a3 = 4] = arry;
console.log(a3);
> 4

let [x4, ...rest] = arry;
console.log(x4, rest);
> 1 [2, 3]

◆ オブジェクトの分割代入

オブジェクトの分割代入ではプロパティ名と変数名を一致させる 必要がある。

[構文] 分割代入の記法(オブジェクト)
let {プロパティ名A, プロパティ名B = 初期値B} = オブジェクト;

(例)
let {banana, orange, apple} = { apple: "リンゴ", banana: "バナナ", orange: "オレンジ"};
console.log(banana);
> バナナ

let {banana: b, apple: a} = {apple: "リンゴ", banana: "バナナ"};
console.log(b, a);
> バナナ リンゴ

let {banana: b2="おいしいバナナ"} = {apple: "リンゴ"};
console.log(b2);
> おいしいバナナ

let {banana: b3, ...fruits} = {apple: "リンゴ", banana: "バナナ", orange: "オレンジ"};
console.log(fruits);
> {apple: "リンゴ", orange: "オレンジ"}

let { fruits: {apple: a3}} = { fruits: {apple: "リンゴ", banana: "バナナ"}};
console.log(a3);
> リンゴ

let prop = "apple";
let {[prop]: a4} = {apple: "リンゴ", banana: "バナナ", orange: "オレンジ"};
console.log(a4);
> リンゴ

◆ 関数の引数に対する分割代入

分割代入は、関数の引数を受け取るときにも使用可能。関数の引数に分割代入を使うと、渡されたオブジェクトや配列から特定の要素を抽出し、引数に渡すことができる。

const fruitsArry = ["banana", "orange", "grape"];
const fruitsObj = {banana: "バナナ", orange: "オレンジ"};

function bunkatuArry([,,fruit3]) { // 三つ目の要素のみ関数内で使用する
    console.log(fruit3);
}

bunkatuArry(fruitsArry);
> grape

function bunkatuObj({orange}) { // orangeのみ引数として抽出
    console.log(orange);
}

bunkatuObj(fruitsObj);
> オレンジ

11.2 Set

ES6で追加されたSetは、一意の値を格納するコレクション。Setには、重複した値を保持することができない。

11.2.1 Setの初期化

Setは次のように初期化できる。

[構文] Setの初期化
・空のSetオブジェクトを作成する場合
const Setオブジェクト = new Set();

・反復可能オブジェクトからSetオブジェクトを作成する場合
const Setオブジェクト = new Set(反復可能オブジェクト);

(例) 配列からSetオブジェクトを作成
const convertedSet = new Set([1, 2, 3]);
console.log(convertedSet);
> Set {1, 2, 3}

11.2.2 Setのメソッド

Setには次のようなメソッドがある。

◆ add - 値の追加

add メソッドを使うと、Setオブジェクトに対して、値を追加することができる。
プリミティブ値、オブジェクトに関わらず、どのような値でも追加可能。

const fruits = new Set();
fruits.add("apple");
fruits.add("orange");
fruits.add("orange"); // 重複した値を追加
console.log(fruits);
> Set {"apple", "orange"}

◆ delete - コレクション内の値を削除

delete メソッドを使用すると、Setオブジェクト内から値を削除できる

const fruits = new Set(["apple", "orange"]);
fruits.delete("orange");
console.log(fruits);
> Set {"apple"}

◆ clear - コレクション内の値をすべて削除

clear メソッドは、Setオブジェクトが保持する値をすべて削除する。

const fruits = new Set(["apple", "orange"]);
fruits.clear();
console.log(fruits);
> Set { }

◆ has - コレクション内に値が存在するか確認

has メソッドは、Setオブジェクト内に一致する値が存在するかを確認する。

const fruits = new Set(["apple", "orange"]);
console.log(fruits.has("orange"));
> true
console.log(fruits.has("banana"));
> false

11.2.3 コールバック関数を引数に取るメソッド

コールバック関数を引数に取るSetのメソッドは、forEachです。

◆ forEach - コレクションの要素をループ処理

SetオブジェクトのforEach メソッドは、配列のforEachメソッドと同様にコールバック関数を使って、
ループ処理を行う。

[構文] forEachの記法
Set オブジェクト.forEach(function(value, sameValue, set) {
    /* Setの各要素を使った処理 */
}, [_this])

value: Setの値が1つずつ渡される。
sameValue: valueと同じ値が渡される。
set: Setオブジェクト自体が渡される。
_this: コールバック関数内のthisの参照先を設定する。

Setの場合、コールバック関数の第一引数valueと第二引数sameValueは、それぞれ同じ値が渡される。

const set = new Set(["値1", "値2"]);
set.forEach((value, sameValue, set) => {
    console.log(`value: [${value}],sameValue: [${sameValue}],set: `, set);
});
> value: [値1],sameValue: [値1],set:  Set(2) {'値1', '値2'}
> value: [値2],sameValue: [値2],set:  Set(2) {'値1', '値2'}

11.2.4 Setのプロパティ

◆ size - コレクションの長さを取得

配列の場合はlengthプロパティから配列の長さ(要素数)を取得しましたが、Setの場合はsizeプロパティに長さが格納されています。

const fruits = new Set(["apple", "orange"]);
console.log(fruits.size);
> 2

11.3 Map

ES6で追加されたMapは、キーと値を対で保持するコレクションです。
ES5までは、オブジェクト{}を使って、キーと値を対で管理していた。ES6以降ではMapを使うことで管理できる。

11.3.1 Mapの初期化

Mapは次のように初期化できる。

const emptyMap = new Map();
console.log(emptyMap);
> Map { }

const convertedMap = new Map([
    ["キー1", "値1"],
    ["キー2", "値2"]
]);
console.log(convertedMap);
> Map { "キー1": "値1", "キー2": "値2" }

11.3.2 Mapのメソッド

Mapには次のようなメソッドがある。

◆ set - 値の設定

setメソッドを使うと、Mapオブジェクトに対して値を追加できる。
Mapオブジェクトのキーには、文字列以外にも数値、真偽値、オブジェクトなど、すべての型の値を使うことができる。

const fruits = new Map();
fruits.set(1, "apple");
const emptyObj = { };
fruits.set(emptyObj, "orange");
fruits.set(true, "grap");
console.log(fruits);
> Map {1 => "apple", emptyObj => "orange", true => "grape"}

◆ get - 値の取得

get メソッドで値を取得する

const fruits = new Map();
const emptyObj = { };
fruits.set(emptyObj, "orange");
console.log(fruits.get(emptyObj));
> orange

・異なるオブジェクトで値を取得した場合
const fruits = new Map();
const emptyObj = { };
fruits.set(emptyObj, "orange");
console.log(fruits.get({})); // emptyObjと構造が同じ別のオブジェクトで値を取得
> undefined // 値は取得できない

◆ delete - コレクション内の値を削除

delete メソッドを使うと、Mapオブジェクト内から値を削除できる。

const fruits = new Map([
    [1, "apple"],
    [false, "orange"],
]); 

fruits.delete(false);
console.log(fruits);
> Map { 1 => "apple" }

◆ clear - コレクション内の値をすべて削除

clear メソッドは、Mapオブジェクト内に保存したキーと値のペアをすべて削除する

const fruits = new Map([
    [1, "apple"],
    [false, "orange"],
]);

fruits.clear();
console.log(fruits);
> Map { }

◆ has - コレクション内に値が存在するか確認

has メソッドは、Mapオブジェクト内にキーが存在するかを確認する

const fruits = new Map([
    [1, "apple"],
    [false, "orange"],
]);

console.log(fruits.has(false));
> true
console.log(fruits.has(2));
> false

11.3.3 コールバック関数を引数に取るメソッド

コールバック関数を引数に取るMapのメソッドもforEach。

◆ forEach - Mapオブジェクトの要素をループ処理

MapのforEach メソッドは、配列のforEachと同様に、コールバック関数を使ってループ処理を行う。

Mapオブジェクト.forEach(function(value, key, map) {
    /* Mapの各要素を使った処理 */
}[,_this]);

value: Mapの値が1つずつ渡される。
key: Mapのキーが1つずつ渡される。
map: Mapオブジェクト自体が渡される。
_this: コールバック関数内のthisの参照先を設定する。

(使用例)
const map = new Map([
    ["キー1", "値1"],
    ["キー2", "値2"],
]);

map.forEach((value, key, map) => {
    console.log(`value: [${value}], key: [${key}], map: `, map);
});

> value: [値1], key: [キー1], map:  Map(2) {'キー1' => '値1', 'キー2' => '値2'}
> value: [値2], key: [キー2], map:  Map(2) {'キー1' => '値1', 'キー2' => '値2'}

11.3.4 Mapのプロパティ

◆ size - コレクションの長さを取得

Mapオブジェクトでは、Setと同様、sizeプロパティにMapの長さの情報を保持している。

const fruits = new Map();
fruits.set(1, "apple");
const emptyObj = { };
fruits.set(emptyObj, "orange");
console.log(fruits.size);
> 2

11.3.5 Mapからオブジェクトへの変換

Mapからオブジェクト{ }に変換するには、次のように記述する。

[構文] Mapからオブジェクトへ変換
const オブジェクト = Object.fromEntries(Mapオブジェクト);

(使用例)
const map = new Map([
    ["キー1", "値1"],
    ["キー2", "値2"],
]);

const obj = Object.fromEntries(map);
console.log(obj["キー1"]);
> 値1

◆ Mapとオブジェクトの主な違い

Mapの場合、キーに文字列以外も使用可能
Mapの場合、for...of文を使った繰り返し処理を記述可能
Mapの場合、sizeを通して長さを取得可能
Mapの場合、メソッドを保持できない

11.4 WeakMap

WeakMap は、キーにオブジェクトのみ使用可能なコレクションです。

11.4.1 WeakMapの初期化

WeakMapは次のようにして初期化する

const wm = new WeakMap();

11.4.2 WeakMapのメソッド

WeakMapには次のようなメソッドがある。

◆ set - 値の設定

set メソッドで、WeakMapオブジェクトに対してキーと値を登録する。

const wm = new WeakMap();
let keyObj = { };
wm.set(keyObj, "value");
console.log(wm);
> WeakMap {{…} => 'value'}
wm.set(1, "value2"); // オブジェクト以外をキーにするとエラーが発生する。 
> VM120:1 Uncaught TypeError: Invalid value used as weak map key
>    at WeakMap.set (<anonymous>)
>    at <anonymous>:1:4

◆ get - 値を取得

get メソッドは、特定のキーに対応する値を取得する

const wm = new WeakMap();
let keyObj = {};
wm.set(keyObj, "value");
console.log(wm.get(keyObj));
> value

◆ delete - コレクション内の値を削除

delete メソッドは、特定のキーの値を削除する

const wm = new WeakMap();
let keyObj = { };
wm.set(keyObj, "value");
wm.delete(keyObj);
console.log(wm);
> WeakMap { }

◆ has - コレクション内に値が存在するか確認

has メソッドは、WeakMap内に一致するキーオブジェクトが存在すればtrueを返す。

const wm = new WeakMap();
let keyObj = { };
wm.set(keyObj, "value");
console.log(wm.has(keyObj));
> true
console.log(wm.has({}));
> false

WeakMapは反復可能なオブジェクトではないため、for...of文などを使った反復処理はできない。

11 Collection - iruma-tea/dokushujs GitHub Wiki

11. コレクション

11.1 配列(Array)

11.1.1 配列の初期化

◆配列の初期化(リテラル表記)

◆配列の初期化(new Array)

11.1.2 配列の基本操作

11.1.3 配列のメソッド

◆ 配列に要素を追加

◆ 配列から要素を削除

◆配列の結合・複製

◆ 配列内の要素の存在チェック

◆その他のメソッド

11.1.4 コールバック関数を引数に取るメソッド

◆ forEach - 配列の各要素を使って繰り返し処理を行う

◆ map - 新しい配列の作成

◆ filter - 特定の値を除いた新しい配列の作成

◆ every - すべての要素の値が条件に一致するか

◆ some - すくなくとも1つの値が条件に一致するか

◆ find - 条件を満たした最初の要素の値を取得

◆ sort - 配列の並び替え

◆ reduce - 配列から単一の出力値を生成

11.1.5 静的メソッド

◆ from - 配列風オブジェクトや反復可能オブジェクトを配列に変換

◆ isArray - 配列かどうか判定

11.1.6 分割代入

◆ 配列の分割代入

◆ オブジェクトの分割代入

◆ 関数の引数に対する分割代入

11.2 Set

11.2.1 Setの初期化

11.2.2 Setのメソッド

◆ add - 値の追加

◆ delete - コレクション内の値を削除

◆ clear - コレクション内の値をすべて削除

◆ has - コレクション内に値が存在するか確認

11.2.3 コールバック関数を引数に取るメソッド

◆ forEach - コレクションの要素をループ処理

11.2.4 Setのプロパティ

◆ size - コレクションの長さを取得

11.3 Map

11.3.1 Mapの初期化

11.3.2 Mapのメソッド

◆ set - 値の設定

◆ get - 値の取得

◆ delete - コレクション内の値を削除

◆ clear - コレクション内の値をすべて削除

◆ has - コレクション内に値が存在するか確認

11.3.3 コールバック関数を引数に取るメソッド

◆ forEach - Mapオブジェクトの要素をループ処理

11.3.4 Mapのプロパティ

◆ size - コレクションの長さを取得

11.3.5 Mapからオブジェクトへの変換

◆ Mapとオブジェクトの主な違い

11.4 WeakMap

11.4.1 WeakMapの初期化

11.4.2 WeakMapのメソッド

◆ set - 値の設定

◆ get - 値を取得

◆ delete - コレクション内の値を削除

◆ has - コレクション内に値が存在するか確認

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️