昔作ったプログラムを見直してみると、効率の悪い書き方が散在していて、リファクタリングしたい欲望がどんどん湧いてくる。
そして、最近使い始めた便利な関数を使うことでその昔のコードがもっとスッキリと、キレイに、わかり易く、コーディングできるのだが、ES6対応で、仕事で使うのを諦めるケースも少なくないが、新しい関数を知って置かなければ今後おいていかれることは明確なので、新旧を同時に進まなくてはいけないのは、エンジニアの宿命なのかもしれない。
javascriptにおける配列操作は、他の言語ほど便利関数が整っているわけではないが、ES6では便利な機能があって、使ってみたい欲望にかられる。
連想配列を結合できるObject.assignなどは、なんで旧JSになかったのかと言うぐらい標準機能的な要素なのだが、とりあえず、スマホ専用WEBでないと使え無さそうだが、ある程度調査しておくことにする。
Object.assignの使い方
複数の連想配列が存在している時に、それを連結することができる機能なのだが、少し気をつけなければ行けない点があるようだ。
var a1 = {a:1,b:2,c:3};
var b1 = {d:4,e:5,f:6};
Object.assign(a1 , b1);
console.log(a1);
> {a:1,b:2,c:3,d:4,e:5,f:6}
非常にシンプルな使い方なのだが、a1変数が上書きされている点に注意してもらいたい。
ちなみに、b1変数は、変更がされない。
使い込んでみる
さらに、連想配列の変数は３つでも４つでもつなげてくれる。
var a1 = {a:1,b:2,c:3};
var b1 = {d:4,e:5,f:6};
var c1 = {g:7,h:8,i:9};
Object.assign(a1 , b1 ,c1);
console.log(a1);
> {a: 1, b: 2, c: 3, d: 4, e: 5, f:6, g:7, h:8, i:9}
結果はa1の上書きで行われるので、書き換えられたくない場合は、新たな変数にa1を代入してから行う必要がある。
同じkey値のデータがある場合、連想配列変数の後ろに指定するものが優先して上書きするので、以下のような結果になる。
var a1 = {a:1,b:2,c:3};
var b1 = {d:4,e:5,f:6};
var c1 = {g:7,h:8,a:9};
Object.assign(a1 , b1 ,c1);
console.log(a1);
> {a:9,b:2,c:3,d:4,e:5,f:6,g:7,h:8}
興味深いのは、連想配列ではない、配列も適用できるようだ。
ただ、エラーが返らないというだけで、機能をしっかり理解しておく必要がある。
var a1 = [1,2,3];
var b1 = [4,5,6];
Object.assign(a1 , b1);
console.log(a1);
> [4, 5, 6]
上記の例は、a1とb1を連結させてみたのだが、a1にb1の値がそのまま上書きされてしまっている。
これは、どうやらObject.assign機能は、key=value形式での配列上書き機能という事で、通常の配列はkey値を順番値として使われているため、以下のような処理になっているようだ。
var a1 = {0:1 , 1:2 , 2:3};
var b1 = {0:4 , 1:5 , 2:6};
key値を後ろのデータで上書きすると認識していれば、以下のように使うことは可能かも・・・
var a6 = [0,0,0,1,2,3];
var b6 = [4,5,6];
Object.assign(a6 , b6);
console.log(a6);
> [4, 5, 6, 1, 2, 3]
・・・でも、非常に使いづらいので、配列通しであれば、concatを使ったほうがいいだろうな。
var a5 = [1,2,3];
var b5 = [4,5,6];
var res = a5.concat(b5);
console.log(res);
> [1, 2, 3, 4, 5, 6]
通常配列と連想配列を連結すると・・・
どうやら、配列と連想配列も連結できるっぽい。
※なんとなく想像できるけど
var a1 = {a:1,b:2,c:3};
var b1 = [4,5,6];
Object.assign(a1 , b1);
console.log(a1);
> {0: 4, 1: 5, 2: 6, a: 1, b: 2, c: 3}
予想通り、返り値は連想配列になって、配列のkeyが順番値になっているのがわかる。
少し気になったので、a1とb1の順番を変えてみるとどうなるのか・・・
var a1 = {a:1,b:2,c:3};
var b1 = [4,5,6];
Object.assign(b1 , a1);
console.log(a1);
> {a: 1, b: 2, c: 3}
おーまいが！！！！！！！！！
これはアウトですね。
配列と連想配列をマージするというケースがどういう時に発生するのかはいまいち不明だが、こうした結果をよく知っておかなければ、不具合に繋がりかねないね。
ちなみに、配列と連想配列は、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
0 件のコメント:
コメントを投稿