質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

javascript 連想配列同士の全要素を掛け合わせについて

mmsan1110
mmsan1110

総合スコア2

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

4回答

0グッド

1クリップ

379閲覧

投稿2022/11/30 15:31

編集2022/11/30 15:36

前提

javascript初心者です。
javascriptで連想配列同士の全要素をかけ合わせたいのですが、思っているものと違う結果になってしまいます。

実現したいこと

var hoge01 = [{aa:2},{aa:4}];
var hoge02 = [{aa:2},{aa:4},{aa:6},{aa:8}];
hoge01を基準でhoge02を加算したい。
求めている結果
0:[4,6,8,10]
1:[6,8,10,12]

該当のソースコード

var hoge01 = [{aa:2},{aa:4}];
var hoge02 = [{bb:2},{bb:4},{bb:6},{bb:8}];
var add = [];

hoge01.map((value1,index1) => {
hoge02.map((value2,index2) => {

add = value1.aa + value2.bb;
});
});
console.log(add); //12 

試したこと

map関数を多重化することで、最終の結果のみ表示されます。
hoge01[1]aa:4 + hoge[3]bb:8 = 12が出力さていると思います。

console.log(value1.aa + value2.aa)で確認すると、計算式通り加算はされています。
0: 4
1: 6
2: 8
3: 10
4: 6
5: 8
6: 10
7: 12

以下の出力にするために、お知恵を拝借いただけないでしょうか。

0:[4,6,8,10]
1:[6,8,10,12]

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答4

1

ベストアンサー

コード例

javascript

1const hoge01 = [{aa:2},{aa:4}]; 2const hoge02 = [{bb:2},{bb:4},{bb:6},{bb:8}]; 3 4// 2次元配列を生成する場合 5const adds = hoge01.map(obj01 => hoge02.map(obj02 => obj02.bb + obj01.aa)); 6console.log(adds); // [[4, 6, 8, 10], [6, 8, 10, 12]] 7 8// 連想配列を生成する場合 9const adds2 = {}; 10hoge01.forEach((obj01, index) => adds2[index] = hoge02.map(obj02 => obj02.bb + obj01.aa)); 11console.log(adds2); // {'0': [4, 6, 8, 10], '1': [6, 8, 10, 12]}
2次元配列を生成する場合
  • 最終的に出来上がる配列の要素数は2個ですから、hoge01に対して.map()を使います。
  • その中身の要素は要素数が4個の配列ですから、hoge02に対して.map()を使います。
  • hoge02の要素の値をどのように書き換えるかというと、
    • hoge02の要素それぞれ、bb + aaの値に書き換えるわけです。
    • よって、hoge02.bb + hoge01.aaといった内容をhoge02.map()で処理をします。
連想配列を生成する場合
  • 基本的な考え方は「2次元配列を生成する場合」と同じです。
  • ただし、hoge01.map()ではなく.forEach()を使い繰り返し処理を行います。
    • 用意した空のオブジェクト(adds2)に、インデックス番号と、hoge02.bb + hoge01.aaしてできあがった配列を代入していきます。

投稿2022/11/30 16:39

編集2022/11/30 17:00
Cocode

総合スコア2125

spoofy_dragon👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

mmsan1110

2022/12/01 07:36

丁寧な回答ありがとうございます。 2次元生成のコードで解決いたしました。 ありがとうございました。

0

mapメソッドに渡す関数の引数で分割代入を使うと、足し算する部分を value1.aa + value2.bb と書いていたのを aa + bb と簡単に書けます。

javascript

1var hoge01 = [ { aa: 2 }, { aa: 4 }]; 2var hoge02 = [ { bb: 2 }, { bb: 4 }, { bb: 6 }, { bb: 8 }]; 3 4var add = hoge01.map(({ aa }) => hoge02.map(({ bb }) => aa + bb)); 5 6console.log(add[0]); // [4,6,8,10] 7console.log(add[1]); // [6,8,10,12]

投稿2022/12/01 06:02

退会済みユーザー

退会済みユーザー

総合スコア0

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

mmsan1110

2022/12/01 07:37

回答ありがとうございます。 今後の参考にさせていただきます。

0

javascript

1var hoge01 = [{aa:2},{aa:4}]; 2var hoge02 = [{bb:2},{bb:4},{bb:6},{bb:8}]; 3var add = {} 4hoge01.map((value1, index1) => { 5 add[index1] = hoge02.map(value2 => value1.aa + value2.bb) 6}); 7console.log(add) 8 9# { '0': [ 4, 6, 8, 10 ], '1': [ 6, 8, 10, 12 ] }

投稿2022/11/30 16:40

melian

総合スコア16252

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

mmsan1110

2022/12/01 07:37

回答ありがとうございます。 今後の参考にさせていただきます。

0

js

1var hoge01 = [{aa:2},{aa:4}]; 2var hoge02 = [{bb:2},{bb:4},{bb:6},{bb:8}]; 3var add = hoge01.reduce((p1,c1)=>{ 4 p1.push( 5 hoge02.reduce((p2,c2)=>{ 6 p2.push(c1.aa + c2.bb); 7 return p2; 8 },[]) 9 ); 10 return p1; 11},[] ); 12 13console.dir(add);

https://jsfiddle.net/z0L94agb/


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

投稿2022/11/30 15:49

kei344

総合スコア69020

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

mmsan1110

2022/12/01 07:37

回答ありがとうございます。 今後の参考にさせていただきます。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。