问题描述:遍历a标签依次输出该标签的序号,结果3次都输出的是3,预期是0,1,2
<ol>
<li><a href="javascript:void(0);" class="clickBox">clickbox</a></li>
<li><a href="javascript:void(0);" class="clickBox">clickbox</a></li>
<li><a href="javascript:void(0);" class="clickBox">clickbox</a></li>
</ol>
var clickBoxs = document.querySelectorAll('.clickBox')
for (var i = 0; i < clickBoxs.length; i++){
clickBoxs[i].onclick = function(){
console.log(i)
}
}
问题本质:变量i用var声明,在全局范围内有效。所以每一次循环,新的i值都会覆盖旧的,导致最后输出的都是最后一轮的i的值。
解决方法一:闭包
function iteratorFactory(i) {
return function(e) {
console.log(i);
}
}
var clickBoxs = document.querySelectorAll('.clickBox')
for (var i = 0; i < clickBoxs.length; i++){
clickBoxs[i].onclick = iteratorFactory(i);
}
解决方法二:es6用let声明用来计数的循环变量
var clickBoxs = document.querySelectorAll('.clickBox')
for (let i = 0; i < clickBoxs.length; i++) {
clickBoxs[i].onclick = function() {
console.log(i)
}
}
es6更优雅的写法:箭头函数
var clickBoxs = document.querySelectorAll('.clickBox')
for (let i = 0; i < clickBoxs.length; i++) {
clickBoxs[i].onclick = () => console.log(i);
}
ES6与ES5声明变量补充:
1.ES5只有全局作用域和函数作用域,没有块级作用域,会导致两种常见的不合理场景:
1)var声明的内层变量覆盖外层变量,例如:
var nickname = 'freedom';
{
var nickname = 'victory';
console.log(1, nickname);
}
console.log(2, nickname)
VM76:4 1 "victory"
VM76:6 2 "victory"
ES6解决方法:使用let的块级作用域避免变量提升
var nickname = 'freedom';
if(true) {
let nickname = 'victory';
console.log(1, nickname);
}
console.log(2, nickname)
VM97:4 1 "victory"
VM97:6 2 "freedom"
2)var声明用来计数的循环变量泄漏为全局变量,详细见前文。
2.ES6块级作用域变量声明的另外一个关键字const,用于声明常量
常用场景:引用第三方库声明的变量,避免未来重复命名或者重命名
例如:const os = require(‘os’);