[TypeScript]連想配列をループするには？

TypeScript

どうも、ちょげ(@chogetarou)です。

連想配列をループする方法を紹介します。

スポンサーリンク

Object(オブジェクト)の場合

Objectをループするには、for文もしくはforEach()を使います。

また、連想配列のループ方法は、３つあります。

キー(プロパティ)のみをループ

１つ目は、キー(プロパティ)のみをループする方法です。

for…in文

for…in文を使う場合は、まず、for…in文のループ対象（inの右辺）に、対象のオブジェクトを指定します。

そして、for…in文にループ処理を指定します。

処理では、ループ変数でオブジェクトのキー（プロパティ）を取得します。

//obj=対象のオブジェクト
for (let key in obj) {
    //ループ処理
    //ループ変数「key」でキーを取得
}

上記のfor..in文は、オブジェクト(Object)のキー（プロパティ）のみをループします。

使用例

const nums = { 
    "one": 1, 
    "two": 2,
    "three": 3,
    "four": 4,
    "five": 5,
}

for (let key in nums) {
    console.log(key);
}
出力：
[LOG]: "one" 
[LOG]: "two" 
[LOG]: "three" 
[LOG]: "four" 
[LOG]: "five"

forEach()

forEach()を使う場合は、まず、Object.keys()を呼び出し、引数に対象のオブジェクトを指定します。

keys()からforEach()を呼び出します。

forEach()の引数に、１つの引数を持つ関数を指定します。

関数にループ処理を指定します。
（関数の引数で、オブジェクトのキーを取得）

//obj=対象のオブジェクト
Object.keys(obj).forEach(function(key) {
    //ループ処理
    //関数の引数「key」でキーを取得
})

上記のforEach()は、オブジェクト(Object)のキー（プロパティ）のみをループします。

使用例

const nums = { 
    "one": 1, 
    "two": 2,
    "three": 3,
    "four": 4,
    "five": 5,
}

Object.keys(nums).forEach(function(key) {
    console.log(key);
})
出力：
[LOG]: "one" 
[LOG]: "two" 
[LOG]: "three" 
[LOG]: "four" 
[LOG]: "five"

値(value)のみをループ

２つ目は、値(value)のみをループする方法です。

for…of文

for…of文を使う場合は、まず、for…of文のループ対象（ofの右辺）に、引数にオブジェクトを指定したObject.values()の結果を指定します。

そして、for…of文にループ処理を指定します。

処理では、ループ変数でオブジェクトの値を取得します。

//obj=対象のオブジェクト
for (let value of Object.values(obj)) {
    //ループ処理
    //ループ変数「value」で値を取得
}

上記のfor文は、オブジェクト(Object)の値(value)のみをループします。

使用例

const nums = { 
    "one": 1, 
    "two": 2,
    "three": 3,
    "four": 4,
    "five": 5,
}

for (let value of Object.values(nums)) {
    console.log(value);
}
出力：
[LOG]: 1 
[LOG]: 2 
[LOG]: 3 
[LOG]: 4 
[LOG]: 5

forEach()

forEach()を使う場合は、まず、Object.values()を呼び出し、Object.values()の引数にオブジェクトを指定します。

Object.values()からforEach()を呼び出します。

そして、forEach()の引数に、１つの引数を持つ関数を指定します。

関数のブロックにループ処理を指定します。
（関数の引数で、オブジェクトの値を取得）

//obj=対象のオブジェクト
Object.values(obj).forEach(function(value) {
    //ループ処理
    //引数「value」で値を取得
});

上記のforEach()は、オブジェクト(Object)の値(value)のみをループします。

使用例

const nums = { 
    "one": 1, 
    "two": 2,
    "three": 3,
    "four": 4,
    "five": 5,
}

Object.values(nums).forEach(function(value) {
    console.log(value);
});
出力：
[LOG]: 1 
[LOG]: 2 
[LOG]: 3 
[LOG]: 4 
[LOG]: 5
スポンサーリンク

キーと値を一緒にループ

３つ目は、キーと値を一緒にループする方法です。

for…of文

for…of文を使う場合は、まず、for…of文のループ対象（ofの右辺）に、引数にオブジェクトを指定したObject.entries()の結果を指定します。

また、for文のループ変数を、[]内にカンマ区切りで２つ指定します。

そして、for…of文にループ処理を指定します。

処理では、ループ変数の左側でキー、右側で値を取得します。

//obj=対象のオブジェクト
for (let [key, value] of Object.entries(obj)) {
    //ループ処理
    //ループ変数の「key」でキー, 「value」で値を取得
}

上記のfor文は、オブジェクト(Object)のキーと値を一緒にループします。

普通のループ変数を１つ指定した場合は、インデックスでキーと値を取得します。

具体的には、インデックス0でキー、インデックス1で値を取得します。

//普通のループ変数を１つ指定した場合
for (let entry of Object.entries(obj)) {
    //entry[0]でキー、entry[1]で値を取得
}

使用例

