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

Question

前提

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]

Answer 1

コード例

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

// 2次元配列を生成する場合
const adds = hoge01.map(obj01 => hoge02.map(obj02 => obj02.bb + obj01.aa));
console.log(adds); // [[4, 6, 8, 10], [6, 8, 10, 12]]

// 連想配列を生成する場合
const adds2 = {};
hoge01.forEach((obj01, index) => adds2[index] = hoge02.map(obj02 => obj02.bb + obj01.aa));
console.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してできあがった配列を代入していきます。

Comments

[mmsan1110]

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

Answer 2

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

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

var add = hoge01.map(({ aa }) => hoge02.map(({ bb }) => aa + bb));

console.log(add[0]);  // [4,6,8,10]
console.log(add[1]);  // [6,8,10,12]

Comments

[mmsan1110]

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

Answer 3

var hoge01 = [{aa:2},{aa:4}];
var hoge02 = [{bb:2},{bb:4},{bb:6},{bb:8}];
var add = {}
hoge01.map((value1, index1) => {
    add[index1] = hoge02.map(value2 => value1.aa + value2.bb)
});
console.log(add)

# { '0': [ 4, 6, 8, 10 ], '1': [ 6, 8, 10, 12 ] }

Comments

[mmsan1110]

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

Answer 4

var hoge01 = [{aa:2},{aa:4}];
var hoge02 = [{bb:2},{bb:4},{bb:6},{bb:8}];
var add = hoge01.reduce((p1,c1)=>{
  p1.push(
    hoge02.reduce((p2,c2)=>{
      p2.push(c1.aa + c2.bb);
      return p2;
    },[])
  );
  return p1;
},[] );

console.dir(add);

https://jsfiddle.net/z0L94agb/

---

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

Comments

[mmsan1110]

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