[JS] ループ #JavaScript

for文

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

for(let i = 0; i < 5; i = i + 1) {
  console.log(i);
}

let i = 0;　　　変数を定義
i < 5;　　　　ループを継続する条件を指定
i = i + 1　　　ブロックが一回終了したときに実行される式

arry[ i ]とすれば、配列の要素を回すことができます

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

for(let i = 0; i < arry.length; i ++) {
  console.log(arry[i]);
}

i < arry.length;
i ++

for in

in arryとすると配列のインデックスが渡ってきます

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

for(let i in arry) {
  console.log(i);
}

i, arry[ i ]とすると値を一括で見ることもできます

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

for(let i in arry) {
  console.log(i, arry[i]);
}

for of

for ofは値がそのまま渡ってきます
現在対応していないブラウザがありますのでご注意ください

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

for(let v of arry) {
  console.log(v);
}

オブジェクトのループ

const todos = [
  {
    id: 1,
    title: 'Go to school',
    completed: true
  },
  {
    id: 2,
    title: 'Go to museum',
    completed: true
  },
  {
    id: 3,
    title: 'Go shopping',
    completed: false
  }
]

for(let i = 0; i < todos.length; i++) {
  console.log(todos[i]);
}

if文を使って、ToDoの中で、タスクが完了しているもののタイトルだけ出力する

const todos = [
  {
    id: 1,
    title: 'Go to school',
    completed: true
  },
  {
    id: 2,
    title: 'Go to museum',
    completed: true
  },
  {
    id: 3,
    title: 'Go shopping',
    completed: false
  }
]

for(let i = 0; i < todos.length; i++) {
  let todo = todos[i];
  if (todo.completed === true) {
    console.log(todo.title);
  }
}

inとofも使えます

for(let i in todos) {
  let todo = todos[i];
  if (todo.completed === true) {
    console.log(todo.title);
  }
}

for(let i of todos) {
  let todo = todos[i];
  if (todo.completed === true) {
    console.log(todo.title);
  }
}