什么是副作用 - Javascript

在 Javascript 中，副作用（side effect）是指函数执行期间对除函数返回值以外的部分的修改。

副作用的例子

let count = 0;

function increment() {
  count++;
}

increment();

console.log(count); // 1

这个 increment() 函数有一个副作用，就是每次调用时会改变 count 的值。这里的副作用是指函数执行过程中对 count 这个变量的修改。

副作用的几种类型

副作用有许多类型。下面是一些常见的例子。

修改状态

let state = 0;

function setState(newState) {
  state = newState;
}

setState(1);

console.log(state); // 1

在函数 setState() 中，参数 newState 会改变 state 变量的值。这种副作用称为修改状态。

修改 DOM

function createDiv() {
  const div = document.createElement('div');
  document.body.appendChild(div);
}

createDiv();

在函数 createDiv() 中，我们修改了 DOM 去添加一个新的 div 元素。这种副作用称为修改 DOM。

发送请求

function fetchData(url) {
  return fetch(url).then(response => response.json());
}

fetchData('https://example.com/data.json').then(data => {
  console.log(data);
});

在函数 fetchData() 中，我们发起了对远程服务器的请求。这个过程是有副作用的，因为它修改了浏览器和服务器之间的状态，从而返回了数据的结果。

副作用的影响

副作用的存在可能会增加代码的复杂性并使代码更难以维护。因为副作用会改变程序的状态，所以可能会造成不可预测的结果，从而引起错误。

如果我们使用纯函数来尽可能减少副作用的存在，就可以使我们的代码更加可读和易于理解。