ES6基础---变量声明
2018-12-30 本文已影响0人
KIHO_2658
之前的一段时间，我使用javascript都是使用ES5的语法，当我接触了vue、node框架之后，慢慢接触到了ES6的语法，发现他们的框架都是从ES6的基础上演变出来。所以慢慢意识到ES6的重要性。所以的话今天把自己学到的es6分享给大家。
在前端的面试中，ES6也是考察的一个知识点。
今天来介绍ES6中的两个变量 let 与const
首先我来简单的介绍一下var里面存在的一些缺陷
1.可以重复声明
2.无法限制修改
3.没有块级作用域
我们先来看一下下面的代码
var a =15;
var a =2;
console.log(a);
在控制台输出结果为2
image.png
就是说var可以重复声明变量，并覆盖原本a的值
我们来看一看使用let效果
let a =15;
let a =2;
console.log(a);
image.png
我们可以知道，let可以防止变量重复定义，在ES6的语法中，可以用let代替var，当然let可以像var一样改变里面的值。
let c =1;
c=2;
console.log(c);
输出为2，并且没有报错
下面我来介绍一下const
学过c++的人知道 const就是常量，值不能改变
错误做法：
const c=1;
const c=2;
console.log(c);
正确做法
const c=1;
const相同的变量只能定义一次，且不能修改值
最后我来讲一下作用域的问题
｛｝作为一个作用域，然后在里面let一个变量，外部是访问不到的，只有在作用域里面才生效。这样避免了函数提升的情况（官方有解释说明）
最后用一个例子解释一下
这个例子，我们要做的是点击一个按钮弹出一个一个数字（序号）
html代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ES6块级作用域</title>
</head>
<body>
<input type="button" name="" id="" value="按钮1" />
<input type="button" name="" id="" value="按钮2" />
<input type="button" name="" id="" value="按钮3" />
<script type="text/javascript">
var Btn=document.getElementsByTagName("input");
for(var i =0;i<Btn.length;i++){
Btn[i].onclick=function(){
alert(i);
}
}
};
</script>
</body>
</html>
显示的结果是无论点击那个按钮，结果都是3.
image.png
解决方法有两个，一个使用let代替var，另外一个使用匿名函数
第一种
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ES6块级作用域</title>
</head>
<body>
<input type="button" name="" id="" value="按钮1" />
<input type="button" name="" id="" value="按钮2" />
<input type="button" name="" id="" value="按钮3" />
<script type="text/javascript">
var Btn=document.getElementsByTagName("input");
for(let i =0;i<Btn.length;i++){
Btn[i].onclick=function(){
alert(i);
}
}
};
</script>
</body>
</html>
第二种
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ES6块级作用域</title>
</head>
<body>
<input type="button" name="" id="" value="按钮1" />
<input type="button" name="" id="" value="按钮2" />
<input type="button" name="" id="" value="按钮3" />
<script type="text/javascript">
var Btn=document.getElementsByTagName("input");
for(var i =0;i<Btn.length;i++){
(function(i){
Btn[i].onclick=function(){
alert(i);
}
})(i);
};
};
</script>
</body>
</html>
两个方法的结果如下：
image.png
image.png
image.png
