JavaScript副作用是什么及如何避免

本篇文章给大家分享《JavaScript副作用是什么及如何避免》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

副作用是函数执行时除返回值外对外部状态的可观察改变，如修改全局变量、DOM、发起网络请求等；纯函数需满足相同输入恒得相同输出且无任何副作用，应通过参数传入依赖、使用不可变操作等方式实现。

副作用是指函数在执行过程中，除了返回值之外，还对外部状态产生了可观察的改变。比如修改了全局变量、改变了传入对象的属性、发起了网络请求、触发了 DOM 更新、调用了 console.log 等——这些行为都属于副作用。

哪些操作容易产生副作用

常见副作用来源包括：

• 直接修改函数参数（尤其是对象或数组）
• 读写全局变量或模块顶层变量
• 调用非纯函数（如 Date.now()、Math.random()、fetch）
• 修改 DOM 或触发事件
• 使用 console、alert、localStorage 等外部 I/O

如何写出无副作用的函数（纯函数）

纯函数满足两个条件：相同输入永远返回相同输出；不产生任何副作用。要避免副作用，可以这样做：

• 对对象/数组参数使用展开语法或 Object.assign 创建副本，再操作
• 用 const 声明变量，避免意外重赋值
• 把依赖（如时间、随机数、API 调用）作为参数传入，而非函数内部调用
• 用 map/filter/reduce 替代 forEach，避免在遍历时修改原数组

例如：
❌ 有副作用：
function addTax(items) { items.forEach(item => item.price *= 1.1); return items; }
✅ 无副作用：
function addTax(items) { return items.map(item => ({ ...item, price: item.price * 1.1 })); }

副作用不是敌人，关键在于明确和可控

实际开发中完全消除副作用是不可能也不必要的（比如渲染页面、保存用户数据）。重点是把副作用“隔离”和“显式化”：

• 在 React 中用 useEffect 管理副作用，而不是散落在 render 逻辑里
• 在 Redux 中用 middleware（如 Redux Thunk / RTK Query）处理异步副作用
• 在函数式编程风格中，用容器类型（如 Promise、IO）包裹副作用，延迟执行
• 给函数命名体现意图，比如 fetchData（含副作用） vs getFetchPromise（只返回 Promise）

基本上就这些。副作用本身不可怕，可怕的是它悄悄发生、难以追踪。把变化收束到明确的位置，代码就更可靠、易测、好维护。

终于介绍完啦！小伙伴们，这篇关于《JavaScript副作用是什么及如何避免》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！