Written by Kasumi

【JavaScript初心者向け】繰り返し処理を使い、配列要素を展開する方法

JavaScriptで繰り返し処理を使い、配列要素を展開する方法について知りたい。

本記事ではこのような悩みを解決。

JavaScriptのfor文、while文を使って配列要素を展開する方法について解説します。

for文を使って配列要素を展開

// 配列
var array = [1, 2, 3, 4, 5, 6];

// for文で展開
for (var i = 0; i < array.length; i++) {
  // コンソールに出力
  console.log(array[i]);
}

// 出力結果
// 1
// 2
// 3
// 4
// 5
// 6

for文を使った配列要素を展開するコード例です。

使い方は以下の通りです。

for (初期化式; 条件式; 変化式) {
実行処理
}

初期化式に変数 var i=0を定義。

条件式で変数iの値が配列の要素数(配列変数.length)より少なかったらを定義。

変化式でi++とし、iに繰り返し1を足していきます。

条件式が成り立つまで(iの値が配列の要素数より低い場合)繰り返し処理を行います。

実行処理で、配列変数[i]を指定する事により、配列要素をすべて展開できます。

while文を使って配列要素を展開

// 配列
var array = [1, 2, 3, 4, 5, 6];

// 初期値
var i = 0;

// while文で展開
while ( i < array.length ) {
  // コンソールに出力
  console.log(array[i]);
  i++;
}

// 出力結果
// 1
// 2
// 3
// 4
// 5
// 6

while文を使った配列要素を展開するコード例です。

使い方は以下の通りです。

while ( 条件式 ) {
実行処理
}

while文の前に、初期値0が入った変数iを定義。

条件式で、変数iが配列の要素数(配列変数.length)より少なかったらを定義。

実行処理内で配列変数[i]を指定、whileのループ終わり手前でi++を指定し条件式が成り立つまえ、iに1を足します。

以上で配列要素を展開できます。

まとめ

JavaScriptでfor文、while文を使い、配列要素を展開する方法について紹介しました。

以上で解説を終わります。

関連記事

JavaScript

Swiperでサムネイル固定のスライダーを実装する方法

2022.09.19
52
JavaScript

【JavaScript】配列から最大値・最小値を求める方法

2022.06.08
209
JavaScript

JavaScriptでスクロールしたら要素をアニメーション表示する方法【Intersection Observer APIが便利】

2022.09.08
170
JavaScript

【簡単】slickスライダーでデバイス事にオプションを切り替えよう【レスポンシブ設定を追加】

更新日:2022.09.09
372