javascriptの複数の連想配列を連結するObject.assign

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

昔作ったプログラムを見直してみると、効率の悪い書き方が散在していて、リファクタリングしたい欲望がどんどん湧いてくる。
 

そして、最近使い始めた便利な関数を使うことでその昔のコードがもっとスッキリと、キレイに、わかり易く、コーディングできるのだが、ES6対応で、仕事で使うのを諦めるケースも少なくないが、新しい関数を知って置かなければ今後おいていかれることは明確なので、新旧を同時に進まなくてはいけないのは、エンジニアの宿命なのかもしれない。
 

javascriptにおける配列操作は、他の言語ほど便利関数が整っているわけではないが、ES6では便利な機能があって、使ってみたい欲望にかられる。
 

連想配列を結合できるObject.assignなどは、なんで旧JSになかったのかと言うぐらい標準機能的な要素なのだが、とりあえず、スマホ専用WEBでないと使え無さそうだが、ある程度調査しておくことにする。

Object.assignの使い方

複数の連想配列が存在している時に、それを連結することができる機能なのだが、少し気をつけなければ行けない点があるようだ。
 

 

非常にシンプルな使い方なのだが、a1変数が上書きされている点に注意してもらいたい。
 

ちなみに、b1変数は、変更がされない。
 

使い込んでみる

さらに、連想配列の変数は3つでも4つでもつなげてくれる。
 

 

結果はa1の上書きで行われるので、書き換えられたくない場合は、新たな変数にa1を代入してから行う必要がある。
 

同じkey値のデータがある場合、連想配列変数の後ろに指定するものが優先して上書きするので、以下のような結果になる。
 

 

興味深いのは、連想配列ではない、配列も適用できるようだ。
ただ、エラーが返らないというだけで、機能をしっかり理解しておく必要がある。
 

 

上記の例は、a1とb1を連結させてみたのだが、a1にb1の値がそのまま上書きされてしまっている。
これは、どうやらObject.assign機能は、key=value形式での配列上書き機能という事で、通常の配列はkey値を順番値として使われているため、以下のような処理になっているようだ。
 

 

key値を後ろのデータで上書きすると認識していれば、以下のように使うことは可能かも・・・
 

 

・・・でも、非常に使いづらいので、配列通しであれば、concatを使ったほうがいいだろうな。
 

通常配列と連想配列を連結すると・・・

どうやら、配列と連想配列も連結できるっぽい。
※なんとなく想像できるけど
 

 

予想通り、返り値は連想配列になって、配列のkeyが順番値になっているのがわかる。
 

少し気になったので、a1とb1の順番を変えてみるとどうなるのか・・・
 

 

おーまいが!!!!!!!!!
 

これはアウトですね。
 

配列と連想配列をマージするというケースがどういう時に発生するのかはいまいち不明だが、こうした結果をよく知っておかなければ、不具合に繋がりかねないね。
 

ちなみに、配列と連想配列は、javascriptではtypeofで調査すると、”object”と返ってくるだけだので、lengthプロパティを持っているかどうかで見極めて判断するようにするといいだろう。
 

たまに、こういう機能を深堀り調査するのも楽しいね。
この記事が何かの参考になってくれるといいね。

参考ページ

https://qiita.com/yujilow1220/items/978b811a9910a9516bb4
 

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
 

https://caniuse.com/#search=Object.assign
 

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です