今天研究了一下关于ECMASript2015,也就是我们常称呼的ES6。关于ES6,使用'use strict'就不多说了,我详细罗列以下几点:
一.let 定义变量
let 有块级别作用域{},且目前浏览器已经支持了
举个例子来说,let可以解决for循环中加事件,事件里i不能使用的问题:
我们来看一个for循环里加事件不能用的案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
'use strict'
window.onload = function(){
var aBtn = document.getElementsByTagName('input');
for (var i =0; i<aBtn.length; i++) {
aBtn[i].onclick = function(){
alert(i); //结果是3 3 3
};
}
};
</script>
<body>
<input type="button" value="aaa" />
<input type="button" value="bbb" />
<input type="button" value="ccc" />
</body>
</html>
那我们将定义变量 var 替换为 let 试试:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
'use strict'
window.onload = function(){
var aBtn = document.getElementsByTagName('input');
for (let i =0; i<aBtn.length; i++) {
aBtn[i].onclick = function(){
alert(i); //结果是0 1 2
};
}
};
</script>
<body>
<input type="button" value="aaa" />
<input type="button" value="bbb" />
<input type="button" value="ccc" />
</body>
</html>
使用let定义变量就可以很好的解决i的问题,而不使用封闭空间。
另外:我们需要强调一点,在使用let的过程中,是不能重复声明变量的。如下:
let a = 12;
lat a = 5; //错误的重复声明会报错:Identifier 'a' has already been declared
console.log(a);
二、const 定义的是常量
当我们在写页面的过程中,如果需要一个常量来一直使用的话,比如我们需要定义一个Tab循环使用,那么我们可以使用const来定义。
举个检点的例子来验证如何使用const定义一个常量:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
const a = 12;
// const a = 5; //不能重复定义
// a = 8; //常量不能被修改
const b = 9;
alert(a);
alert(b);
</script>
<body>
</body>
</html>
所以我们在使用const过程中,需要注意这两点:
1.不能重复定义
2.常量不能修改
三、字符串模板引擎
字符串模板引擎就是我们常说的字符串拼接,通常我们在做字符串拼接时,使用'++'的方式拼接,
但是当我们遇到大量的变量需要字符串拼接起来的时候,这时候会发现,这种拼接方式是极易出错的,一不小心丢了一个单引号或者+号,字符串拼接就有问题。
那么,我们使用字符串模板引擎方式,用${}代替'++'方式来看看,:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
var name = 'facebook';
var sex = '56';
var hobby = 'chat';
var str = `我是${name},性别有${sex}种,功能是${hobby}。`;
alert(str);
</script>
<body>
</body>
</html>
省去了大量的单引号加号,看着是不是更加清晰了,也更不容易出错了呢。
在使用时,需注意我们使用的不是单引号了,而是`(tab键上边的那个键哦!)。
今天就先说到这里,未完待续。