天天看點

js select 指派_Immutable.js入門

本篇隻是對Immutable.js的簡單介紹,後續會繼續分享其具體實踐應用。

js select 指派_Immutable.js入門

什麼是Immutable Data?

Immutable data encourages pure functions (data-in, data-out) and lends itself to much simpler application development and enabling techniques from functional programming such as lazy evaluation.

-- 官方文檔對其描述

Immutable Data 就是一旦建立,就不能再被更改的資料。對 Immutable 對象的任何修改或添加删除操作都會傳回一個新的 Immutable 對象。Immutable 實作的原理是 Persistent Data Structure(持久化資料結構),也就是使用舊資料建立新資料時,要保證舊資料同時可用且不變。同時為了避免 deepCopy 把所有節點都複制一遍帶來的性能損耗,Immutable 使用了Structural Sharing(結構共享),即如果對象樹中一個節點發生變化,隻修改這個節點和受它影響的父節點,其它節點則進行共享。請看下面動畫:

結構共享

Immutable的優缺點一覽

優點

1. 降低 Mutable 帶來的複雜度

共享的可變狀态是萬惡之源,舉個簡單的例子就是js中的引用指派:

var obj = { a: 1 };
var copy_obj = obj;
copy_obj.a = 2;
console.log(obj.a); // 2
           

引用指派雖然可以節省記憶體,但當應用複雜之後,可變狀态往往會變成噩夢,通常一般的做法是使用shallowCopy或者deepCopy來避免被修改,但這樣造成了CPU和記憶體的消耗,不過Immulate可以很好地解決這些問題。

2. 節省記憶體空間

上面提到了結構共享,Immutable.js 使用這種方式會盡量複用記憶體,甚至以前使用的對象也可以再次被複用。沒有被引用的對象會被垃圾回收。

import { Map } from 'immutable';
let a = Map({
  select: 'users',
  filter: Map({ name: 'Cam' })
})
let b = a.set('select', 'people');

a === b; // false
a.get('filter') === b.get('filter'); // true
           

上面 a 和 b 共享了沒有變化的 filter 節點。

3. Undo/Redo,Copy/Paste,随意穿越!

因為每次資料都是不一樣的,隻要把這些資料放到一個數組裡儲存起來,想回退到哪裡就拿出對應資料即可,很容易開發出撤銷重做這種功能。

4. 擁抱函數式程式設計

Immutable(持久化資料結構)本身就是函數式程式設計中的概念。函數式程式設計關心資料的映射,指令式程式設計關心解決問題的步驟,純函數式程式設計比面向對象更适用于前端開發。因為隻要輸入一緻,輸出必然一緻,這樣開發的元件更易于調試群組裝。

缺點

抛開學習成本和額外引入的資源檔案這些不說,我們來看看使用過程中有哪些不爽的地方。

1. 容易與原生對象混

主要是Immutable的API設計的和原生對象類似,容易混淆操作。例如其中Map和List的操作:

// Immutable
const map = Map({ a: 1, b: 2 });
const list = List([1,2,3]);
           
// 原生js
const obj = { a: 1, b: 2 };
const arry = [1,2,3];
           
// 取值方式對比
console.log(map.get('a'));
console.log(list.get(0));
console.log(obj.a);
console.log(arry[0]);
           

Immutable.js簡介

Facebook 工程師 Lee Byron 花費 3 年時間打造,與 React 同期出現,但沒有被預設放到 React 工具集裡(React 提供了簡化的 Helper)。它内部實作了一套完整的 Persistent Data Structure,還有很多易用的資料類型。像 Collection、List、Map、Set、Record、Seq。有非常全面的map、filter、groupBy、reduce``find函數式操作方法。同時 API 也盡量與 Object 或 Array 類似。

immutablejs-getters-and-setters-everywhere.jpg

Immutable.js 的幾種資料類型

List: 有序索引集,類似JavaScript中的Array。

Map: 無序索引集,類似JavaScript中的Object。

OrderedMap: 有序的Map,根據資料的set()進行排序。

Set: 沒有重複值的集合。

OrderedSet: 有序的Set,根據資料的add進行排序。

