2
1

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 5 years have passed since last update.

JavaScript for文のindex指定方法

Last updated at Posted at 2017-07-30

VB系やDelphi系をやってきたので、JavaScriptなどのC/C++系のfor文を書くときにループ値の指定方法がいつも、少し引っかかり迷いが生じるのでメモしておきます。

index値が、0から長さ-1までループしてもらいたいときの書き方で単純なものは次の通りです。

i++ や i-- は JsLintに敬意をはらい、使わないようにしてみました。

  var str = 'abc';
  for (var i = 0; i <= str.length - 1; i += 1) {
    console.log(str[i]);
  }
  //a b c と順に出力される

しかし、C系のfor文の言語特性だと思いますが、ループごとにforのループの終了判定の部分

i <= str.length - 1

これが評価されるために、毎度、str.lengthを取得する処理が発生するのでループが少し遅くなります。

なので、高速化を重視して最初にループ回数は変数に代入しておく方がよいとされています。

  var str = 'abc';
  for (var i = 0, il = str.length - 1; i <= il; i += 1) {
    console.log(str[i]);
  }
  //a b c と順に出力される

これはこのようにも書かれます。

  var str = 'abc';
  for (var i = 0, il = str.length; i < il; i += 1) {
    console.log(str[i]);
  }
  //a b c と順に出力される

こうすると、ループの終了値が読み取りにくいので、いまだに自分は少しモヤっとした気分になりますが、C/C++/Java系の人にとっては、可読性が低いということもないのでよく見かけるコードですので、読めるようになっておくといいでしょう。

逆順になると、このように書くとよいです。

  var str = 'abc';
  for (var i = str.length - 1; 0 <= i; i -= 1) {
    console.log(str[i]);
  }
  //c b a と順に出力される

また、工夫してforの構文を利用すると、次のようにもかけます。

  for (var i = str.length; i--;) {
    console.log(str[i]);
  }
  //c b a と順に出力される

動作確認した全文は次のとおり。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title></title>
<script>

  var str = 'abc';

  for (var i = 0; i <= str.length - 1; i += 1) {
    console.log(str[i]);
  }
  //a b c と順に出力される

  for (var i = 0, il = str.length - 1; i <= il; i += 1) {
    console.log(str[i]);
  }
  //a b c と順に出力される

  for (var i = 0, il = str.length; i < il; i += 1) {
    console.log(str[i]);
  }
  //a b c と順に出力される

  for (var i = str.length - 1; 0 <= i; i -= 1) {
    console.log(str[i]);
  }
  //c b a と順に出力される

  for (var i = str.length; i--;) {
    console.log(str[i]);
  }
  //c b a と順に出力される

</script>
</head><body>
</body></html>
2
1
4

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
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?