es6主要新增了const和let,声明变量。但是这const和let有一些细节不同的。
区别的内容
var和const/let的区别:
-
块级作用域
-
不存在变量提升
-
暂时性死区
-
不可重复声明
const的注意使用:
-
const声明之后必须马上赋值,否则会报错
-
const简单类型一旦声明就不能再更改。
01-作用域只局限于当前代码块
{
var str='张三';
console.log(str);
let str1='李四';
console.log(str1);
}
console.log('++++++++'+str);//张三
console.log('-------'+str1);//报错,没有定义声明
02-使用let申明的变量作用域不会被提升
{
console.log(str1);//undefined
var str1='张三';
var str1;
console.log(str1);//undefined
str1='张三';
console.log(str);//报错
let str='李四';
}
03-在相同的作用域下不能申明相同的变量
{
var str1='张三';
var str1='李四';
console.log(str1);//李四
let str2='小黄';
let str2='小黑';
console.log(str2);//报错
}
04-for循环提现let的父子作用域
var btns=document.querySelectorAll('button');
for(var i=0;i<btns.length;i++){
btns[i].onclick=function () {
alert('点击了第'+i+'个');//点击了第5个,5
}
}
var btns=document.querySelectorAll('button');
for(var i=0;i<btns.length;i++){
(function (i) {
btns[i].onclick=function () {
alert('点击了第'+i+'个');//点击了第0个到第5个,0,1,2,3,4
}
})(i);
}
let btns=document.querySelectorAll('button');
for(let i=0;i<btns.length;i++){
btns[i].onclick=function () {
alert('点击了第'+i+'个');//点击了第0个到第5个,0,1,2,3,4
}
}
注意:let和const的作用基本一样的,但不同的细节在于:
cosnt申明的常量必须赋值
{
const name;
name='bbbb';
console.log(name);//报错,因为常量没有赋值
}
{
const name='bbbb';
console.log(name);//bbbb
}
const简单类型一旦声明就不能再更改
{
const name='bbbb';
name ='asdasd';
console.log(name);//报错,不能更改
}
总结:
- 使用 var 声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象。
- 使用 let 声明的变量,其作用域为该语句所在的代码块内,不存在变量提升。
- 使用 const 声明的是常量,在后面出现的代码中不能再修改该常量的值。