immutable
什么是Immutable Data,就是一旦被创建,它就不可变的一种数据结构。
对Immutable对象的任何操作(添加、修改、删除)都会生成一个新的Immutable对象。
Immutable的实现原理是——Pressistent Data Structrue(持久化数据结构),也就是使用旧数据创建新数据的时候,旧数据不变并且可以使用。
git网站: https://immutable-js.github.io/immutable-js/
安装命令:npm install immutable
常见的数据类型
Map:键值对集合,对应Object。
List:可重复的有序列表。对应Array。
Set:不重复并且无序的列表。
常见API
Immutable.fromJs(),把一个js对象转化为Immutable对象。
Immutable.toJs(),把一个Immutable对象转化为js对象。
使用 Immutable.is() 函数或 .equals() 方法来确定值相等,而不是确定对象引用标识的 === 操作符
Map()用来创建Map类型的Immutable对象
Map({ a: 1, b: 2, c: 3, d: 4 });
console.log(Map.of('key1','value1','key2','value2','key3','value3').toJS()); // {key1: "value1", key2: "value2", key3: "value3"}
List()用来创建List类型的Immutable对象
List([ 1, 2, 3 ]);
console.log(List.of({x:1}, 2, [3], 4).toJS()); // [{x:1}, 2, [3], 4]
size
// list
console.log(List([1,2,3,4]).size);// 4
console.log(List.of(1, 2, 3, 4).size);// 4
// map
console.log(Map({key: "value2", key1: "value1"}).size);// 2
console.log(Map.of({x:1}, 2, [3], 4).size);// 2
set
// 将 key 位置的元素替换为 value
const $obj1 = Map({a: {a1: 34}, b: 2, c: 3, d: 444});
console.log($obj1.set('a', 0).toJS()); // {a: 0, b: 2, c: 3, d: 444}
console.log($obj1.set('e', 99).toJS()); // {a: 1, b: 2, c: 3, d: 444, e: 99}
// 将 index 位置的元素替换为 value,即使索引越界也是安全的, 空位 undefined
const $arr1 = List([1, 2, 3]);
console.log($arr1.set(-1, 0).toJS()); // [1, 2, 0] 注意-1 等效于 $arr1.set($arr1.size + -1, 0)
console.log($arr1.set(4, 0).toJS()); // [ 1, 2, 3, undefined, 0 ] 空位置为了undefined
setIn
// Map
console.log(Immutable.fromJS([1, 2, 3, {a: 45, b: 64}]).setIn(['3', 'a'], 1000).toJS());//[1, 2, 3, {a: 1000, b: 64}]
// List
console.log(Immutable.fromJS([1, 2, 3, {a: 45, b: 64}]).setIn(['3', 'a'], 1000).toJS());//[1, 2, 3, {a: 1000, b: 64}]