配列の方がReactで使いやすいけど、Objectの方が検索しやすい。

react-routerのexampleのソースでは、データを配列で持っていて
検索用にマップに詰め直しているかんじです。
なんで、そんなメンドクサイことをやっているのだろうと疑問に
おもっていたのですが。
データを初めからObjectに詰めて使えば、検索しやすいのにと。

github.com

Javascript配列はmap関数が使えてReact.jsで扱うには扱いやすいのですが、
Objectではmapが使えないというのが理由だろうなと気づきました。

その辺を楽にするライブラリがおそらくあるのだろう。
なんか、色々やり方があるような感じですね。

lodashというのがあるのかぁ。

ameblo.jp

nodeを起動して、ポチポチ、学んでみる。

# 検索、削除。

$ node
> var __ = require('lodash');
> var datas = [{name:"dokechin", items: [{name: "book"},{name:"pen"}]}]
> __.filter(datas, {name: "dokechin"});
[ { name: 'dokechin',
    items: [ [Object], [Object] ] } ]
> __.remove(datas, {name: "dokechin"});
[ { name: 'dokechin',
    items: [ [Object], [Object] ] } ]
> datas
[]

# 追加(lodash使わない）

> datas.push({name: "hage", items  : [{name: "book"},{name:"pen"}]});

# ソート

>  datas = [{name:"zokechin", items: [{name: "book"},{name:"pen"}]},{name:"dokec
hin", items : [{name: "book"},{name:"pen"}]}];
> var sorteddatas = __.sortByOrder(datas,['name'],['asc']);
undefined
> sorteddatas;
[ { name: 'dokechin',
    items: [ [Object], [Object] ] },
  { name: 'zokechin',
    items: [ [Object], [Object] ] } ]
> datas;
[ { name: 'zokechin',
    items: [ [Object], [Object] ] },
  { name: 'dokechin',
    items: [ [Object], [Object] ] } ]

# 更新(1)

>  var datas = [{name:"zokechin", items: [{name: "book"},{name:"pen"}]},{name:"dokechin", items : [{name: "book"},{name:"pen"}]}];
> var data = __.remove(datas, {name: "dokechin"})[0];
> data.name ="rokehin";
> var item = data.items.pop();
> item.name = "sushi";
> data.items.push(item);
> datas.push(data);
> datas;
[ { name: 'zokechin',
    items: [ [Object], [Object] ] },
  { name: 'rokehin',
    items: [ [Object], [Object] ] } ]
> datas[1].items;
[ { name: 'book' }, { name: 'sushi' } ]

# 更新(2)　なんかこっちの方が読みやすいかも

> var datas = [{name:"zokechin", items: [{name: "book"},{name:"pen"}]},{name:"do
kechin", items : [{name: "book"},{name:"pen"}]}];
undefined
> var data = __.remove(datas, {name: "dokechin"})[0];
undefined
> __.set(data,'name','rokehin');
{ name: 'rokehin',
  items: [ { name: 'book' }, { name: 'pen' } ] }
> __.set(data,'items[1].name','sushi');
{ name: 'rokehin',
  items: [ { name: 'book' }, { name: 'sushi' } ] }
> datas.push(data);
2
> datas;
[ { name: 'zokechin',
    items: [ [Object], [Object] ] },
  { name: 'rokehin',
    items: [ [Object], [Object] ] } ]
> datas[1].items;
[ { name: 'book' }, { name: 'sushi' } ]

> __.set(data,'items[1].name','sushi');
のところを
> __.set(data,'items[last()].name','sushi');

みたいに設定したいのですが、JSONPAthみたいなものがあると思われるが、やり方が分からない。
lodashのsetにはJSONPATHは設定できないのかな。。

stackoverflow.com