複数の連想配列に新しいキーを追加したい

Question

Javascriptで、下記のような複数の連想配列があるとします。

const hoge = [
{name: fish, age: 32},
{name: bear, age:10},
{name: rabbit, age: 22}
]

この一つ一つのオブジェクトに新たに、bloodtype: というキーを追加し、以下のような連想配列を作りたいのですが、良い方法はありますでしょうか。

const hoge = [
{name: fish, age: 32, bloodtype: A},
{name: bear, age:10, bloodtype: B},
{name: rabbit, age: 22, bloodtype: AB}
]

Answer 1

こんにちは
bloodtype の値がどのように与えられるのかにもよりますが、たとえばhoge と長さが同じで、要素が血液型を表す文字列の

const bloodtypes = ["A", "B", "AB"];

という配列で与えられるものとすれば、以下の hoge

const hoge = [
  { name: "fish", age: 32 }, 
  { name: "bear", age: 10 }, 
  { name: "rabbit", age: 22 }
];

の各要素に、bloodtype を追加したオブジェクトを要素とする配列 hoge2 は、以下のようにして得られます。

const hoge2 = hoge.map((e, i) => ({ ...e, bloodtype: bloodtypes[i] }));

• 動作確認用 CodePen: https://codepen.io/jun68ykt/pen/MWambQr?editors=0012

上記は、hoge の要素に直接 bloodtypeを追加するのではなく、hogeの要素のコピーとなる新たなオブジェクトを作ってbloodtypeを追加し、それを hoge2 の要素にしています。

hogeの要素に bloodtype を追加してよいのでしたら以下です。

hoge.forEach((e, i) => { 
  e.bloodtype = bloodtypes[i]; 
});

• 動作確認用 CodePen: https://codepen.io/jun68ykt/pen/xxwdRzm?editors=0012

各要素の血液型の与えられ方が、冒頭のようなものではない場合はコメントいただくか、ご質問に追記いただければと思います。

Comments

[tarako328]

ご回答ありがとうございます。
とてもわかりやすく助かりました、、！

ややこしくて大変申し訳ないのですが、上記の連想配列はそのままで、blootypesの値をcheckedに変え（値の部分はBoolean値）、defaultがfalseの場合でしたらどうなりますでしょうか？

[jun68ykt]

コメントありがとうございます。

checked が以下のような配列で与えられたとします。

const checked = [true, ,false];

すなわち長さは3 ですが、２番目の要素がない場合です。このとき checked[1] は true でも false でもなく undefiend ですが、hoge　の要素にcheckedを追加するときに、 checked配列の値としてはundefined である２番目のオブジェクトには、checked プロパティとして false を入れるには、以下のようにします。

const hoge2 = hoge.map((e, i) => ({ ...e, checked: checked[i] || false }));

動作確認用サンプル： https://codepen.io/jun68ykt/pen/qBOmRbW?editors=0012

上記のコードで、 "|| false" 　によって、デフォルトが false になります。

[jun68ykt]

または以下でもよいです。

const hoge2 = hoge.map((e, i) => ({ ...e, checked: Boolean(checked[i]) }));

動作確認用サンプル：https://codepen.io/jun68ykt/pen/YzyVNxG?editors=0012

上記は以下を使っています。

Boolean(true) : true
Boolean(false) : false
Boolean(undefined) : false

[AkitoshiManabe]

コメントでの追加の命題は３値を２値にすると情報喪失しちゃう点を考慮すべきですね。
本題のとおり、bloodtype の「値」を持たせたい場合、複数候補から択一となるラジオボタン/セレクトメニューを使うべき事例に感じました。
（JavaScriptの質問とは異なるため、コメント欄で失礼します）

[tarako328]

ご回答くださった方、ありがとうございました。
大変わかりやすかったです！うまく実装できました。

[jun68ykt]

@AkitoshiManabeさん
コメントありがとうございます。

> ３値を２値にすると情報喪失しちゃう点を考慮すべきですね。

そうですね。明確に異なる3値で管理しなければならない変数があったときに、それに入る値として

true, false, undefined

を、異なる３値とみなしてどうにかやり通そうとして、上手くいけばそれは結果オーライではありますが、ちょっと気を抜くと、false　のときとundefined のときを同じ場合として扱ってしまうコードをうっかり書いてしまっていて、不可解な挙動をするUIになってしまい、憂鬱なデバッグをする羽目になることは、ままありますね。

> ラジオボタン/セレクトメニューを使うべき事例に感じました。

あー、そういう感じしますね。
質問者さんには、false と undefined をうまく区別をつけて切り抜けてほしいです。

[jun68ykt]

@ tarako328さん
どういたしまして????

> うまく実装できました。

とのことでよかったです????