javascript forEach

Question

forEachを使って面積を求めareasという新しい配列に格納したいです。
どうしてもエラーになるのですがどこがおかしいのか分かりません。わかる方がいましたら教えてもらいたいです

var images = [
  { height: 10, width: 30 },
  { height: 20, width: 90 },
  { height: 54, width: 32 }
];
var areas = [];

images.forEach(function(image){
    var aaa = image.height*image.width;
    areas[image] += aaa;
});

Comments

[kei344]

「エラーになる」では無く、エラー文を具体的にコードブロックで質問文に追記してください。http://eng-entrance.com/javascript-display-error

Answer 1

表題のようにforEachを使用しなければならないケースではこうなります。

var images = [
  { height: 10, width: 30 },
  { height: 20, width: 90 },
  { height: 54, width: 32 }
];
var areas = [];

images.forEach(function(image){
    var aaa = image.height*image.width;
    areas.push(aaa);
});

ですが、areasを作るという目的ならば、mapの方がより適しています。

var images = [
  { height: 10, width: 30 },
  { height: 20, width: 90 },
  { height: 54, width: 32 }
];
var areas = images.map(function(image){
  return image.height*image.width;
});

// ES2015のアロー関数を使えば1行でスマートに書ける
var areas = images.map(image => image.height * image.width);

mapは数学用語の写像であり、配列の各々に同じ関数を適用して値を取り出したものという意味があります。
実行元の配列と同じ要素数の配列が帰ってくることが保証されていますので、

エンジニアは値の加工を行う場合はmapを使うケースが多いのです。
慣れれば１行で済むケースが多いことも魅力ですね。

forEach自体の戻り値は何もないので、
基本的にconsole.logやAjax等の実行して終わりの処理に利用すべきです。
なので他のエンジニアとコードを共有する時に、mapの方がふさわしい場面でforEachを用いると読みづらいと言われるケースがあります。

Answer 2

エラーは出ないと思いますが、どういうエラーですか？
プログラムとしては、areas[image] += aaa;が意味不明ですね。何をしたいのでしょうか？

Comments

[退会済みユーザー]

areasという配列に計算の結果を入れたいのですがどうしたらいいのでしょうか？

[退会済みユーザー]

すいません。エラーは出てなかったです。

[otn]

> reasという配列に計算の結果を入れたいのですがどうしたらいいのでしょうか？
areas.push(aaa);
でしょうか。

[退会済みユーザー]

ありがとうございます。できました

Answer 3

ご掲示のコードはエラーにならないようですが…。

areas[image] += aaa;

• オブジェクトのプロパティに Object 型を指定しても、プロパティ名は String 型に変換されます(Map や WeakMap を使えば、Object型をキーに持てます)
• undefined を加算したら、NaN 値になります

Re: kkk_tt さん