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

JavaScript

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

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

スポンサーリンク

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

Object(オブジェクト)をループする方法は、次の３通りあります。

  • キーのみをループする方法
  • 値のみをループする方法
  • キーと値を一緒にループする方法

キーのみをループ

オブジェクト(Object)のキー(key)のみをループする方法は、３つあります。

for…in文

１つ目は、for…in文を使う方法です。

まず、for…in文を記述します。

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

そして、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);
}
出力：
one
two
three
four
five

for…of文

２つ目は、for…of文を使う方法です。

まず、for…of文を記述します。

for…of文のループ対象（ofの右辺）に、対象のオブジェクトを引数に指定したObject.keys()を指定します。

そして、for…of文のループ処理を記述します。

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

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

上記のfor…of文は、対象のObjectのキーをループします。

使用例

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

for (let key of Object.keys(nums)) {
    console.log(key);
}
出力：
one
two
three
four
five

forEach()

３つ目は、forEach()を使う方法です。

Object.keys()の引数に、対象のオブジェクトを指定します。

次に、Object.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);
})
出力：
one
two
three
four
five

値のみをループ

オブジェクト(Object)の値(value)のみをループする方法は、２つあります。

for…of文

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

まず、for…of文を記述します。

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

そして、for…of文のループ処理を記述します。

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

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

上記のfor…of文は、対象のObjectの値(value)をループします。

使用例

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

for (let value of Object.values(nums)) {
    console.log(value);
}
出力：
1
2
3
4
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);
})
出力：
1
2
3
4
5

キーと値をループ

オブジェクト(Object)のキー(key)と値(value)を一緒にループする方法は、２つあります。

for…of文

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

まず、for…of文を記述します。

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

また、for…of文のループ変数は、２つ記述します。

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

ループ処理では、１つ目のループ変数でキー、２つ目のループ変数で値を取得できます。

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

上記のfor…of文は、対象のObjectのキー(key)と値(value)をループします。

使用例

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

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

forEach()

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

まず、Object.entries()を呼び出します。

Object.entries()の引数に対象のオブジェクトを指定します。

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

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

関数の処理に、ループ処理を記述します。
（関数内では、引数の左側でキー、右側で値を取得）

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

上記のforEach()は、対象のObjectのキー(key)と値(value)を一緒にループします。

使用例

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

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

Map(マップ)の場合

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

  • キーのみをループする方法
  • 値のみをループする方法
  • キーと値を一緒にループする方法

キーのみをループ

Map(マップ)のキー(key)のみをループする方法は、２つあります。

for…of文

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

まず、for…of文を記述します。

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

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

ループ処理では、ループ変数でキーを取得できます。

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

上記のfor…of文は、対象のMap(マップ)のキー(key)をループします。

使用例

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);
}
出力：
one
two
three
four
five

forEach()

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

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

次に、変換した配列からforEach()を呼び出します。

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

関数の処理に、ループ処理を記述します。
（関数の引数で、Mapのキーを取得）

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

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

使用例

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);
});
出力：
one
two
three
four
five

値のみをループ

Map(マップ)の値(value)のみをループする方法は、２つあります。

for…of文

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

まず、for…of文を記述します。

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

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

ループ処理では、ループ変数で値を取得できます。

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

上記のfor…of文は、対象のMap(マップ)の値(value)をループします。

使用例

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);
}
出力：
1
2
3
4
5

forEach()

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

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

次に、変換した配列からforEach()を呼び出します。

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

関数の処理に、ループ処理を記述します。
（関数の引数で、Mapの値を取得）

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

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

使用例

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);
});
出力：
1
2
3
4
5

キーと値をループ

Map(マップ)のキー(key)と値(value)を一緒にループする方法は、２つあります。

for…of文

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

まず、for…of文を記述します。

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

for…of文のループ変数に、「[key, value]」（key=キー、value=値）を指定します。

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

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

上記のfor…of文は、対象のMap(マップ)のキー(key)と値(value)をループします。

for…of文のループ対象に、Mapから呼び出したentries()を指定しても、同じ結果が得られます。

for (const [key, value] of map.entries()) {
    //ループ処理
}

使用例

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);
}
出力：
one:1
two:2
three:3
four:4
five:5

forEach()

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

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

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

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

関数では、第１引数で値、第２引数でキーを取得できます。

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

上記のforEach()は、対象のMap(マップ)のキー(key)と値(value)をループします。

使用例

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);
})
出力：
one:1
two:2
three:3
four:4
five:5

まとめ

オブジェクト(Object)をループする方法は、次の３通りあります。

  • キーのみをループする方法
    • for…in文を使う方法
      for (let key in obj) { /*ループ処理*/ }
    • for…of文を使う方法
      for (let key of Object.keys(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(マップ)のキー(key)のみをループする方法は、次の２つです。

  • キーのみをループする方法
    • for…of文を使う方法
      for (const key of map.keys()) { /*ループ処理*/ }
    • forEach()を使う方法
      [...map.keys()].forEach(function (key) {/*ループ処理*/ })
  • 値のみをループする方法
    • for…of文を使う方法
      for (const value of map.values()) { /*ループ処理*/ }
    • forEach()を使う方法
      [...map.values()].forEach(function (value) {/*ループ処理*/ })
  • キーと値を一緒にループする方法
    • for…of文を使う方法
      for (const [key, value] of map) { /*ループ処理*/ }
    • forEach()を使う方法
      map.forEach(function(value, key) {/*ループ処理*/ })
[JavaScript]配列(array)の空文字を削除するには？
配列(array)の空文字を削除する方法を紹介します。
www.choge-blog.com
2022.12.22
[JavaScript]文字列(string)の特定の文字を削除するには？
文字列(string)の特定の文字を削除する方法を紹介します。
www.choge-blog.com
2022.12.21
[JavaScript]配列(array)のundefinedを削除するには？
配列(array)のundefinedを削除する方法を紹介します。
www.choge-blog.com
2022.12.21

Youtube

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

スポンサーリンク

コメント

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