JavaScript 中的闭包来实现序号递增的功能

最新推荐文章于 2023-06-12 17:41:00 发布

梦想是坚持

最新推荐文章于 2023-06-12 17:41:00 发布

阅读量254

点赞数

分类专栏：原力值打卡文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/wanghongpu9305/article/details/130521261

版权

原力值打卡专栏收录该内容

52 篇文章 1 订阅

订阅专栏

下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript 序号递增</title>
</head>
<body>
  <ul id="list"></ul>
  <button onclick="addItem()">添加</button>
  <script>
    function createCounter() {
      let count = 0;
      return function() {
        return ++count;
      }
    }

    const getNextIndex = createCounter();

    function addItem() {
      const list = document.getElementById("list");
      const item = document.createElement("li");
      item.textContent = `Item ${getNextIndex()}`;
      list.appendChild(item);
    }
  </script>
</body>
</html>

在该实现中，通过 createCounter() 函数创建了一个闭包，其中 count 变量的初始值为 0，并返回了一个匿名函数。这个匿名函数可以访问和修改 count 变量，并将它的值自增 1 并返回。

接着，我们使用 const getNextIndex = createCounter() 创建了一个函数 getNextIndex()，它调用了闭包中返回的匿名函数，并返回了自增后的 count 变量的值。

最后，我们在 addItem() 函数中调用 getNextIndex() 函数，生成下一个序号，并将它添加到列表中。每次调用 getNextIndex() 函数，它都会返回一个新的序号。

需要注意的是，在这种实现方式下，序号递增的范围仅限于当前页面，如果用户关闭页面或者重新打开页面，序号的计数器会被重置。如果需要将序号保存到数据库或者本地存储中，需要使用其他的技术实现。

梦想是坚持

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript 中的闭包来实现序号递增的功能

需要注意的是，在这种实现方式下，序号递增的范围仅限于当前页面，如果用户关闭页面或者重新打开页面，序号的计数器会被重置。如果需要将序号保存到数据库或者本地存储中，需要使用其他的技术实现。变量的初始值为 0，并返回了一个匿名函数。这个匿名函数可以访问和修改。函数，生成下一个序号，并将它添加到列表中。，它调用了闭包中返回的匿名函数，并返回了自增后的。变量，并将它的值自增 1 并返回。函数，它都会返回一个新的序号。函数创建了一个闭包，其中。
复制链接

扫一扫