1. Var does not have block-level scope, let has block-level scope
In the understanding varand letthe difference before, we need to know what is block-level scope, only after a real understanding of what is block-level scope, in order to truly understand varand letdifference.
1. Block-level scope: In what scope is the variable available.
{
var name="vue";
console.log(name); //vue
}
console.log(name); //vue
In the above example, the inside of the braces is a block-level scope. When called outside the block-level scope name, it can still be accessed, that is, the block-level scope varhas no restrictions on the declared variables. However, in the development process, we do not want to be able to access the variable values inside the block-level scope outside the block-level scope, which often causes some problems.
2. There is no problem caused by block-level scope: if block-level
var func;
if(true){
var name="vue";
func=function (){
console.log(name)
}
}
var name="aaa"
func();
Because the block-level scope vardoes not limit the declared variables, we can change namethe value of the variables declared inside the function outside the function . The printed value will be the value we defined outside the function name="aaa", not the value declared inside the function name="vue". In the actual development process, a function may be called in multiple places, and each time it is called, the value of the internal variable of the function will be changed, which can easily cause confusion.
3. There is no problem caused by block-level scope: for block-level
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<script>
const btns=document.getElementsByTagName("button");
for(var i=0;i<btns.length;i++){
btns[i].addEventListener('click',function(){
console.log("第"+i+"个按钮被点击");
})
}
</script>
</body>
</html>
It can be seen in the console that no matter which button is clicked, the third button is displayed. The principle is the same as the above example. When the first iwhen the button is clicked, the corresponding function, but a function which is in a real start ivalue, which value has been changed, and now inside the function ivalue has been last cycle ithe coverage value, it will show the third The button is clicked .
In ES6, added let, it letis a block-level scope with ifand for. In the above example, changing var to let will correctly show which button was clicked.
<script>
const btns=document.getElementsByTagName("button");
for(var i=0;i<btns.length;i++){
btns[i].addEventListener('click',function(){
console.log("第"+i+"个按钮被点击");
})
}
</script>
Because it lethas its own scope, the above forloop is equivalent to three scopes. The ivalue in each scope will only work in its own scope, and will not change its value due to the influence of variables outside the scope. varWhen declaring, it is equivalent to sharing a ivalue.
Second, the use of const
1. constThe main function is to modify a variable as a constant, which cannot be assigned again.
2. When to use constwhich?
As the name implies, when our modified identifier will not be assigned again, it can be used constto ensure data security.
Suggestion: In ES6 development, give priority to use const, only use when you need to change a certain identifier let.
3. Attention to const
Note 1: Once the constmodified identifier is assigned, it cannot be modified
const a = 20;
a = 10; //错误，不可以修改
Note 2: When using a constdefined identifier, it must be assigned
const name; //错误，const修饰的标识符必须赋值
Note 3: The meaning of a constant is that the pointed object cannot be modified, but the internal properties of the object can be changed.
const obj={
name:"vue",
age:18
}
obj.name="newVue",
obj.age=20 //正确，可以改变对象内部的属性