Help us understand the problem. What is going on with this article?

JavaScript ループ処理を網羅的にまとめてみた。

JavaScriptのループ処理について備忘録としてまとめておきます。

Javascriptのループ処理

  • for文
  • for...in文
  • for...of文
  • while文
  • do...while文
  • 高階関数によるループ

for文

for (初期化式; 条件式; ()算式)

はじめに初期化式を書きます。その次にループを抜けるための条件を書き、最後に加(減)算をします。

const names = ["太郎", "次郎", "三郎"];

for (let i = 0; i < names.length; i++) {
  console.log(names[i]);
}
/* => "太郎"
      "次郎"
      "三郎"
*/

ちなみに式を全て省略した書き方をすることもできます。この場合breakを書かないと無限ループになるので気をつけましょう。

const names = ["太郎", "次郎", "三郎"];
let i = 0;

for (;;) {
  if (i >= names.length) break; // もしiがnamesの要素数以上だったら処理を抜ける。
  console.log(names[i]);
  i++;
}
/* => "太郎"
      "次郎"
      "三郎"
*/

for...in文

for...inはそれぞれの要素に対して反復処理を行います。

for (変数 in オブジェクト) {
  処理
}

配列

const names = ["太郎", "次郎", "三郎"];

for (let i in names) {
     // iにはインデックス番号が入る
  console.log(names[i]);
}
/* => "太郎"
      "次郎"
      "三郎"
*/

オブジェクト

const obj = {name: "太郎", age: 20, gender: "male"};

for (let i in obj) {
    // iにはキーが入る
  console.log(obj[i]);
}
/* => 太郎
      20
      male
*/

for...of文

for...ofは値に対して反復処理されます。

for (変数 of オブジェクト) {
  処理
}

配列

const names = ["太郎", "次郎", "三郎"];

for (let i of names) {
    // iにはそれぞれの値が入る
  console.log(i);
}
/* => "太郎"
      "次郎"
      "三郎"
*/

オブジェクトの場合はObject.keys()で配列に変換にしてから処理をします。

const obj = {name: "太郎", age: 20, gender: "male"};

const keys = Object.keys(obj);
// keysは["name", "age", "gender"]
for (let i of keys) {
    // iにはそれぞれのキーが入る
  console.log(obj[i]);
}
/* => 太郎
      20
      male
*/

while文

while文は形こそ違いますがやっていることはfor文と一緒です。

初期化式
while (条件式) {
  ()算式
}

条件式がtrueの場合反復処理を行うのでwhile文の中で条件をfalseにするための処理(今回はiをカウントアップ)しないと無限ループになるので気をつけましょう。

const names = ["太郎", "次郎", "三郎"];
let i = 0;

while (i < names.length) {
  console.log(names[i]);
  i++;
}
/* => "太郎"
      "次郎"
      "三郎"
*/

do...while文

do...while文は必ず最初の処理は実行され、その後は条件によって実行したい場合に使われます。

do {
  処理
} while (条件式);

doの間は実行されるので0番目の要素の太郎が出力されます。その後は条件式がfalseなので実行されません。

const names = ["太郎", "次郎", "三郎"];
let i = 0;

do {
  console.log(names[i]);
} while (i < 0);

// => 太郎

高階関数

高階関数とは、引数に関数を取るもの、もしくは関数を返り値として返すもののことを言います。

代表的な高階関数

  • forEach
  • map
  • filter
  • sort
  • reduce

forEach

forEachは引数にとった関数を各要素に対して繰り返します。返り値はundefinedを返します。

const names = ["太郎", "次郎", "三郎"];

names.forEach(function(name) {
  console.log(name);
});
/* => "太郎"
      "次郎"
      "三郎"
*/

map

map()はforEach()と出力結果は同じですが返り値に関数を実行した結果を返します。返り値の配列を別に使いたい時に使用します。

const names = ["太郎", "次郎", "三郎"];

let newName = names.map(function(name) {
  console.log(name);
  return name + "さん";
});
/* => "太郎"
      "次郎"
      "三郎"
*/

console.log(newName); // => (3) ["太郎さん", "次郎さん", "三郎さん"]
                      // forEachの場合はundefined

filter

filter()は関数に与えられた条件に合致したものを新しい配列として返します。

const languages = ["JavaScript", "Ruby", "Go"];

let newName = languages.filter(function(lang) {
  return lang.length > 3;
});

console.log(newName); // => (2) ["JavaScript", "Ruby"]

sort

sort()は要素を昇順・降順に並べたりする際に使用します。

const nums = [4, 2, 5, 1, 3];

nums.sort(function (a, b) {
  return a - b;
});

console.log(nums); // => (5) [1, 2, 3, 4, 5]

reduce

reduce()は配列の各要素に対して関数を実行し、最終的に単一の値を返します。

const nums = [1, 2, 3, 4];

let newNums = nums.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
});

console.log(newNums); // => 10

これは少しイメージしにくいので順を追って説明します。

まず最初の呼び出しで第1引数であるaccumulatorには0が、第2引数であるcurrentValueには最初の要素の値である1が入っています。

nums.reduce(function(0, 1) {
  return  0 + 1;
});

その返り値をaccumulatorが受け取ります。するとaccumulatorが1、currentValueは配列の次の値の2になります。

nums.reduce(function(1, 2) {
  return  1 + 2;
});

次はaccumulatorが3、currentValueも3になります。このように続けていくと最終的にaccumulatorが6、currentValueが4になりますので最終的に10が返されnewNumsの出力が10になります。

const nums = [1, 2, 3, 4];

let newNums = nums.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue; // 6 + 4
});

console.log(newNums); // => 10

最後に

JavaScriptのループ処理についてまとめてみました。
ループ処理は今どのような値が入っているのかを調べていくと理解が深まると思います。
MDN等を参照して手を動かしながら理解していきましょう。

参考

MDN ループと反復処理

tetsuyakojima
消防士からエンジニア転職を目指しています 好きな言葉はgive&give 日本語と英語とプログラミング言語のトリリンガルを目指しています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした