javascript - 'do...while' 语句中出现意外赋值。为什么这是不好的做法？我可以做什么？

Question

我收到 eslint 错误: [eslint] 'do...while' 语句中出现意外的赋值。 (无条件分配)

为什么会发生这种情况？ 我能做什么来修复它？ 为什么我不被允许这样做？为什么这是不好的做法？

window.smoothScroll = function (target) {
    let scrollContainer = target;
    do {
        scrollContainer = scrollContainer.parentNode;
        if (!scrollContainer) return;
        scrollContainer.scrollTop += 1;
    } while (scrollContainer.scrollTop === 0);

    let targetY = 0;
    do {
        if (target === scrollContainer) break;
        targetY += target.offsetTop;
    } while (target = target.offsetParent);

    const scroll = (c, a, b, i) => {
        i += 1; if (i > 30) return;
        c.scrollTop = (((a + (b - a)) / 30) * i);
        setTimeout(() => { scroll(c, a, b, i); }, 10);
    };
    scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
};

Answer 1

while 需要一个表达式，而target = target.offsetParent 是一个赋值。虽然赋值确实对表达式求值，但它的使用通常要么是错误，要么是代码异味。例如，正如 linter 所解释的:

if (user.jobTitle = "manager") {

上面的代码几乎肯定是一个拼写错误。如果要分配给变量，最好在独立行上执行，而不是在表达式中，以使 future 的读者(包括您自己)清楚地了解您的代码。

在您的代码中，您可以通过分配给 do 底部的 target 来修复它，然后将 target 放入while 条件:

do {
  if (target === scrollContainer) break;
  targetY += target.offsetTop;
  target = target.offsetParent
} while (target);