关于ECMAScript2015的一些变化
2016-12-21 本文已影响0人
冰的棍儿
今天研究了一下关于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键上边的那个键哦！)。
今天就先说到这里，未完待续。
