在前端开发中，我们经常需要更新或设置 DOM 元素的属性。但是，当我们尝试直接修改传递给函数的对象参数时，ESLint 可能会抛出一个名为“no-param-reassign”的错误。这个错误提示表示我们正在改变函数的输入参数，可能导致不可预料的结果和代码维护困难。
在本文中，我们将介绍如何避免这个问题，并提供一些示例代码来帮助您更好地理解。
1. 什么是 no-param-reassign 错误？
no-param-reassign 是 ESLint 插件中的一个规则，用于防止在函数中直接修改函数参数的值。这个规则旨在鼓励编写更加健壮、易于维护的代码。
例如，在下面的函数中，我们试图设置 div 元素的 innerHTML 属性：
function updateDiv(div, content) {
div.innerHTML = content;
}然而，如果我们像下面这样调用该函数并传递一个空对象作为第一个参数，则会出现 no-param-reassign 错误：
const div = {};
updateDiv(div, 'Hello World!');这是因为我们试图直接修改了函数的输入参数 div 的值。
2. 如何避免 no-param-reassign 错误？
要避免 no-param-reassign 错误，我们可以使用一些技巧：
2.1 使用 const 或 let 声明函数参数
如果我们使用 const 或 let 来声明函数参数，则尝试修改参数值时会抛出一个错误：
function updateDiv(div, content) {
div = document.getElementById(div); // 抛出错误
div.innerHTML = content;
}这样就强制我们必须创建一个新的变量来存储修改后的对象，而不是直接修改传递给函数的参数。
2.2 使用 Object.assign() 创建新对象
另一种避免直接修改参数对象的方法是使用 Object.assign() 方法创建一个新的对象，并将属性复制到新对象中：
function updateDiv(div, content) {
const newDiv = Object.assign({}, div);
newDiv.innerHTML = content;
return newDiv;
}在这个示例中，我们将传递给函数的 div 对象复制到一个新的对象 newDiv 中，并更新了 innerHTML 属性。然后，我们返回一个新的对象 newDiv，而不是直接修改原始的 div 对象。
2.3 使用展开运算符创建新对象
另一种方法是使用展开运算符（...）创建一个新的对象并将属性复制到新对象中：
function updateDiv(div, content) {
const newDiv = {...div};
newDiv.innerHTML = content;
return newDiv;
}这个示例和前面的 Object.assign() 示例非常相似，只是使用了不同的语法来创建新对象。
3. 总结
在本文中，我们介绍了如何避免在设置 DOM 对象属性时引发 no-param-reassign 错误。我们提供了几种方法，包括使用 const 或 let 声明函数参数、使用 Object.assign() 方法创建新对象，以及使用展开运算符创建新对象。这些技巧可以帮助我们编写更加健壮、易于维护的代码。
-- -------------------- ---- ------- -- ---- -------- -------------- -------- - ----- ------ - --------- ---------------- - -------- ------ ------- - ----- --- - ----------- ------ --------- ----- ------ - -------------- --- --------- --------------------------- -- ----- ------ ------------------------------ -- -- ------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26937