用 Redux 的同學都知道诱建,reducer 每次都應該返回一個全新的狀態(tài)桑嘶,而不應該去修改原來的狀態(tài)悲龟。因此篮奄,很多時候會結合 immutable.js 和 redux 一起使用允懂。immutable.js 的確提供了很豐富的 API暂雹, 但是你知道嗎渣磷?其實在數(shù)組方面哈误,原生的 JS 數(shù)組的方法就可以做到 immutable 的事情。下面我們就從添加惕耕、修改纺裁、刪除這幾個主要的操作來一起看下诫肠。
1.1 添加:mutable 版本
數(shù)組中的 **#push **和 **#unshift **方法都可以添加新的數(shù)組元素司澎,但是會修改原數(shù)組欺缘,就像這樣:
其中 push 方法會在數(shù)組最后添加新的元素,而 unshift 會在數(shù)組最開始的位置添加新元素挤安。
1.2 添加:immutable 版本
其實我們兩個辦法可以實現(xiàn) immutable 版本谚殊。第一個辦法就是用 concat 方法,就像這樣:
還有一個方法就是可以使用 spread 操作符蛤铜,就像這樣:
2.1 修改:mutable 版本
數(shù)組的 splice 方法就可以用來起到修改數(shù)組元素的作用嫩絮,但是這個方法會修改原來的數(shù)組內容,就像這樣:
2.2 修改:immutable 版本
immutable 版本雖然實現(xiàn)起來稍微有點麻煩围肥,但是我們還是可以通過 map 方法來實現(xiàn):
3.1 刪除:mutable 版本
刪除數(shù)組元素也有兩個辦法剿干。一個就是使用 pop 和 shift:
還有一個辦法就是可以使用 splice
以上兩個辦法都是會修改原數(shù)組的內容
3.2 刪除:immutable 版本
同樣的也有兩個辦法可以實現(xiàn) immutable 版本的刪除功能,第一個辦法就是使用 filter 方法穆刻,就像這樣:
另外一個辦法就是使用 slice 方法置尔,和 splice 方法不同,slice 方法不會修改原數(shù)組氢伟,但是也是有缺陷的榜轿,因為 slice 數(shù)組只能切割數(shù)組,有的時候你為了達到目的朵锣,可能要切割多次才行
?
以上就是使用原生的方法來實現(xiàn) immutable 版本的 **添加谬盐、刪除、修改 **數(shù)組功能诚些。那么介紹這個有什么意義呢飞傀?一方面可以讓初學者熟悉下這幾個數(shù)組的方法哪些是會修改原數(shù)組的,哪些則是會返回新的數(shù)組泣刹,另外一方面呢助析,其實當數(shù)據(jù)操作是數(shù)組且不復雜的時候呢,可以直接使用這些原生方法封裝一個更加輕量級的 immutable.js 來使用椅您。