副作用是函数执行时除返回值外对外部状态的可观察改变,如修改全局变量、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 })); }
立即学习“Java免费学习笔记(深入)”;
副作用不是敌人,关键在于明确和可控
实际开发中完全消除副作用是不可能也不必要的(比如渲染页面、保存用户数据)。重点是把副作用“隔离”和“显式化”:
在 React 中用 useEffect 管理副作用,而不是散落在 render 逻辑里在 Redux 中用 middleware(如 Redux Thunk / RTK Query)处理异步副作用在函数式编程风格中,用容器类型(如 Promise、IO)包裹副作用,延迟执行给函数命名体现意图,比如 fetchData(含副作用) vs getFetchPromise(只返回 Promise)
基本上就这些。副作用本身不可怕,可怕的是它悄悄发生、难以追踪。把变化收束到明确的位置,代码就更可靠、易测、好维护。
以上就是JavaScript中什么是副作用_如何避免副作用的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1541103.html
微信扫一扫
支付宝扫一扫