Stack: 有序集合,支援使用unshift()和shift()添加和删除。

Record: 一個用于生成Record執行個體的類。類似于JavaScript的Object,但是隻接收特定字元串為key,具有預設值。

Seq: 序列,但是可能不能由具體的資料結構支援。

Collection: 是建構所有資料結構的基類,不可以直接建構。

用的最多就是List和Map,是以在這裡主要介紹這兩種資料類型的API。

Immutable.js 的常用API

fromJS()
           

作用:将一個js資料轉換為Immutable類型的資料

用法:fromJS(value, converter)

簡介:value是要轉變的資料,converter是要做的操作。第二個參數可不填,預設情況會将數組準換為List類型,将對象轉換為Map類型,其餘不做操作

代碼實作:

const obj = Immutable.fromJS({a:'123',b:'234'},function (key, value, path) {
        console.log(key, value, path)
        return isIndexed(value) ? value.toList() : value.toOrderedMap())
    })
           
toJS()
           

作用:将一個Immutable資料轉換為JS類型的資料

用法:value.toJS()

is()

作用:對兩個對象進行比較

用法:is(map1,map2)

簡介:和js中對象的比較不同,在js中比較兩個對象比較的是位址,但是在Immutable中比較的是這個對象hashCode和valueOf,隻要兩個對象的hashCode相等,值就是相同的,避免了深度周遊,提高了性能

代碼實作:

import { Map, is } from 'immutable'
const map1 = Map({ a: 1, b: 1, c: 1 })
const map2 = Map({ a: 1, b: 1, c: 1 })
map1 === map2   //false
Object.is(map1, map2) // false
is(map1, map2) // true
           

List() 和 Map()

作用:用來建立一個新的List/Map對象

用法:

//List
Immutable.List(); // 空List
Immutable.List([1, 2]);
           
//Map
Immutable.Map(); // 空Map
Immutable.Map({ a: '1', b: '2' });
           

List.isList() 和 Map.isMap()

作用:判斷一個資料結構是不是List/Map類型

用法:

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

Map.isMap({}) // false
Map.isMap(Map()) // true
           

size

作用:屬性,擷取List/Map的長度,等同于ImmutableData.count();

get() 、 getIn()

作用:擷取資料結構中的資料

//擷取List索引的元素
ImmutableData.get(0);
           
// 擷取Map對應key的value
ImmutableData.get('a');
           
// 擷取嵌套數組中的資料
ImmutableData.getIn([1, 2]);
           
// 擷取嵌套map的資料
ImmutableData.getIn(['a', 'b']);
           

has() 、 hasIn()

作用:判斷是否存在某一個key

用法:

Immutable.fromJS([1,2,3,{a:4,b:5}]).has('0'); //true
Immutable.fromJS([1,2,3,{a:4,b:5}]).has('0'); //true
Immutable.fromJS([1,2,3,{a:4,b:5}]).hasIn([3,'b']) //true
           

includes()

作用:判斷是否存在某一個value

用法:

Immutable.fromJS([1,2,3,{a:4,b:5}]).includes(2); //true
Immutable.fromJS([1,2,3,{a:4,b:5}]).includes('2'); //false 不包含字元2
Immutable.fromJS([1,2,3,{a:4,b:5}]).includes(5); //false 
Immutable.fromJS([1,2,3,{a:4,b:5}]).includes({a:4,b:5}) //false
Immutable.fromJS([1,2,3,{a:4,b:5}]).includes(Immutable.fromJS({a:4,b:5})) //true
           

first() 、 last()

作用:用來擷取第一個元素或者最後一個元素,若沒有則傳回undefined

代碼:

Immutable.fromJS([1,2,3,{a:4,b:5}]).first()//1
Immutable.fromJS([1,2,3,{a:4,b:5}]).last()//{a:4,b:5}

Immutable.fromJS({a:1,b:2,c:{d:3,e:4}}).first() //1
Immutable.fromJS({a:1,b:2,c:{d:3,e:4}}).first() //{d:3,e:4}
           

資料修改

注:這裡對于資料的修改,是對原資料進行操作後的值指派給一個新的資料,并不會對原資料進行修改,因為Immutable是不可變的資料類型。

設定 set()

作用:設定第一層key、index的值

用法:

const originalList = List([ 0 ]);
// List [ 0 ]
originalList.set(1, 1);
// List [ 0, 1 ]
originalList.set(0, 'overwritten');
// List [ "overwritten" ]
originalList.set(2, 2);
// List [ 0, undefined, 2 ]
           
List().set(50000, 'value').size;
// 50001
           
const originalMap = Map()
const newerMap = originalMap.set('key', 'value')
const newestMap = newerMap.set('key', 'newer value')
           

originalMap

// Map {}
newerMap
// Map { "key": "value" }
newestMap
// Map { "key": "newer value" }
           

List在使用的時候,将index為number值設定為value。Map在使用的時候,将key的值設定為value。

在List中使用時,若傳入的number為負數,則将index為size+index的值設定為value,例,若傳入-1,則将size-1的值設為value。若傳入的number的值超過了List的長度,則将List自動補全為傳入的number的值,将number設定為value,其餘用undefined補全。注:跟js中不同,List中不存在空位,[,,,],List中若沒有值,則為undefined。

setIn()

作用:設定深層結構中某屬性的值

用法:

const originalMap = Map({
  subObject: Map({
    subKey: 'subvalue',
    subSubObject: Map({
      subSubKey: 'subSubValue'
    })
  })
})
           
const newMap = originalMap.setIn(['subObject', 'subKey'], 'ha ha!')
// Map {
//   "subObject": Map {
//     "subKey": "ha ha!",
//     "subSubObject": Map { "subSubKey": "subSubValue" }
//   }
// }
           
const newerMap = originalMap.setIn(
  ['subObject', 'subSubObject', 'subSubKey'],
  'ha ha ha!'
)
           
// Map {
//   "subObject": Map {
//     "subKey": "subvalue",
//     "subSubObject": Map { "subSubKey": "ha ha ha!" }
//   }
// }
           

用法與set()一樣,隻是第一個參數是一個數組,代表要設定的屬性所在的位置

删除 delete

作用:用來删除第一層結構中的屬性

用法:

// List
List([ 0, 1, 2, 3, 4 ]).delete(0);
// List [ 1, 2, 3, 4 ]
           

// Map

const originalMap = Map({

key: 'value',

otherKey: 'other value'

})

// Map { "key": "value", "otherKey": "other value" }

originalMap.delete('otherKey')

// Map { "key": "value" }

deleteIn()

用來删除深層資料,用法參考setIn

deleteAll() (Map獨有,List沒有)

作用:用來删除Map中的多個key

用法:deleteAll(keys: Iterable<K>): this

代碼示例:

const names = Map({ a: "Aaron", b: "Barry", c: "Connor" })

names.deleteAll([ 'a', 'c' ])

// Map { "b": "Barry" }

更新 update()

作用:對對象中的某個屬性進行更新,可對原資料進行相關操作

用法:

List

const list = List([ 'a', 'b', 'c' ])

const result = list.update(2, val => val.toUpperCase())

///Map

const aMap = Map({ key: 'value' })

const newMap = aMap.update('key', value => value + value)

updateIn()

用法參考setIn

清除 clear()

作用:清除所有資料

用法:clear(): this

代碼示例:

Map({ key: 'value' }).clear() //Map

List([ 1, 2, 3, 4 ]).clear() // List

List中的各種删除與插入

List對應的資料結構是js中的數組,是以數組的一些方法在Immutable中也是通用的,比如push,pop,shift,

unshift,insert。

push()

在List末尾插入一個元素

pop()

在List末尾删除一個元素

unshift

在List首部插入一個元素

shift

在List首部删除一個元素

insert

在List的index處插入元素

代碼實作:

List([ 0, 1, 2, 3, 4 ]).insert(6, 5)

//List [ 0, 1, 2, 3, 4, 5 ]

List([ 1, 2, 3, 4 ]).push(5)

// List [ 1, 2, 3, 4, 5 ]

List([ 1, 2, 3, 4 ]).pop()

// List[ 1, 2, 3 ]

List([ 2, 3, 4]).unshift(1);

// List [ 1, 2, 3, 4 ]

List([ 0, 1, 2, 3, 4 ]).shift();

// List [ 1, 2, 3, 4 ]

List中還有一個特有的方法用法設定List的長度,setSize()

List([]).setSize(2).toJS() //[undefined,undefined]

關于merge

merge

作用:淺合并,新資料與舊資料對比,舊資料中不存在的屬性直接添加,就資料中已存在的屬性用新資料中的覆寫

mergrWith

作用:自定義淺合并,可自行設定某些屬性的值

mergeIn

作用:對深層資料進行淺合并

mergeDeep

作用:深合并,新舊資料中同時存在的的屬性為新舊資料合并之後的資料

mergeDeepIn

作用:對深層資料進行深合并

mergrDeepWith

作用:自定義深合并,可自行設定某些屬性的值

這裡用一段示例徹底搞懂merge,此示例為Map結構,List與Map原理相同

const Map1 = Immutable.fromJS({a:111,b:222,c:{d:333,e:444}});

const Map2 = Immutable.fromJS({a:111,b:222,c:{e:444,f:555}});

const Map3 = Map1.merge(Map2);

//Map {a:111,b:222,c:{e:444,f:555}}

const Map4 = Map1.mergeDeep(Map2);

//Map {a:111,b:222,c:{d:333,e:444,f:555}}

const Map5 = Map1.mergeWith((oldData,newData,key)=>{

if(key === 'a'){

return 666;

}else{

return newData

}

},Map2);

//Map {a:666,b:222,c:{e:444,f:555}}

序列算法

concat()

作用:對象的拼接,用法與js數組中的concat()相同,傳回一個新的對象。

用法:const List = list1.concat(list2)

map()

作用:周遊整個對象,對Map/List元素進行操作,傳回一個新的對象。

用法:

Map({a:1,b:2}).map(val=>10*val)

//Map{a:10,b:20}

Map特有的mapKey()

作用:周遊整個對象,對Map元素的key進行操作,傳回一個新的對象。

用法:

Map({a:1,b:2}).mapKey(val=>val+'l')

//Map{al:10,bl:20}

Map特有的mapEntries()

作用:周遊整個對象,對Map元素的key和value同時進行操作,傳回一個新的對象。Map的map()也可實作此功能。

用法:

Map({a:1,b:2}).map((key,val)=>{

return [key+'l',val*10]

})

//Map{al:10,bl:20}

過濾 filter

作用:傳回一個新的對象,包括所有滿足過濾條件的元素

用法:

Map({a:1,b:2}).filter((key,val)=>{

return val == 2

})

//Map{b:2}

還有一個filterNot()方法,與此方法正好相反。

反轉 reverse

作用:将資料的結構進行反轉

代碼示例:

Immutable.fromJS([1, 2, 3, 4, 5]).reverse();

// List [5,4,3,2,1]

Immutable.fromJS({a:1,b:{c:2,d:3},e:4}).recerse();

//Map {e:4,b:{c:2,d:3},a:1}

排序 sort & sortBy

作用:對資料結構進行排序

代碼示例:

///List

Immutable.fromJS([4,3,5,2,6,1]).sort()

// List [1,2,3,4,5,6]

Immutable.fromJS([4,3,5,2,6,1]).sort((a,b)=>{

if (a < b) { return -1; }

if (a > b) { return 1; }

if (a === b) { return 0; }

})

// List [1,2,3,4,5,6]

Immutable.fromJS([{a:3},{a:2},{a:4},{a:1}]).sortBy((val,index,obj)=>{

return val.get('a')

},(a,b)=>{

if (a < b) { return -1; }

if (a > b) { return 1; }

if (a === b) { return 0; }

})

//List [ {a:3}, {a:2}, {a:4}, {a:1} ]

//Map

Immutable.fromJS( {b:1, a: 3, c: 2, d:5} ).sort()

//Map {b: 1, c: 2, a: 3, d: 5}

Immutable.fromJS( {b:1, a: 3, c: 2, d:5} ).sort((a,b)=>{

if (a < b) { return -1; }

if (a > b) { return 1; }

if (a === b) { return 0; }

})

//Map {b: 1, c: 2, a: 3, d: 5}

Immutable.fromJS( {b:1, a: 3, c: 2, d:5} ).sortBy((value, key, obj)=> {

return value

})

//Map {b: 1, c: 2, a: 3, d: 5}

分組 groupBy

作用:對資料進行分組

const listOfMaps = List([

Map({ v: 0 }),

Map({ v: 1 }),

Map({ v: 1 }),

Map({ v: 0 }),

Map({ v: 2 })

])

const groupsOfMaps = listOfMaps.groupBy(x => x.get('v'))

// Map {

// 0: List [ Map{ "v": 0 }, Map { "v": 0 } ],

// 1: List [ Map{ "v": 1 }, Map { "v": 1 } ],

// 2: List [ Map{ "v": 2 } ],

// }

查找資料

indexOf() 、 lastIndexOf Map不存在此方法

作用:和js數組中的方法相同,查找第一個或者最後一個value的index值,找不到則傳回-1

用法:

Immutable.fromJS([1,2,3,4]).indexof(3) //2

Immutable.fromJS([1,2,3,4]).lastIndexof(3) //2

findIndex() 、 findLastIndex() Map不存在此方法

作用:查找滿足要求的元素的index值

用法:

Immutable.fromJS([1,2,3,4]).findIndex((value,index,array)=>{

return value%2 === 0;

}) // 1

Immutable.fromJS([1,2,3,4]).findLastIndex((value,index,array)=>{

return index%2 === 0;

}) // 3

find() 、 findLast()

作用:查找滿足條件的元素的value值

用法:

Immutable.fromJS([1,2,3,4]).find((value,index,array)=>{

return value%2 === 0;

}) // 2

Immutable.fromJS([1,2,3,4]).findLast((value,index,array)=>{

return value%2 === 0;

}) // 4

findKey() 、 findLastKey()

作用:查找滿足條件的元素的key值

用法:

Immutable.fromJS([1,2,3,4]).findKey((value,index,array)=>{

return value%2 === 0;

}) // 1

Immutable.fromJS([1,2,3,4]).findLastKey((value,index,array)=>{

return value%2 === 0;

}) // 3

findEntry() 、 findLastEntry()

作用:查找滿足條件的元素的鍵值對 key:value

用法:

Immutable.fromJS([1,2,3,4]).findEntry((value,index,array)=>{

return value%2 === 0;

}) // [1,2]

Immutable.fromJS([1,2,3,4]).findLastEntry((value,index,array)=>{

return value%2 === 0;

}) // [3,4]

keyOf() lastKeyOf()

作用:查找某一個value對應的key值

用法:

Immutable.fromJS([1,2,3,4]).keyOf(2) //1

Immutable.fromJS([1,2,3,4]).lastKeyOf(2) //1

max() 、 maxBy()

作用:查找最大值

用法:

Immutable.fromJS([1, 2, 3, 4]).max() //4

Immutable.fromJS([{a;1},{a:2},{a: 3},{a:4}]).maxBy((value,index,array)=>{

return value.get('a')

}) //{a:4}

min() 、 minBy()

作用:查找最小值

用法:

Immutable.fromJS([1, 2, 3, 4]).min() //1

Immutable.fromJS([{a;1},{a:2},{a: 3},{a:4}]).minBy((value,index,array)=>{

return value.get('a')

}) //{a:1}

建立子集

slice()

作用: 和原生js中數組的slice數組一樣,包含兩個參數,start和end,start代表開始截取的位置,end代表結束的位置,不包括第end的元素。若不包括end,則傳回整個對象,若end為負數,則傳回(start,length-end)對應的資料。若start隻有一個并且為負數,則傳回最後的end個元素。

用法:

Immutable.fromJS([1, 2, 3, 4]).slice(0); //[1,2,3,4]

Immutable.fromJS([1, 2, 3, 4]).slice(0,2); //[1,2]

Immutable.fromJS([1, 2, 3, 4]).slice(-2); //[3,4]

Immutable.fromJS([1, 2, 3, 4]).slice(0,-2); //[1,2]

rest()

作用:傳回除第一個元素之外的所有元素

用法:

Immutable.fromJS([1, 2, 3, 4]).rest()//[2,3,4]

butLast()

作用:傳回除最後一個元素之外的所有元素

用法:

Immutable.fromJS([1, 2, 3, 4]).rest()//[1,2,3]

skip()

作用:有一個參數n, 傳回截掉前n個元素之後剩下的所有元素

用法:

Immutable.fromJS([1, 2, 3, 4]).skip(1)//[2,3,4]

skipLast()

作用:有一個參數n, 傳回截掉最後n個元素之後剩下的所有元素

用法:

Immutable.fromJS([1, 2, 3, 4]).skip(1)//[1,2,3]

skipWhile()

作用:傳回從第一次傳回false之後的所有元素

Immutable.fromJS([1, 2, 3, 4]).skipWhile(list.skipWhile((value,index,list)=>{

return value > 2;

}))// [1,2,3,4]

skipUntil()

作用:傳回從第一次傳回true之後的所有元素

Immutable.fromJS([1, 2, 3, 4]).skipUntil(list.skipWhile((value,index,list)=>{

return value > 2;

}))// [3,4]

take()

作用:有一個參數n, 傳回前n個元素

用法:

Immutable.fromJS([1, 2, 3, 4]).take(2)//[1,2]

takeLast()

作用:有一個參數n, 傳回最後n個元素

用法:

Immutable.fromJS([1, 2, 3, 4]).takeLast(2)//[3,4]

takeWhile()

作用:傳回從第一次傳回false之前的所有元素

Immutable.fromJS([1, 2, 3, 4]).skipWhile(list.takeWhile((value,index,list)=>{

return value > 2;

}))// []

takeUntil()

作用:傳回從第一次傳回true之前的所有元素

Immutable.fromJS([1, 2, 3, 4]).skipUntil(list.takeUntil((value,index,list)=>{

return value > 2;

}))// [1,2]

處理資料

reduce()

作用:和js中數組中的reduce相同,按索引升序的順序處理元素

用法:

Immutable.fromJS([1,2,3,4]).reduce((pre,next,index,arr)=>{

console.log(pre+next)

return pre+next;

})

// 3 6 10

reduceRight()

作用:和js中數組中的reduce相同,按索引降序的順序處理元素

用法:

Immutable.fromJS([1,2,3,4]).reduceRight((pre,next,index,arr)=>{

console.log(pre+next)

return pre+next;

})

// 7 9 10

every()

作用:判斷整個對象總中所有的元素是不是都滿足某一個條件,都滿足傳回true,反之傳回false。

代碼:

Immutable.fromJS([1,2,3,4]).every((value,index,arr)=>{

return value > 2

}) // false

some()

作用:判斷整個對象總中所有的元素是不是存在滿足某一個條件的元素,若存在傳回true,反之傳回false。

代碼:

Immutable.fromJS([1,2,3,4]).some((value,index,arr)=>{

return value > 2

}) // true

join()

作用:同js中數組的join方法。把準換為字元串

用法:

Immutable.fromJS([1,2,3,4]).join(',') //1,2,3,4

isEmpty()

作用:判斷是否為空

用法:

Immutable.fromJS([]).isEmpty(); // true

Immutable.fromJS({}).isEmpty(); // true

count()

作用:傳回元素個數,可自定義條件,傳回滿足條件的個數

用法:

const list = Immutable.fromJS([1,2,3,4]);

const map = Immutable.fromJS({a:1,b:2,c:3,d:4});

list.count((value,index,list)=>{

return value > 2;

}) //2

map.count((value,index,list)=>{

return value > 2;

}) //2

countBy()

作用:與count不同的是,countBy傳回一個對象

用法:

const list = Immutable.fromJS([1,2,3,4]);

const map = Immutable.fromJS({a:1,b:2,c:3,d:4});

list.countBy((value,index,list)=>{

return value > 2;

} //{false: 2, true: 2}

map.countBy((value,index,list)=>{

return value > 2;

} //{false: 2, true: 2}