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