最新！JavaScript入門講座ー配列の繰り返しをわかりやすく解説

forやwhileといった繰り返し処理の他にも、実は繰り返しを行うことのできるものがあります。それは配列という連続した値を操作するのに役立つ配列用の繰り返しがあるのです。

これは、JavaScriptの基礎だけではなく、今後Reactといったフレームワークを扱うときにも大事になってくるものです。なので、かならず理解しておきたい内容です。

今回は、初心者の方向けに配列の繰り返し処理をわかりやすく解説していきます。

配列特有の繰り返し処理

forEach

まず最初に解説するのが、forEachになります。

forEachの書き方は上のようになります。
配列名のメソッドで、カッコの中に要素名と定義して実行する処理を=>の後に書きます。

この矢印はアロー関数式と言われているJavaScriptにおける関数の一つの書き方になります。まだ関数についてはここではあまり気にしなくても大丈夫です。forEachについてまずは理解しましょう。

では、forEachの具体的なサンプルを見ていきましょう。

let service = ["Pixiv","Netflix","dアニメストア","Amazon Prime Video","AT-X","Pixiv"];

service.forEach(elem => console.log(elem));

$ node array.js

Pixiv
Netflix
dアニメストア
Amazon Prime Video
AT-X
Pixiv

簡単なサンプルです。
実行すると、配列全ての要素が出力されるはずです。

let service = ["Pixiv","Netflix","dアニメストア","Amazon Prime Video","AT-X","Pixiv"];

service.forEach((elem,i) => {
    if (i % 2 == 0){
        console.log(`service No.${i} : ${elem}`);
    }
});

$ node array.js

service No.0 : Pixiv
service No.2 : dアニメストア
service No.4 : AT-X

続いてはこちらの例です。
こちらは、要素名のみではなく、インデックスも指定しています。これによって、別の処理を実行することが可能になります。

map

続いてはmapについて解説していきます。

上記がmapの基本的な書き方になります。forEachと同じになります。

let lang = ["Java","JavaScript","TypeScript","PHP","Ruby","Python","Perl","C/C++","Go","Rust","C#"];

lang.map(lan => {
    console.log(lan.toLocaleUpperCase());
});

$ node array.js

JAVA
JAVASCRIPT
TYPESCRIPT
PHP
RUBY
PYTHON
PERL
C/C++
GO
RUST
C#

実行するとこのようになります。
toLocaleUpperCaseは文字列の文字全てを全角にするメソッドになります。要素ごとに大文字にして出力しています。

まとめ

まとめに入ります。
今回はこのようなことを学びました。

では今回はここまでになります。お疲れ様でした。

参考資料

ループと反復処理 - JavaScript | MDN

ループは繰り返し何かを実行するための簡便な方法を提供します。本章では JavaScript で利用可能な反復処理を行う数々の文を紹介します。

developer.mozilla.org

JavaScript Primer - 迷わないための入門書

JavaScript Primerは、JavaScriptの基礎から応用までを一貫して学べる入門書です。

jsprimer.net

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/

www.freecodecamp.org