关于Vue的一些基本参数、方法及其应用规则
修饰标识符const,let,var之间的联系与应用
const:在许多语言中,体现的主要作用是将某个变量作为常量,如c++/c,在Javascript也是如此,使用const修饰的标识符为常量,不可以再次赋值。
const注意事项:
1.使用const修饰的变量不可被重复赋值,如
const a = 10;
a=30//不可修改,否则报错
2.使用const修饰的变量必须赋值,如
const a;//使用const修饰的标识符必须一开始为变量初始化,否则报错
一般推荐使用const修饰标识符,一方面由于const的不可重复赋值性,在后续对代码的扩展中可以避免一些不必要的麻烦,另一方面let的滥用可能会使系统占用一些没必要的内存,选择const也是一种提高代码效率的办法。
let与var
let可以视为一种更高级的var,与const相对的是,let修饰的标识符可以被重复赋值且不必强制初始化,let相对于var最大的优势在于,let作用范围为块级作用域,而var属于全局作用域。var的使用经常受到限制,如for循环,if/else判断领域中。
关于没有块级作用域引起的问题,例如for的块级:
<body>
<div id="app">
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
</div>
</body>
<script>
var btns = document.getElementsByTagName('button');
for(var i=0; i<btns.length; i++){
btns[i].addEventListener('click',function () {
console.log('第'+i+'个按钮被点击')
})
}
</script>
运行时发现无论点击那个按钮控制台永远输出“第5个按钮被点击”,由于var作用域为全局,因此在经历一轮for循环后,每个按钮原本的功能全部被最后一个按钮功能覆盖,因而每个按钮执行的都是一样的功能。
针对这种情况,要么对button组件功能设置闭包函数,要么将修饰符改为let:
<body>
<div id="app">
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
</div>
</body>
<script>
const btns = document.getElementsByTagName('button');
<!--1.使用let修饰-->
for(let i=0; i<btns.length; i++){
btns[i].addEventListener('click',function () {
console.log('第'+i+'个按钮被点击')
})
}
<!--2.使用闭包函数-->
for(let i=0; i<btns.length; i++){
(function(i)){
btns[i].addEventListener('click',function () {
console.log('第'+i+'个按钮被点击')
})
})(i)
}
</script>
关于ES5与ES6中的差分:
ES5中的var是没有块级作用域的,如if-else或for,因为之前ES5的if-else和for没有块级作用域的概念,所以在很多时候我们都必须借助于function的作用域来解决应用外面变量的问题。
ES6中加入了let,let是有if和for的块级作用域的。