Skip to content

Instantly share code, notes, and snippets.

@kenmori

kenmori/immutableJS_Map.js

Last active Dec 27, 2016
Embed
What would you like to do?
【Immutable.jsの使い方】Immutable.js超入門~ReactでsetStateのプロパティ値に直接代入避ける~
//mapを作成
var map1 = Immutable.Map({
a: 1,
b:2,
c: 3
});]
//新しい配列やMapを返すところ。不変なオブジェクトを返す
//get() aの値を取得
map1.get('a'); //1
var map2 = map1.set('b', 50);
map2.get('b'); //50
//equals
map1.equals(map2) //false
var map3 = map1.set('b', 50);
map3.equals(map2); //true
map1.equals(map3) //false
//clone
var map1 = Immutable.Map({
a: 1,
b: 2,
c: 3
});
var clone = map1; map1.equals(clone) //true
//List 生成
var list1 = Immutable.List.of(1, 2);
typeof list1 //"object"
var qwerty = Immutable.List(['q','w','e','t','y']); //中身確認
qwerty.toArray() //["q", "w", "e", "t", "y"]
//push 追加
var list2 = list1.push(3, 4, 5);
list2.size; //5
//unshift 先頭に追加
var list3 = list2.unshift(0);
list3.size //6
//concat 連結
var list4 = list1.concat(list2, list3);
list4.size //13
//インデックス取得
list4.get(0); //1
//map処理
var alpha = Immutable.Map({a: 1, b:2, c: 3});
alpha.map((v, k)=> k.toUpperCase()).join(); //"A,B,C
//普通にObjectも扱える
var map1 = Immutable.Map({a: 1, b: 2, c: 3, b: 4});
var map2 = Immutable.Map({c: 10, a: 20, t: 30});
var obj = {d: 100, o: 200, g: 300};
var map3 = map1.merge(map2, obj);
// Map { a: 20, b: 2, c: 10, d: 100, t: 30, o: 200, g: 300 }
//map3とかでconsole.log()するとげーーってなる。中身知りたかったらtoObjectを使う
map3.toObject() [object Object] {
a: 20,
b: 4,
c: 10,
d: 100,
g: 300,
o: 200,
t: 30
}
//※ map3.toJSON()でもOK JSON.stringifyは直接シリアル化されたJSON文字列を作成するために、
//不変のデータ構造で使用することができる
//Seq
var myObject = {a:1, b:2, c:3};
Immutable.Seq(myObject).map(x => x * x).toObject();
//[object Object] { a: 1, b: 4, c: 9 }
//objectのkeyはいつでも文字列
var obj = {1: "one"};
Object.keys(obj); //["1"]
obj["1"] //"one"
obj<a href="http://kenjimorita.jp/wp-content/uploads/2016/04/828fc7fa56f77717b82dccf54df737cf.png">1</a> //"one" //ってことはこれも。。 obj[Object.keys(obj)]; //"one"
//プロパティへのアクセスはstring
var obj = {1: "one"};
var map = Immutable.fromJS(obj);
map.get("1")//"one"
map.get(1) //undefined
//ObjectとArray
var deep = Immutable.Map({a: 1, b: 2, c: Immutable.List.of(3, 4, 5)});
deep.toObject(); // { a: 1, b: 2, c: List [ 3, 4, 5 ] }
deep.toArray() // [ 1, 2, List [ 3, 4, 5 ] ]
deep.toJS() //安心する。。[object Object] { a: 1, b: 2, c: [3, 4, 5] }
JSON.stringify(deep) //"{"a":1,"b":2,"c":[3,4,5]}"
//ネストされたストラクチャー
//fromJS
var nested = Immutable.fromJS({a: {b: {c: [3, 4, 5]}}});
// Map { a: Map { b: Map { c: List [ 3, 4, 5 ] }
} }
//mergeDeep
var nested2 = nested.mergeDeep({a:{b:{d:6}}});
// Map { a: Map { b: Map { c: List [ 3, 4, 5 ], d: 6 } } }
//getIn
//aの中のbの中のdを取得している
nested2.getIn(['a', 'b', 'd']);
// 6
var nested3 = nested2.updateIn(['a', 'b', 'd'], value => value + 1);
//aの中のbの中のdに1を足している。。粛々とすぎる。。
// Map { a: Map { b: Map { c: List [ 3, 4, 5 ], d: 7 } } }
var nested4 = nested3.updateIn(['a', 'b', 'c'], list => list.push(6));
//aの中のbの中のcのリストに7をpushしている。。粛々とすぎる。。(2回目)
Map { a: Map { b: Map { c: List [ 3, 4, 5, 6 ], d: 7 } } }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment