点击按钮追加页面元素时的计数追踪及var转const实现问题咨询

问题1：当前计数方式是否合理 #

你现有的计数逻辑是合理的，可以正确追踪分批加载的起始位置，功能上没有问题。仅有的小缺陷是使用了全局的var可变变量，存在作用域污染的隐患，也不符合你想改用const的需求。

问题2：不修改const变量值的前提下实现相同效果的方案 #

const的限制是不允许修改变量的引用地址，如果是引用类型（对象、数组）的内部属性修改，是完全符合ES6规范的，不需要改变变量本身的赋值。这里提供两种常用实现方案：

方案1：将可变状态封装到const声明的引用对象中 #

// itemsAdded是固定值，可以直接用const声明
const itemsAdded = 15
// 用const声明状态对象，后续仅修改内部属性，不会触发const的赋值限制
const loadState = {
  itemCurrent: 10 // 初始加载位置
}

document.getElementById('myButton').addEventListener('click', function() {
  // 提前计算本次加载的最大下标，避免循环内重复判断
  const maxLoadIndex = Math.min(loadState.itemCurrent + itemsAdded, data.projects.length)
  for (let i = loadState.itemCurrent; i < maxLoadIndex; i++) {
    // 执行元素加载逻辑
  }
  // 更新状态，仅修改对象属性，没有修改loadState的引用
  loadState.itemCurrent = maxLoadIndex
  // 加载完所有内容后禁用按钮，优化体验
  if (loadState.itemCurrent >= data.projects.length) {
    this.disabled = true
  }
})

方案2：将状态存储到DOM元素属性，无需额外全局变量 #

如果不想额外声明状态变量，也可以把加载位置直接存储在按钮的自定义属性上：

const myButton = document.getElementById('myButton')
const itemsAdded = 15
// 初始化状态到按钮dataset
myButton.dataset.itemCurrent = 10

myButton.addEventListener('click', function() {
  const itemCurrent = Number(this.dataset.itemCurrent)
  const maxLoadIndex = Math.min(itemCurrent + itemsAdded, data.projects.length)
  for (let i = itemCurrent; i < maxLoadIndex; i++) {
    // 执行元素加载逻辑
  }
  this.dataset.itemCurrent = maxLoadIndex
  if (maxLoadIndex >= data.projects.length) {
    this.disabled = true
  }
})

内容的提问来源于stack exchange，提问作者Denzy