JavaScriptの配列の要素でループする方法について書いています。
配列の要素数分ループしたいときには、下記の構文やメソッドを使うことができます。
・forEachメソッド
・for…of文
forでループする
for文を使うことで、配列の要素を取得しながらループすることができます。
例えば、下記のように使うことができます。
let fruits = ['apple', 'grape', 'orange']
for (let i = 0; i < fruits.length; i++) {
let fruit = fruits[i]
console.log(fruit)
}
最初にfruits変数に3つの要素で、配列を作っています。
その次の処理で、for文を使って配列の要素がある分ループしています。
for文の定義内容としては、下記になります。
・`fruits`配列の要素数をlengthプロパティで取得して、iより大きい間ループするように条件を指定する
・ループが終わるたびに`i`変数のカウントアップ(`i++`)
ループの中ではfruits配列にアクセスして、先頭から要素を取得しています。
fruits[i]というようにアクセスしているので、0番目からループを回るたびに取得できます。
要素を出力すると、下記のように配列の要素が全て取得できたことが確認できました。
apple
grape
orange
forEachメソッドでループする
配列からforEachメソッドを呼び出して使うことで、要素数分ループすることができます。
例えば、下記のように使うことができます。
let fruits = ['peach', 'lemon', 'banana', 'orange']
fruits.forEach((value) => {
console.log(value)
})
最初にfruits変数に4つの要素で、配列を作っています。
次の処理で、fruits配列からforEachメソッドを呼び出しています。
定義しているvalue変数に、配列の要素がループするたびにひとつずつ取得されます。
内容をconsole.logで出力していますが、下記のように全ての要素が出力されました。
peach
lemon
banana
orange
forEachメソッドで要素番号が欲しい
forEachメソッドで要素番号(インデックス)が欲しいときです。
下記のように、forEachメソッドの第2引数を指定することで、要素番号として使えます。
let fruits = ['peach', 'lemon', 'banana', 'orange']
fruits.forEach((value, index) => {
console.log(`${index}:${value}`)
})
先ほどと同じ処理ですが、forEachメソッドの第2引数にindexを指定しています。
このindex変数にループするたびの要素番号が取得できます。
配列の要素番号と要素を出力しましたが、下記のように全て出力できました。
0:peach
1:lemon
2:banana
3:orange
for…ofでループする
for...ofを使うことで、配列の要素数分ループして出力することができます。
例えば、下記のように使うことができます。
let fruits = ['apple', 'grape', 'orange']
for (const fruit of fruits) {
console.log(fruit)
}
最初にfruits変数に、3つの要素で配列を作りました。
次の処理でfor...ofを使って、配列の要素数分ループしています。
ofの後ろに配列を指定して、ofの前の方にループごとに、配列要素が設定される変数を定義します。
ループ処理の中で配列要素を出力していますが、下記のように全ての要素が出力されました。
apple
grape
orange
for...ofについては、下記にも書いているので、気になる方は確認してみてください。配列でループする方法のまとめ
今回はJavaScriptの配列でループする方法について書きました。
記事の内容をまとめると、下記のようになります。
・配列からforEachメソッドを使うことで、配列の要素数分ループできた。
・for…ofを使うことで、配列の要素数分ループできた。
基本的には簡単にループできるforEachメソッド、for…ofを使っていくと良いかと思います。
要素番号を何かに使いたい場合などに、for文を使うと良いのではないでしょうか。
コメント