segmentfault的总结
云栖社区

Undo/Redo，Copy/Paste，可做时间旅行

因为每次数据都是不一样的，只要把这些数据放到一个数组里储存起来，想回退到哪里就拿出对应数据即可，很容易开发出撤销重做这种功能。

3 种最重要的数据结构说明一下

1: Map: 键值对集合, 对应于Object, ES6也有专门的对象
2: List: 有序可重复的列表, 对应Array
3: Set: 无序且不可重复的列表, 类似ES6的Set

其他API: (其他的方法基本和数组对象的方法相同, EX:push(), shift(), delete() ... )

1: obj.get ('key'): 从Map 创建的Immutable 对象中获取键的值 (而不是对象方法的obj.key )
2:arr.get (0) :从List 或者Set创建的Immutable 数组对象中获取对应键的值 (而不是数组方法的 arr [0])
1: Immutable.formJS(): 把 原生Object 和Array 转换成 Immutable 的对象和数组
2: Immutable .is() : 直接比较immutable对象的值，immutable.js 提供了 Immutable.is 来做『值比较』 Immutable.is(map1, map2); Immutable.is 可以用来减少 React 重复渲染，提高性能
3: OrderedMap : 有序 Map.
4: OrderedSe:有序 Set
5: Range() : 返回一个数组,参数 (开始值, 结束值, 步长)
Range(1,10) // [1,2,3,4,5,6,7,8,9,10]; Range(1,10,3) // [1,3,6,9]
6: Repeat(value, time): 重复多少个value, 如果没有time, 表示重复无限个value
7: toJS(): Immutable对象或数组, 转换成原生的对象或数组

Map() , Map.of()

注意 :一般不常用, 基本都是 Immutable.fromJS() 将一个JS原生对象转换为一个 Immutable对象

// Map()
Immutable.Map({a: 1});
Immutable.Map({a: 1}).toJS() // {a: 1};

// Map.of 创建一个拥有摸个键值的Immutable对象
Map.of('key1','value1','key2','value2','key3','value3').toJS();
// {key1: "value1", key2: "value2", key3: "value3"}

1:判断是否是一个 Map 或者 List , 对原生无效

Map

console.log(Map.isMap({})); // false
console.log(Map.isMap(Map({}))); // true

List

console.log(List.isList([])); // false
console.log(List.isList(List([]))); // true

2:获取大小 size, count(), countBy()

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

count()

// map
console.log(Immutable.fromJS({key: "value2", key1: "value1"}).count());// 4
// 可以定制条件，来确定大小
console.log(Immutable.fromJS({key: 1, key1: 34}).count((value, key, obj) => {
    return value > 3;
}));// 1 value大于3的有两个

// list
console.log(Immutable.fromJS([1, 2, 5, 6]).count());// 4
// 可以制定条件，来确定 大小
console.log(Immutable.fromJS([1, 2, 5, 6]).count((value, index, array) => {
    return value > 3;
}));// 2 大于3的有两个

countBy()

countBy()和count()的区别就是它的返回值是一个对象。

// Map
console.log(Immutable.fromJS({key: 1, key1: 34}).countBy((value, key, obj) => {
    return value > 3;
}).toJS());// {false: 1, true: 1}

// list
console.log(Immutable.fromJS([1, 2, 5, 6]).countBy((value, index, array) => {
    return value > 3;
}).toJS());// {false: 2, true: 2}

3: 添加元素

set
set(key,value) 对象为键; 数组为下标,且超出下标时空位 undefined

// Map
const $obj1 = immutable.Map({a: {a1: 1}, b: 2, c: 3,d: 4});
$obj1.set('a', 0).toJS();  // {a: 0,b:2,c:3,d:4}
$obj1.set('e', 7).toJS(); //  {a: {a1: 1},b:2,c:3,d:4, e:7}

//List
const $arr =immutable.List([1,2,3]);
$arr.set(-1, 0).toJS(); // [1,2,0]
$arr.set(4, 0).toJS(); // [1,2,3, undfined, 0]

setIn

//fromJS() 创建的Immutable对象或数组
let abs = Immutable.fromJS({a: {b:2}})
abs.setIn(['a','b'],200).toJS(); // {a: {b: 200}}

let arr = Immutable.fromJS([1 ,2, 3, {a: 5}])
arr.setIn([3,'a'],200).toJS(); // [1,2,3,{a: 200}]

// Map()  or List()  创建的Immutable对象或数组, 最好直接使用 set()
$obj1 = Immutable.Map({a: {a1: 34}, b: 2, c: 3, d: 444})
console.log($obj1.setIn(['a','a1'],100).toJS())// Uncaught Error: invalid keyPath
console.log($obj1.setIn(['a'],{a:100}).toJS()) // {a: {a:100}, b: 2, c: 3, d: 444}

