在前端开发过程中，频繁操作对象和数组是常见的场景。然而，大量的操作和变化也可能引发一些不可预期的错误。为了避免这些问题，我们需要使用一些工具，比如 immutable.js 或者用 JavaScript 的内建方法进行无副作用的操作。其实，在 npm 包管理器上还有一个叫做 functional-immutable 的库，其优点是轻便简洁，却具有强大的功能，值得学习和使用。
功能简介
functional-immutable 是一款轻量的函数式编程库。它提供了多个实用的函数，帮助你创建不可变的数据结构，同时也提供了一些与对象和数组操作相关的基础函数。
与其他不可变库一样，functional-immutable 需要把修改旧值变成新值的操作（也叫做不可变操作）显式的表达出来。因此当你进行一些修改操作时，返回值将是一个全新的、重新构建出的对象或数组，而不是相应的引用类型的原始值。同时，这也是该库的一大优势之一。
安装和使用
在 package.json 文件中加入 "functional-immutable": "^1.0.0" 构成的依赖后，可以使用 npm 安装：
npm install --save functional-immutable@latest
import * as fn from 'functional-immutable';
-- -------------------- ---- ------- ----- - ---- ---- ---- - - --- ----- -------------- - --------- ---- ------ ----- -------------- - ------------ --------- -------- --------- ----- --------------- - ------------- ------ --------- -- ------- ---- ---- ---- ------ ----- ----- - --- --------- ---- ------ ----- ----- - --- ------------ --------- -------- --------- ----- ------ - -------- ------ --------
使用 functional-immutable 库创建的对象和数组是不可变的，所以你应该遵循一些特定的函数来修改和更新它们：
- Set()：用于创建一些不可变的但是可修改的组件。
- Map()：提供了 key-value 映射功能。Map 的 key 可以是任意类型的变量，Map 中的 value 是任意类型的值。
- List()：用于创建数组。List 是不可变的，可以看作是一个树状节点的列表。
举个例子，你可以用 List 内置的 push() 方法对数组元素进行操作：
const list = List(['a', 'b']);
const list1 = list.push('c');
console.log(list); // Immutable.List ['a', 'b']
console.log(list1); // Immutable.List ['a', 'b', 'c']使用示例
实战演习：使用 functional-immutable 进行单向数据流管理。
在 React 的数据流管理中，我们经常需要将这些数据存储在一些 JavaScript 对象中。假设我们有一个对象我们想要在组件之间传递。民调应该可以访问和更新的数据和状态，而且应该不引发副作用。
下面是一个我们可以使用 functional-immutable 实现这个过程的例子：
-- -------------------- ---- -------
------ - --- - ---- -----------------------
----- ------------ - -----
-------- --
-------- -------
---
-------- -------------- ------- -
------ ------------- -
---- ------------
------ -------------------- -------------------- - ---
---- ------------
------ -------------------- -------------------- - ---
---- --------
------ -------------------- ---
---- --------------
------ -------------------- ----------------
--------
------ ------
-
-
------ - ------------- ------- --上面的代码描述了一个简单的 reducer，我们把它用到了一个物品集合上。在 initialState 中定义了一个第一次加载数据时的状态数据，以及 reducer 方法来更新 state 中的状态数据。使用 import 和 export 发送 reducers、state 对象和 action 的定义给组件，你也就建立了一个属于你自己的 Redux 数据流环境。
接下来，你可以利用 setState() 方法来管理你的应用程序，而不需要从类似于 Flux 的框架中放入大量的代码。可以看到下面代码中都没有直接操作 state：
-- -------------------- ---- -------
------ ------ - ---------- - ---- --------
------ - ------------- ------- - ---- --------------
-------- ----- -
----- ------- --------- - ------------------- --------------
----- --------- - -- -- ---------- ----- ----------- ---
----- --------- - -- -- ---------- ----- ----------- ---
----- ----- - -- -- ---------- ----- ------- ---
----- ---------- - --- -- ----------
----- --------------
-------- --------------
---
------ -
--
-------------------------------
----------- --------------------------
------ ----------- --------------------- --
------- ------------------------------
------- ------------------------------
------- ------------------------------
---
--
-
------ ------- ----总结
functional-immutable 小巧而强大，可以为 JavaScript 对象和数组提供有效的、不会引发副作用的操作。使用它可以使你的代码更加健壮、可维护，也可以更容易地创造一个简洁而优雅的 React 应用程序。在这篇文章中，我们讨论了它的一些通用功能和使用方法，还看了一些实际的代码示例。赶快开始在你的应用程序中使用 functional-immutable 吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5a51ab1864dac66f61