2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

JavaScriptの繰り返し処理(for,map)

Last updated at Posted at 2022-02-18

JavaScriptの繰り替え処理について

### for文とは
for文によるループは指定された条件がfalseと評価されるまで繰り返されます。JavaScriptのforループはJavaやC言語のforループと同じです。


const arr = ["日本", "米国", "英国"];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
//=> "日本"
//=> "米国"
//=> "英国"

forループが実行されるときに次の処理が行われます。

for([初期化式];[条件式];[加算式])
  • 初期化式が実行されます。この式は通常、一個またはそれ以上のループカウンターを初期化しますが、この構文ではいかなるレベルの複雑な式を入れることができます。初期化式で変数を宣言することができます。
  • 条件式が評価されます。条件式の値がtrueの場合、ループ文が実行されます。条件式の値がfalseの場合、for ループは終了します。条件式がすべて省略されている場合、条件式は真であると仮定されます。
  • 文が実行されます。複数の文を実行するには、それらの文をグループ化するためにブロック文 ({ ... }) を使用します。
  • もしあれば、加算式が実行されます。

for-in

次はfor-inで、これはあまり使ったことがないのですがオブジェクトの中身などを取り出したいときに使用されるみたいです。

const obj = {
  name: "Luffy",
  age: 19
}

for(let key in obj) {
  console.log(key + ":" + obj[key]);
}
//=> "name:Luffy"
//=> "age:19"

for (変数 in オブジェクト)とすれば
オブジェクトのプロパティの数だけ繰り返してくれます。

for-of

for...of 文は、反復可能オブジェクト、たとえば組込みの String, Array, 配列状オブジェクト (例えば arguments や NodeList), TypedArray, Map, Set, およびユーザー定義の反復可能オブジェクトなどに対して、反復的な処理をするループを作成します。これはオブジェクトのそれぞれの識別可能なプロパティの値に対して、実行される文を表す独自の反復フックを呼び出します。

const numbers = [1,2,3,4,5,6];

for (let number of numbers) {
  console.log(number);
}

//=> 1
//=> 2
//=> 3
//=> 4
//=> 5
//=> 6

forEach

最後はforeachですがこれは配列に対してつかえます。


const obj = [
  {
    id: 1,
    name: "zoro"
  },
  {
    id: 2,
    name: "sanzi"
  }
];
 
obj.forEach( function( value ) {
    console.log( value.name );
});

//=> zoro
//=> sanzi

map

決まった繰り返し処理はforですが、JavaScriptのES6以降ではmap関数を使用することでコードの短縮ができます。
map()メソッドは、与えられた関数を配列の全ての要素に対して呼び出し、その結果からなる新しい配列を生成します。

mapは、与えられたcallback関数(注意として、コールバックは 非同期 命令が完了した後に続いてコードが実行されます)を配列の順番通りに、各要素に対して一度ずつ呼び出し、その結果から新しい配列を生成します。callbackは、値が代入されている配列の要素に対してのみ呼び出されます。
mapは新しい配列を生成するので、返された配列を使わない場合、mapを使うのはパターンに合いません。代わりに、forEachまたは、for-ofを使用してください。

const array = [1, 4, 9, 16].map(x => x * 2);

console.log(array); 

//=> [2, 8, 18, 32]

## まとめ
今日は繰り返し処理の一部について書かせて頂きました。明日はFindについて書こうと思います。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?