let arrIn1 = Immutable.List([1,2,3,{a:1}])
arrIn1.setIn([3,'a'], 100).toJS()// Uncaught Error: invalid keyPath
arrIn1.setIn([3,], {a: 100}).toJS()//  [1, 2, 3, {a: 100}]

4: 获取某个元素值

get

Map
const $obj1 = immutable.Map({a: {a1: 1}, b: 2, c: 3,d: 4});
$obj1.get('a') // {a1: 1}
//设置默认值, 如果没有取到值
$obj1.get('v', '没有值') // 没有值

List
let arrIn1 = Immutable.List([1,2,3,{a:1}])
arrIn1.get(1, '没有值') // 2
arrIn1.get(4,'没有值') // 没有值

getIn()

let abs = Immutable.fromJS({a: {b:2}});
abs.getIn(['a', 'b'], '子级没有值')// 2
abs.getIn(['a', 'c'], '子级没有值')// 子级没有值

let arr = Immutable.fromJS([1 ,2, 3, {a: 5}]);
arr.getIn([3, 'a'], '子级没有值'); // 5
arr.getIn([3, 'c'], '子级没有值'); // 子级没有值

获取头、尾元素:
** first() last()**

const $obj1 = immutable.Map({a: {a1: 1}, b: 2, c: 3,d: 4});
$obj1.first() // {a1: 1}
$obj1.last() // 4

let arrIn1 = Immutable.List([1,2,3,{a:1}])
arrIn1.first()// 1
arrIn1.last() // {a: 1}

let abs = Immutable.fromJS({a: {b:2}});
abs.first().toJS() // {b:2}
abs.last().toJS() // {b: 2}

5: 插入元素

**insert( index, value)**
let arrIn1 = Immutable.List([1,2,3,{a:1}])
arrIn.insert(2,100).toJS(); // [1, 100, 2,3 {a: 22}]

pop、push、shift、unshift
List数据类型也拥有 pop、push、shift、unshift 这四种操作方法，和原生 Array 的四种方法使用方式一致，但唯一区别就是返回新的 List ，并且不改变原来的数组本身，而原生则是会改变元素本身。

6: 删除元素

deleted(key) 删除 key值所在
deletedIn 和setIn 使用方法一致

7: 清空元素 clear()

// Map
var theObj = Immutable.Map({a: {b:1}, c:2,d:3});
theObj.clear().toJS(); // {}

//List
var theList = Immutable.List([1,2,3,4,5,6]);
theList.set(1,100).toJS()  
// [1, 100, 3, 4, 5, 6]
theList.insert(1,2).toJS()
// [1, 2, 2, 3, 4, 5, 6]
theList.delete(1).toJS()
// [1, 3, 4, 5, 6]
theList.clear().toJS()
// []

// fromJS() 
var theFromJS = Immutable.fromJS({a: {a1:1}, b:2,c:3});
theFromJS.setIn(['a', 'a1'],100).toJS(); //{a: {a1:100}, b: 2, c: 3}
theFromJS.getIn(['a','a1']); //1
theFromJS.delete('a').toJS(); //{c: 3, b: 2}
theFromJS.deleteIn('a','a1').toJS(); //{c: 3, b: 2}
theFromJS.clear().toJS(); //{}

关于提高性能。修改后的 shouldComponentUpdate 是这样的：

import { is } from 'immutable';
shouldComponentUpdate: (nextProps, nextState) => {
  return !(this.props === nextProps || is(this.props, nextProps)) ||
         !(this.state === nextState || is(this.state, nextState));
}

缺点: 容易与原生对象混淆

这点是我们使用 Immutable.js 过程中遇到最大的问题。写代码要做思维上的转变。

虽然 Immutable.js 尽量尝试把 API 设计的原生对象类似，有的时候还是很难区别到底是 Immutable 对象还是原生对象，容易混淆操作。

Immutable 中的 Map 和 List 虽对应原生 Object 和 Array，但操作非常不同，比如你要用 map.get('key') 而不是 map.key，array.get(0) 而不是 array[0]。另外 Immutable 每次修改都会返回新对象，也很容易忘记赋值。

当使用外部库的时候，一般需要使用原生对象，也很容易忘记转换。

下面给出一些办法来避免类似问题发生：

1: 使用 Flow 或 TypeScript 这类有静态类型检查的工具
2: 约定变量命名规则：如所有 Immutable 类型对象以 $$ 开头。
3: 使用 Immutable.fromJS 而不是 Immutable.Map 或 Immutable.List 来创建对象，这样可以避免 Immutable 和原生对象间的混用。