踩坑经历：不要随便用const声明变量

最近在改一个老项目，发现通过 ajax 请求获取数组，通过 map 加箭头函数赋值给一个全局变量的时候报错了，大致代码如下：

$.get(requestUrl, function(res) {
	tableData = res.map(item => item.ip);
})

信息如下：

Cannot find module …

一开始以为是这个老项目不兼容ES6语法，换成手写 for 循环加 push 的方式，发现没有报错了。

$.get(requestUrl, function(res) {
	for(let i=0; i<res.length; i++) {
		tableData.push(res[i].ip);
	}
})

当时就认为是语法不兼容导致的，结果后来有个新的需求，每次调接口前，需要把数组清空，我就直接将一个空数组赋值给那个全局变量，结果又报错了，代码如下：

tableData = [];
$.get(requestUrl, function(res) {
	for(let i=0; i<res.length; i++) {
		tableData.push(res[i].ip);
	}
})

信息如下：

Cannot find module …

折腾了半天没搞明白，我试了下直接修改数组的length，发现没有报错：

tableData.length = 0;
$.get(requestUrl, function(res) {
	for(let i=0; i<res.length; i++) {
		tableData.push(res[i].ip);
	}
})

当时认为是这个项目语法兼容性存在问题，跟同事沟通了一下，同事说他们写的组件里面可以正常用 ES6 语法，听他们这么说，我又看了下刚才写的代码，结果发现问题了，那个全局变量 tableData 原来用 const 去声明了。

const tableData = [];

我们知道数组是引用类型，存在堆内存当中，赋给变量的是指向堆内存的指针。修改数组长度，例如 push ，length ，只是在原来的数组上修改，指针没有改变，因此不会报错。但是如果 tableData 这个变量直接用一个新数组去替换，赋给 tableData 的就是那个新数组的指针，因为用了 const 声明，所以就报错了。另外，JS中 map ，filter ，slice ，concat 等数组方法都会返回一个新数组。

现在这个问题应该很明确了，不是老项目不兼容 ES6 语法，而是修改了 const 声明的变量。当然这个老项目也是有问题的，报错信息提示太模糊了，导致问题没法立即定位。