Javascriptで2つの配列を1つの連想配列{Key:Value}に変換する方法を教えてください。

Question

valueAとvalueBの各配列をvalueCの連想配列にしたいです。

valueA = ['1','2','3']
valueB = ['A','B','C']
↓
valueC ={1:A , 2:B , 3:C}

なぜ、このようにしたいかと言うと以下のソースコードの**<td>と<th>**を交互に出力したいです。

<tr>
<% valueA.forEach(function (value) { %>
<th><%= value %></th>
<% }); %>

<% valueB.forEach(function (value) { %>
<td><%- value %></td>
<% }); %>
</tr>

Answer 1

こんにちは
配列やオブジェクトの操作で便利なライブラリ lodash の _.zipObject を使うと、以下によって valueC を得ることが出来ます。

const valueC = _.zipObject(valueA, valueB)

• 動作確認用codepen: https://codepen.io/jun68ykt/pen/ExPRBmN

補足

ご質問に

以下のソースコードの<td>と<th>を交互に出力したいです。

とありましたが、これを実現するには、以下のような方法もあるかと思います。こちらはlodashの _.zip を使います。

const valueC = _.zip(valueA, valueB).map(([a, b]) => `<th>${a}</th><td>${b}</td>`)

上記によって、valueCに、以下のような配列が得られます。

["<th>1</th><td>A</td>", "<th>2</th><td>B</td>", "<th>3</th><td>C</td>"]

• 動作確認用codepen: https://codepen.io/jun68ykt/pen/Yzwvora

この valueC の要素を、<tr>の中で結合してひとつの文字列にします。

<tr>
<%= valueC.join('') %>
</tr>

Comments

[komurojun]

ご回答ありがとうございます。
lodashを使うと簡単に出来るのですね。勉強になりました。
ただ、今回はこれだけの為に lodashを入れたくないなと思いましたので見送らせていただきます。

[jun68ykt]

どういたしまして???? 参考になれば幸いです。

Answer 2

valueC = valueA.reduce((x,y,z)=>(x[y]=valueB[z],x),{});

とか

valueC = Object.fromEntries(valueA.map((x,y)=>[x,valueB[y]]));

Comments

[komurojun]

ご回答ありがとうございます。
自分の環境だとエラーで上手く値がとれませんでした。

Answer 3

このようにしたいかと言うと以下のソースコードの<td>と<th>を交互に出力したいです。

valueCを作らず、素直に、インデックスを順番に回して書く方がいいと思います。
RubyやPythonのzipに相当する関数が無いので、同じ事をしようとすると、結局2つめの配列にはインデックスによるアクセスが必要になります。

また、valueCを作ってからループを回す場合は、意図通りの順番が保証されるかどうか仕様を確認しましょう。MDNの「for in」のページには「順不同」と書いてあります。

Comments

[komurojun]

単純に「for」で回す事でそれぞれ思い通りに取得出来ました。ありがとうございます。

<% for (let i = 0; i < valueA.length; i++) { %>
<th><%- valueA[i] %></th>
<td><%- valueB[i] %></td>
<% } %>