for … in文
for … in文は、繰り返し処理を行える制御構文です。
構文は、Javaの拡張for文に似た構文を使います。
下記の結果のように、配列の場所（要素番号）が一つずつvalに入った状態になります。
const array = ['aaa', 'bbb', 'ccc']
for (const val in array) {
console.log(val)
}
// 0
// 1
// 2使い道としては、「配列の要素番号が〇の時、△の処理をしたい」という条件で使うことも可能です。
オブジェクトをfor … in
for … in文は、配列だけではなく、オブジェクトに対しても使用することが可能です。
オブジェクトについて、思い出したい方は以下の記事も覗いてみてください！
ちなみに、for … of文では、エラーが出ます。
では、実際に見てみましょう。
const fanta = {orange: 'オレンジ', grape: 'グレープ', melon: 'メロン'}
for (const val in fanta) {
console.log(val)
}
// orange
// grape
// melon上記のように、キーの値のみが取得できます。
値も一緒に取得したい場合は、下記のように変更します。
const fanta = {orange: 'オレンジ', grape: 'グレープ', melon: 'メロン'}
for (const val in fanta) {
console.log(`key:${val} value:${fanta[val]}`)
}
// key:orange value:オレンジ
// key:grape value:グレープ
// key:melon value:メロン実践的サンプルコード
次は、実際に使いそうなサンプルコードを紹介します。
オブジェクトの値の型が数字に変換できない文字列だった時だけ、
処理を行わないコードを書いてみます。
const obj = {
num1: 10,
num2: 20,
num3: 'fake',
num4: 40,
num5: 'fake',
}
for (const val in obj) {
// isNaNメソッドで数字に変換できるか確認
if (isNaN(Number(obj[val]))) {
// 何もせず、次の処理に移動
continue
}
// 値を10倍して表示
console.log(Number(obj[val]) * 10)
}
// 100
// 200
// 400このコードでfor…of文を使用しないのには、理由があります。
for…of文は、反復可能なオブジェクト（配列、文字列、Set、Mapなど）に使用するのが一般的です。
その証拠に下記のコードは、エラー(TypeError: obj is not iterable)が発生します。
const obj = {
num1: 10,
num2: 20,
num3: 'fake',
num4: 40,
num5: 'fake',
}
for (let val of obj) {
console.log(val)
}for … of文
for…of文は、反復可能なオブジェクト（配列、文字列、Set、Mapなど）に使用するのが一般的です。
でないとエラーが発生してしまいます。
配列の場合
配列は反復可能なオブジェクトです。
そのため、for…of文の対象になります。
const numbers = [1, 2, 3, 4, 5];
for (let number of numbers) {
console.log(number);
}
// 1
// 2
// 3
// 4
// 5文字列の場合
文字列も反復可能なオブジェクトです。
そのため、for…of文の対象になります。
const str = 'abc'
for (let char of str) {
console.log(char)
}
// a
// b
// cSetの場合
Setも反復可能なオブジェクトです。
そのため、for…of文の対象になります。
const set = new Set(['aaa', 'bbb', 'ccc'])
for (let val of set) {
console.log(val)
}
// aaa
// bbb
// cccSetについては、以下の記事で解説していますので、参考にしてみてください。
Mapの場合
Mapも反復可能なオブジェクトです。
そのため、for…of文の対象になります。
ただ、Mapの場合は少し特殊な記述になります。
下記のような書き方をすることで、キーとバリューを分けて取得することが可能です。
ちなみに、通常通りの「for (let value of map) {}」 の書き方でも問題ありません。
const map = new Map()
map.set('aaa', 1)
map.set('bbb', 2)
map.set('ccc', 3)
for (let [key, value] of map) {
console.log(`${key} ${value}`)
}
// aaa 1
// bbb 2
// ccc 3実践的サンプルコード
ここでは、for…inで紹介したサンプルコードをfor…ofに書き直してみます。
const obj = {
num1: 10,
num2: 20,
num3: 'fake',
num4: 40,
num5: 'fake',
}
// Object.entries()メソッドを使用
for (let [key, value] of Object.entries(obj)) {
// isNaNメソッドで数字に変換できるか確認
if (isNaN(Number(value))) {
// 何もせず、次の処理に移動
continue
}
// 値を10倍して表示
console.log(Number(value) * 10)
}
// 100
// 200
// 400まとめ
ここまで読んでいただきありがとうございます。
for…inとfor…ofの使い方について、紹介しました。
上記で紹介した通り、どちらもメリットとデメリットがあり、
状況によって使い分ける必要があります。
さらに理解を深めるには、サンプルコードを書いたり、書籍を読むのがおすすめです。
コメント