将修改后的数组作为参数传递给函数

Passing modified array as an argument to function

本文关键字：参数传递 函数 数组 修改      更新时间：2023-09-26

我在下面的代码中挣扎了太久，试图弄清楚如何将每次单击都要修改的数组传递给函数。

问题是，一旦修改了clickedLinks数组，就会影响shoplist函数中的passedLinks数组。

我甚至对为什么会发生这种情况得到了很好的解释，但我无法将其正确地应用到我的例子中。我试着在不同的点清除数组，但没有成功。我开始怀疑我的代码的整个逻辑是否有缺陷。

如有任何帮助，我们将不胜感激。

这是代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>
      Test 1
    </title>
    <script src="http://code.jquery.com/jquery-latest.js" type=
    "text/javascript">
</script>
  </head>
  <body>
    <div class="items">
      <ul>
        <li>
          <a href="#" id="link1">Link 1</a>
        </li>
        <li>
          <a href="#" id="link2">Link 2</a>
        </li>
        <li>
          <a href="#" id="link3">Link 3</a>
        </li>
        <li>
          <a href="#" id="link4">Link 4</a>
        </li>
      </ul>
    </div>
<script type="text/javascript">
    var clickedLinks = [];
    var passedItems = [];

    // Collect clicked link IDs into an array and pass the array as an argument to shoplist()
    $('.items a').click(function () {
    if (clickedLinks.indexOf(this.id) != -1) {
        var linkIndex = clickedLinks.indexOf(this.id);
        clickedLinks.splice(linkIndex, 1);
    } else {
        clickedLinks.push(this.id);
    }
    shoplist(clickedLinks);
    });

    function shoplist(ids) {
        passedItems.push(ids);
        alert(passedItems);
    }
</script>
</body>
</html>

步骤：

  1. 单击"链接1"
  2. 单击"链接2"

预期结果：警报窗口显示"link1，link1，link2"

实际结果：警报窗口显示"link1，link2，link1，link2"

您按原样推送ids数组，但稍后会更改。您应该使用slice推送它的副本。类似于：

passedItems.push(ids.slice());

此外，我不理解if子句的必要性。如果项目已经存在，就不要添加它；还是我错过了什么？

请参见演示。

相关文章：