forEach文の添字

Question

  var data = [1,2,3,4,5];
  data.forEach(function(v,i,a){a[i] = v + 1;});
  console.log(data);  //[2,3,4,5,6]

この場合のiがよくわかりません
添字ということは確かなのですが、定義されてなくても機能しているので不思議に思いました。
どのような仕様なのか教えていただきたいです。

Answer 1

「定義されなくても」という意味がわかりませんが、function(v,i,a)の所で引数として宣言されています。
2番目の引数が、インデックスだというのは、foEachの意味として定義されています。
リファレンスには、

callback は、要素の値、要素のインデックス、走査されている Array オブジェクトという 3 つの引数をともなって呼び出されます。

と書いてありますね。

Comments

[退会済みユーザー]

上記コードで出力された配列は
2,3,4,5,6でインデックスは左から1,2,3,4,5になっていて
もしiが走査ごとに1足されなかったら2,3,4,5,6のインデックスはすべてiになりますよね？
for in 文だとi++なのにforEach文だと何もしなくていいのは仕様なのでしょうか？

[trick]

要素のインデックスになっているので
単純にインデックスが使用されていると思いますよ

[otn]

> for in 文だとi++なのにforEach文だと何もしなくていいのは仕様なのでしょうか？
forEachのリファレンスを通読することを強くお勧めします。

Answer 2

Array.prototype.forEach() - JavaScript | MDN https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

callback は、要素の値、要素のインデックス、走査されている Array オブジェクトという 3 つの引数をともなって呼び出されます。

forEach()からの返り値の第二引数にすぎません。

Comments

[退会済みユーザー]

ごもっともです。
その引数が走査ごとに1足されるという仕様でなければ
出力された[2,3,4,5,6]はすべて同じインデックスになってしまうと思うんですが..

[s104]

第二引数は、今捜査している要素のインデックスを返しているだけです。

1を足しているのはあなたの例示したv+1という部分のコードです。
forEachは今捜査している要素の、配列におけ？インデックスを返しているだけで、1を足すという処理をしているわけではありません

トレース例を出せば、最初の要素は
a[0] = 1 + 1
になり、出力結果の最初の要素が2になります。
次の要素の処理が始まり、
a[1] = 2 + 1
と、コールバックの処理が終わるたび次の要素の処理が行われます。

要素の値vと同じように、コールバックが実行される度に新しい引数を渡してきているのでiだけ同じ値が渡され続けることはありません

[退会済みユーザー]

あ～！！！！
完璧な回答ありがとうございます！！！
もともとの配列のインデックスだったのですね！
ありがとうございます！

Answer 3

var data = [1,2,3,4,5];
data.forEach(function(v,i,a){a[i] = v + 1;});
console.log(data);

これは、以下のコードと同じような処理を記述したものです。

var data = [1,2,3,4,5];
var fn = function(v,i,a){a[i] = v + 1;}
fn(data[0],0,data);
fn(data[1],1,data);
fn(data[2],2,data);
fn(data[3],3,data);
fn(data[4],4,data);
console.log(data);

data配列の要素の先頭から全てに対して、コールバック関数を実行します。
vやiにあたる部分が0から始まって勝手にインクリメントされているのは、それが仕様だからです。

Comments

[退会済みユーザー]

vがインクリメントしているのは仕様ではないですよね？
v + 1と書いてあるのですから

[hirohiro]

書き方が悪かったかも知れません。
fn(data[0],0,data);
fn(data[1],1,data);
.....
このように要素全てに対して順番にコールバック関数か実行されるのが仕様です。

Answer 4

変化したのは「値」であって「インデックス」は変化していないのですが、その辺りを誤解していませんか？

var data = [1, 2, 3, 4, 5];

data.forEach(function (value, index, array){
  array[index] = {index: index, value: value + 1};
});

console.log(data);  // [{index: 0, value: 2}, {index: 1, value: 3}, {index: 2, value: 4}, {index: 3, value: 5}, {index: 4, value: 6}]

• ECMAScript Language Specification - ECMA-262 Edition 5.1
• Array.prototype.forEach() - JavaScript | MDN

Comments

[退会済みユーザー]

そういうことですか！
ではなぜindexとarrayがあるのでしょうか？

[think49]

仕様としかいえませんが、なぜ index, array があることが疑問なのでしょうか。
「自分の想定が～であって実際には～なっているのはなぜでしょうか」のように質問すると疑問に思っている部分が具体化されて回答を得やすいと思います。
(親コメントにMDN、仕様書へのリンクを貼っておきました)

Answer 5

... どのような仕様なのか...

google で "javascript forEach" などで検索してみると、仕様を説明したページを見つけることができます。

例；

これらのページの説明を読んで疑問があれば、ここへのコメントか、新たな質問をしてください。
より突っ込んだ回答を得ることができると思います。

Comments

[退会済みユーザー]

もちろん見ました。
でもiが走査ごとに1足されるとは書いてありませんでした。
これは仕様なのですか？

[katoy]

> でもiが走査ごとに1足されるとは書いてありませんでした。
はい。かいてありませんし、１足されるわけではありません。
参考；
http://js.studio-kingdom.com/javascript/array/for_each
にあったコードを改変したものを以下に示します。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
var data = [1, 2, 3, 4, 5];
data.forEach(function(v,i,a){console.log(i)});
console.log("");

data = [1, 2, , 4, 5];
// インデックス番号2はメンバでは無いため、
// 対象になりません。
data.forEach(function(v,i,a){console.log(i)});
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
これの実行結果は次のようになります。
0
1
2
3
4

0
1
3
4

[退会済みユーザー]

ではなぜiがあるのでしょうか？

[katoy]

> ではなぜiがあるのでしょうか？

↑で紹介したページには次のように書いてあります。
> callbackは、下記の3つの引数を使用して実行されます。
> 要素の値
> 要素のインデックス
> 巡っている配列

仕様で i を参照できるようにしているのです。
配列の要素を forEach で操作するときに, 処理内容によっては 要素の値 の値だけで済むこともありますが、要素のインデックス, 巡っている配列 が必要にあることもあるので、このような仕様にしていると思われます。

デバッグの為に配列の内容を forEach で他の配列にコピーをしたいとします。
その場合は、 index 値も必要になります。
---------------------------
var srcArray = [1, ,3, 4];
var copyArray = [];

srcArray.forEach(function(v,i,a){copyArray[i] = v});
console.log(copyArray);

copyArray = [];
srcArray.forEach(function(v,i,a){copyArray.push(v)});
console.log(copyArray);
-------------------------
実行結果は次のようになります。
[ 1, , 3, 4 ]
[ 1, 3, 4 ]