Es6新特性之【变量-块级作用域-字符串模板-解构赋值】
Es6相对于Es5做出了很多改变，如变量的声明，箭头函数，块级作用域,模板字符串等等 本文将一一介绍Es6的新特性
变量的声明
Es6中引入了let和const来声明变量解决var的一些问题
使用var声明变量的问题
- 变量可以重复声明 变量重复的声明可能会导致一些预料不到的问题
var a = 0;
var a = 1;
console.log(a);//结果返回1 - var没有块级作用域
在es6之前是没有块级作用域的概念，只有全局作用域和函数作用域，块级作用域使变量只在当前代码块生效如
ifswitchfor……等等
if(true){
var a = 1;
}
console.log(a);//es5正常打印没有块级作用域 - var不能定义常量 在es5中没有常量或者说不能直接定义常量，要定义常量，如下 还是比较麻烦，在es6中使用const简单解决问题
- var存在变量提升 ES6之前存在变量提升,如下
console.log(a);
var a = 34;
//结果返回undifind 这里没有报错如 a 未定义什么的，这是因为变量提升机制相对于进行了下面操作
var x;
console.log(x);//undifind
x=2;
//变量提升不会赋值 下面我们通过let声明变量 1.变量重复声明
let a = 0;
let a = 1;
console.log(a); 直接报错，let不允许变量重复声明，相对es5更严谨
2.块级作用域的问题 可以将块级作用域理解为一个代码块，如if for switch等等
if(true){
let a = 1;
}
console.log(a); 报错a未定义，这里块级作用域就体现出来了，由于es6增加了块级作用域的特性，所以if里面的a与console的a完全是两个作用域，所以出现下图。
在来看一到块级作用域的案例 有如下需求 定义4个按钮 使用for循环，每次按钮被点击输出i
var btn = document.getElementsByTagName('button');
for(var i=0;i<btn.length;i++){
btn[i].onclick=function(){
console.log(i)
}
} 上面代码并不能正常运行，当我们点击按钮时，总是会输出4，而不是0,1,2,3 在没有使用es6我们可能会通过闭包来解决上面的问题
for(var i=0;i<=btn.length;i++){
!function(i){
btn[i].onclick=function(){
console.log(i)
}
}(i)
} 正常输出i实现原理也简单，通过循环创建了4个闭包函数，形成了单独的4个函数作用域。
既然是一个作用域的方式解决，那我们知道es6中有块级作用域的概念，我们将var 换成let试试
for(let i=0;i<btn.length;i++){
btn[i].onclick=function(){
console.log(i)
}
} 结果也正常输出，相对于上面的方式简单太多了
const声明常量
const PI = 1.34;
console.log(PI)//正常输出
PI = 34;
console.log(PI);//尝试修改报错 
字符串模板 在es6之前我们使用要输出字符串+变量时通过连接的方式 这种方式变量少还好，变量多了是不是很麻烦可能稍不注意少些了符号
var a = 76;
var score = 90;
console.log("你的学号为"+a+"你的成绩为"+score); 在es6中可以使用反单引号 ‘`` ’直接输出
console.log(`你的学号为a你的成绩为score`);//es6
//或
console.log(`你的学号为${a}你的成绩为${score}`) 与上面结果输出一样，但简化了许多
解构赋值 es6中新增了解构赋值的概念。 什么是解构赋值，看完下面示例你就懂了 如果我们要通过变量获取到数组的值，在es6之前这样做
var arr = ['one','two','three'];
var a = arr[0];
var b = arr[1];
var c = arr[2];
console.log(a,b,c) 使用es6解构赋值获取
let arr = ['one','two','three'];
let [a,b,c] = arr;
console.log(a,b,c)
//one two three 对象/json解构赋值
let arr = {'name':'tz','sex':'m','hobby':'eat'}
let {name,sex,hobby} = arr;
console.log(name,sex,hobby) 需要注意的是解构赋值必须满足两边的结构相同，当一边是数组时，根据数组下标赋值所以不管你左边写什么变量都可以，但对象解构赋值则根据key赋值，所以左边变量必须跟右边key相同。 解构其他写法 1.解构重命名
let arr = {name:'tz',sex:'m'};
let {name:name1,sex:sex1} = arr;
console.log(name1,sex1)//tz m 2.设置默认值
let arr = {name:'tz',sex:'m'};
let {name,sex,age=12} = arr;
console.log(name,sex,age)//tz m 12
let arr = {name:'tz',sex:'m',age:18};
let {name,sex,age=12} = arr;
console.log(name,sex,age)//tz m 18 垮值解构
let [a,,c] = [1,2,3]
console.log(a,c)//1 3 腾讯云开发者
