JavaScript中const关键字作用及Chart.js多图表实现疑问

const关键字的作用 #

const是JavaScript ES6版本新增的声明关键字，用来声明一个不可重新赋值的块级作用域变量：

• 它声明的变量仅在当前代码块内生效，不会像旧的var关键字一样出现变量提升、污染全局作用域的问题
• 声明时必须初始化赋值，后续代码不能再给这个变量重新赋值（注意如果赋值是对象、数组这类引用类型，变量内部的属性/元素是可以修改的，只是变量本身不能指向别的值）
  官方示例里用const是现在前端开发的通用习惯：只要一个变量声明后不需要重新指向别的值，就优先用const，既可以避免意外修改变量引用导致的bug，也能让读代码的人一眼明确这个变量的引用不会变。

多图表场景的写法建议 #

绝对不要直接删掉声明关键字，那样写会让变量直接泄露到全局作用域，不仅容易出现命名冲突，排查bug的时候也会非常麻烦。
你完全不需要硬给变量加ctx1/ctx2/ctx3这类序号，利用块级作用域就可以优雅解决重复命名的问题，比如遍历所有需要渲染图表的canvas元素批量初始化：

// 选中页面所有需要渲染图表的canvas
document.querySelectorAll('canvas.chart-item').forEach((canvasEl) => {
  // 这里的ctx是每个循环块内独有的变量，互相不会冲突
  const ctx = canvasEl.getContext('2d')
  new Chart(ctx, {
    // 对应图表的配置项
  })
})

myChart变量的作用 #

示例里把Chart构造函数返回的实例存到myChart变量不是无意义的操作：

• 如果你后续需要动态更新图表数据、修改配置，必须拿到这个实例才能调用update()等实例方法
• 要销毁图表、导出图表为图片、绑定自定义交互逻辑的时候，也都需要用到这个实例对象
  如果你确认当前业务里图表渲染完成后不需要做任何动态操作，完全可以不存这个变量，直接执行new Chart(...)即可，不会影响图表的初始渲染。

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