const nums = { 
    "one": 1, 
    "two": 2,
    "three": 3,
    "four": 4,
    "five": 5,
}

for (let [key, value] of Object.entries(nums)) {
    console.log(key + "=" + value);
}
出力：
[LOG]: "one=1" 
[LOG]: "two=2" 
[LOG]: "three=3" 
[LOG]: "four=4" 
[LOG]: "five=5"

forEach()

for…of文を使う場合は、まず、Object.entries()を呼び出し、Object.entries()の引数にオブジェクトを指定します。

Object.entries()からforEach()を呼び出します。

forEach()の引数に、２つの要素を持つ配列を引数に指定した関数を指定します。

関数のブロックにループ処理を指定します。
（引数の左の要素でキー、引数の右の要素で値を取得）

//obj=対象のオブジェクト
Object.entries(obj).forEach(function([key, value]) {
    //ループ処理
    //「key」でキー, 「value」で値を取得
});

上記のforEach()は、オブジェクト(Object)のキーと値を一緒にループします。

配列ではない引数を指定した場合は、インデックスでキーと値を取得します。

具体的には、引数のインデックス0でキー、インデックス1で値を取得します。

//配列でない引数を指定した場合
Object.entries(obj).forEach(function(entry) {
    //entry[0]でキー、entry[1]で値を取得
}

使用例

const nums = { 
    "one": 1, 
    "two": 2,
    "three": 3,
    "four": 4,
    "five": 5,
}

Object.entries(nums).forEach(function([key, value]) {
    console.log(key + "=" + value);
});
出力：
[LOG]: "one=1" 
[LOG]: "two=2" 
[LOG]: "three=3" 
[LOG]: "four=4" 
[LOG]: "five=5"

Map(マップ)の場合

Map(マップ)をループする方法は、３つあります。

キー(プロパティ)のみをループ

１つ目は、キーのみをループする方法です。

for…of文

ひとつは、for…of文を使う方法です。

まず、for…of文のループ対象（ofの右辺）に、引数にMap(マップ)から呼び出したkeys()の結果を指定します。

そして、for…of文にループ処理を指定します。

処理では、ループ変数でMap(マップ)のキーを取得します。

//map=対象のマップ
for (const key of map.keys()) {
    //ループ処理
    //ループ変数「key」でキーを取得
}

上記のfor文は、Map(マップ)のキーのみをループします。

使用例

const nums = new Map();
nums.set("one", 1);
nums.set("two", 2);
nums.set("three", 3);
nums.set("four", 4);
nums.set("five", 5);

for (const key of nums.keys()) {
    console.log(key);
}
出力：
[LOG]: "one" 
[LOG]: "two" 
[LOG]: "three" 
[LOG]: "four" 
[LOG]: "five"

forEach()

もうひとつは、forEach()を使う方法です。

まず、Map(マップ)からkeys()を呼び出し、その結果を配列に変換します。

keys()の結果を変換した配列からforEach()を呼び出します、

forEach()の引数に、１つの引数を持つ関数を指定します。

そして、関数のブロックにループ処理を指定します。

処理では、引数でMap(マップ)のキーを取得します。

//map=対象のマップ
[...map.keys()].forEach(function(key) {
    //ループ処理
    //引数「key」でキーを取得
});

上記のforEach()は、Map(マップ)のキーのみをループします。

[TypeScript]Map(マップ)の全てのキーを配列として取得するには？
Map(マップ)の全てのキー(key)を配列(array)に変換する方法を紹介します。
www.choge-blog.com
2022.09.04

使用例

const nums = new Map();
nums.set("one", 1);
nums.set("two", 2);
nums.set("three", 3);
nums.set("four", 4);
nums.set("five", 5);

[...nums.keys()].forEach(function(key) {
    console.log(key);
});
出力：
[LOG]: "one" 
[LOG]: "two" 
[LOG]: "three" 
[LOG]: "four" 
[LOG]: "five"

値(value)のみをループ

２つ目は、値(value)のみをループする方法です。

for…of文

ひとつは、for…of文を使う方法です。

まず、for…of文のループ対象（ofの右辺）に、引数にMap(マップ)から呼び出したvalues()の結果を指定します。

そして、for…of文にループ処理を指定します。

処理では、ループ変数でMap(マップ)の値を取得します。

//map=対象のマップ
for (const value of nums.values()) {
    //ループ処理
    //ループ変数「value」で値を取得
}

上記のfor文は、Map(マップ)の値のみをループします。

使用例

const nums = new Map();
nums.set("one", 1);
nums.set("two", 2);
nums.set("three", 3);
nums.set("four", 4);
nums.set("five", 5);

for (const value of nums.values()) {
    console.log(value);
}
出力：
[LOG]: 1 
[LOG]: 2 
[LOG]: 3 
[LOG]: 4 
[LOG]: 5

forEach()

もうひとつは、forEach()を使う方法です。

まず、Map(マップ)からvalues()を呼び出し、その結果を配列に変換します。

values()の結果を変換した配列からforEach()を呼び出します、

forEach()の引数に、１つの引数を持つ関数を指定します。

そして、関数のブロックにループ処理を指定します。

処理では、引数でMap(マップ)の値を取得します。

//map=対象のマップ
[...map.values()].forEach(function(value) {
    //ループ処理
    //引数「value」で値を取得
});

上記のforEach()は、Map(マップ)の値のみをループします。

[TypeScript]Map(マップ)の全てのキーを配列として取得するには？
Map(マップ)の全てのキー(key)を配列(array)に変換する方法を紹介します。
www.choge-blog.com
2022.09.04

使用例

const nums = new Map();
nums.set("one", 1);
nums.set("two", 2);
nums.set("three", 3);
nums.set("four", 4);
nums.set("five", 5);

[...nums.values()].forEach(function(value) {
    console.log(value);
});
出力：
[LOG]: 1 
[LOG]: 2 
[LOG]: 3 
[LOG]: 4 
[LOG]: 5
スポンサーリンク

キーと値を一緒にループ

３つ目は、キーと値を一緒にループする方法です。

for…of文

ひとつは、for…of文を使う方法です。

まず、for…of文のループ対象（ofの右辺）に、対象のMap（マップ）を指定します。

また、for文のループ変数を、[]内にカンマ区切りで２つ指定します。

そして、for…of文にループ処理を指定します。

処理では、左側のループ変数でキー、右側のループ変数で値を取得します。

//map=対象のマップ
for (const [key, value] of map) {
    //ループ処理
    //「key」でキー, 「value」で値を取得
}

上記のfor文は、Map(マップ)のキーと値を一緒にループします。

ループ変数を１つにした場合は、インデックスを使って、キーと値を取得します。

具体的には、ループ変数のインデックス「０」でキー、インデックス「１」で値を取得します。

//ループ変数を１つにした場合
for (const item of map) {
    //item[0]でキー、item[1]で値を取得
}

使用例

const nums = new Map();
nums.set("one", 1);
nums.set("two", 2);
nums.set("three", 3);
nums.set("four", 4);
nums.set("five", 5);

for (const [key, value] of nums) {
    console.log(key + ":" + value);
}
出力：
[LOG]: "one:1" 
[LOG]: "two:2" 
[LOG]: "three:3" 
[LOG]: "four:4" 
[LOG]: "five:5"

forEach()

もうひとつは、forEach()を使う方法です。

まず、Map(マップ)からforEach()を呼び出します。

forEach()の引数に、２つの引数を持つ関数を指定します。

そして、関数のブロックにループ処理を指定します。

処理では、第１引数でMap(マップ)の値、第２引数でキーを取得します。

//map=対象のマップ
map.forEach(function(value, key) {
    //ループ処理
    //引数「value」で値、引数「key」でキーを取得
});

上記のforEach()は、Map(マップ)のキーと値を一緒にループします。

使用例

const nums = new Map();
nums.set("one", 1);
nums.set("two", 2);
nums.set("three", 3);
nums.set("four", 4);
nums.set("five", 5);

nums.forEach(function(value, key) {
    console.log(key + ":" + value);
});
出力：
[LOG]: "one:1" 
[LOG]: "two:2" 
[LOG]: "three:3" 
[LOG]: "four:4" 
[LOG]: "five:5"

まとめ

連想配列をループするには、for文もしくはforEach()を使います。

Objectの場合

  • キー（プロパティ）のみをループする方法
    • for…in文を使う場合
      for (let key in obj) { ループ処理 }
    • forEach()を使う場合
      Object.keys(obj).forEach(function(key) { ループ処理 })
  • 値のみをループする方法
    • for…of文を使う場合
      for (let value of Object.values(obj)) { ループ処理 }
    • forEach()を使う場合
      Object.values(obj).forEach(function(value) { ループ処理 })
  • キーと値のみをループする方法
    • for…of文を使う場合
      for (let [key, value] of Object.entries(obj)) { ループ処理 }
    • forEach()を使う場合
      Object.entries(obj).forEach(function([key, value]) { ループ処理 })

Map(マップ)の場合

  • キーのみをループする方法
    • for…of文を使う方法
      for (const key of map.keys()) { ループ処理 }
    • forEach()を使う方法
      [...map.keys()].forEach(function(key) { ループ処理 })
  • 値のみをループする方法
    • for…of文を使う方法
      for (const value of nums.values()) { ループ処理 }
    • forEach()を使う方法
      [...map.values()].forEach(function(value) { ループ処理 })
  • キーと値のみをループする方法
    • for…of文を使う方法
      for (const [key, value] of map) { ループ処理 }
    • forEach()を使う方法
      map.forEach(function(value, key) { ループ処理 })
404 NOT FOUND | ちょげぶろぐ
www.choge-blog.com
404 NOT FOUND | ちょげぶろぐ
www.choge-blog.com
[TypeScript]連想配列を配列(Array)に変換するには？
連想配列を通常の配列(Array)に変換する方法を紹介します。
www.choge-blog.com
2022.10.07

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました