JavaScript 中的對象一般是可變的(Mutable)，因為使用了引用賦值，新的對象簡單的引用了原始對象，改變新的對象將影響到原始對象。如 foo={a: 1}; bar=foo; bar.a=2 你會發(fā)現(xiàn)此時 foo.a 也被改成了 2。雖然這樣做可以節(jié)約內存，但當應用復雜后，這就造成了非常大的隱患，Mutable 帶來的優(yōu)點變得得不償失。為了解決這個問題，一般的做法是使用 shallowCopy(淺拷貝)或 deepCopy(深拷貝)來避免被修改，但這樣做造成了 CPU 和內存的浪費。

什么是 Immutable Data？
??Immutable Data 就是一旦創(chuàng)建，就不能再被更改的數(shù)據(jù)。對 Immutable 對象的任何修改或添加刪除操作都會返回一個新的 Immutable 對象。Immutable 實現(xiàn)的原理是 Persistent Data Structure(持久化數(shù)據(jù)結構)，也就是使用舊數(shù)據(jù)創(chuàng)建新數(shù)據(jù)時，要保證舊數(shù)據(jù)同時可用且不變。同時為了避免 deepCopy 把所有節(jié)點都復制一遍帶來的性能損耗，Immutable 使用了 Structural Sharing(結構共享)，即如果對象樹中一個節(jié)點發(fā)生變化，只修改這個節(jié)點和受它影響的父節(jié)點，其它節(jié)點則進行共享。
請看下面動畫：

immutable.js
??Facebook 工程師 Lee Byron 花費 3 年時間打造，與 React 同期出現(xiàn)，但沒有被默認放到 React 工具集里(React 提供了簡化的 Helper)。它內部實現(xiàn)了一套完整的 Persistent Data Structure，還有很多易用的數(shù)據(jù)類型。像 Collection、List、Map、Set、Record、Seq。有非常全面的map、filter、groupBy、reduce``find函數(shù)式操作方法。同時 API 也盡量與 Object 或 Array 類似。

Immutable 的幾種數(shù)據(jù)類型

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

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

OrderedMap: 有序的Map，根據(jù)數(shù)據(jù)的set()進行排序。

Set: 沒有重復值的集合。

OrderedSet: 有序的Set，根據(jù)數(shù)據(jù)的add進行排序。

Stack: 有序集合，支持使用unshift()和shift()添加和刪除。

Range(): 返回一個Seq.Indexed類型的集合，這個方法有三個參數(shù)，start表示開始值，默認值為0，end表示結束值，默認為無窮大，step代表每次增大的數(shù)值，默認為1.如果start = end,則返回空集合。

Repeat(): 返回一個vSeq.Indexe類型的集合，這個方法有兩個參數(shù)，value代表需要重復的值，times代表要重復的次數(shù)，默認為無窮大。

Record: 一個用于生成Record實例的類。類似于JavaScript的Object，但是只接收特定字符串為key，具有默認值。

Seq: 序列，但是可能不能由具體的數(shù)據(jù)結構支持。

Collection: 是構建所有數(shù)據(jù)結構的基類，不可以直接構建。
用的最多就是List和Map，所以在這里主要介紹這兩種數(shù)據(jù)類型的API。

常用API的使用

fromJS()
作用：將一個js數(shù)據(jù)轉換為Immutable類型的數(shù)據(jù)。
用法：fromJS(value, converter)

簡介：value是要轉變的數(shù)據(jù)，converter是要做的操作。第二個參數(shù)可不填，默認情況會將數(shù)組轉換為List類型，將對象轉換為Map類型，其余不做操作。

import Immutable from 'immutable'const obj = Immutable.fromJS({name:'zyb', age:'24'})console.log(obj)

toJS()
作用：將一個Immutable數(shù)據(jù)轉換為JS類型的數(shù)據(jù)。
用法：value.toJS()

import Immutable from 'immutable'const obj = Immutable.fromJS({name:'zyb', age:'22'})console.log(obj.toJS()) // {name:'zyb', age:'22'}

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 //falseObject.is(map1, map2) // falseis(map1, map2) // true

數(shù)據(jù)讀取

get() 、 getIn()
作用：獲取數(shù)據(jù)結構中的數(shù)據(jù)

has() 、 hasIn()
作用:判斷是否存在某一個key
用法：

Immutable.fromJS([1,2,3,{a:4,b:5}]).has('0'); //trueImmutable.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); //trueImmutable.fromJS([1,2,3,{a:4,b:5}]).includes('2'); //false 不包含字符2Immutable.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}) //falseImmutable.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()//1Immutable.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() //1Immutable.fromJS({a:1,b:2,c:{d:3,e:4}}).first() //{d:3,e:4}

數(shù)據(jù)修改
注：這里對于數(shù)據(jù)的修改，是對原數(shù)據(jù)進行操作后的值賦值給一個新的數(shù)據(jù)，并不會對原數(shù)據(jù)進行修改，因為Immutable是不可變的數(shù)據(jù)類型。

設置 set()
作用：設置第一層key、index的值
用法：

set(index: number, value: T): Listset(key: K, value: V): this

List在使用的時候，將index為number值設置為value。Map在使用的時候，將key的值設置為value。

在List中使用時，若傳入的number為負數(shù)，則將index為size+index的值設置為value，例，若傳入-1，則將size-1的值設為value。若傳入的number的值超過了List的長度，則將List自動補全為傳入的number的值，將number設置為value，其余用undefined補全。注：跟js中不同，List中不存在空位，[,,,],List中若沒有值，則為undefined。

代碼實現(xiàn)：

//Listconst 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//Mapconst { Map } = require('immutable')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" }

setIn()
作用：設置深層結構中某屬性的值
用法：
setIn(keyPath: Iterable, value: any): this
用法與set()一樣，只是第一個參數(shù)是一個數(shù)組，代表要設置的屬性所在的位置

刪除 delete
作用：用來刪除第一層結構中的屬性

用法：

delete(index: number): List //Listdelete(key: K): this //MapdeleteIn()

用來刪除深層數(shù)據(jù)，用法參考setIn
deleteAll() (Map獨有，List沒有)
作用：用來刪除Map中的多個key
用法：deleteAll(keys: Iterable): this

代碼示例：

const names = Map({ a: "Aaron", b: "Barry", c: "Connor" })names.deleteAll([ 'a', 'c' ])// Map { "b": "Barry" }

更新 update()
作用：對對象中的某個屬性進行更新，可對原數(shù)據(jù)進行相關操作

用法：

update(index: number, updater: (value: T) => T): this //Listupdate(key: K, updater: (value: V) => V): this //Map

代碼示例：

Listconst list = List([ 'a', 'b', 'c' ])const result = list.update(2, val => val.toUpperCase())///Mapconst aMap = Map({ key: 'value' })const newMap = aMap.update('key', value => value + value)

updateIn()
用法參考setIn

清除 clear()
作用：清除所有數(shù)據(jù)
用法：clear(): this

代碼示例：

Map({ key: 'value' }).clear() //MapList([ 1, 2, 3, 4 ]).clear() // List

總結

以上是生活随笔為你收集整理的js find的用法_React常用库Immutable.js常用API的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。