ES6也出来好久了,最近闲来无事就想着吧es6做一个系统的总结,巩固自己的知识,丰富一下博客.
为什么叫ES6
实际上是ECMA的一个打的标准,这个标准是在2015年6月发布的,正式的名字实际是es2015,ecma这个组织规定每年6月份对这个版本进行更新,所以有es2016,es2017,es2018,有的人也称其为es7 es8,当然es6较之前的es5确实做了非常大的更新,对我们开发这也是非常友好
变量的声明
废话不多扯,进入正题,
//之前的变量声明是js的var声明列如
var a=1
在es6中推出来let和const这两个声明变量的关键字
let 相当于之前的var
const 常量定义好了不能改变
在之前只有全局作用域和函数作用域,但是在es6有了块级作用域,(只要遇见{}都可以当做块)
因此,let和const的作用域只是当前的块
举个列子:
之前没有块级作用域的时候
var a=1
function f(){
if(false){
var a=2
}
console.log(a)
}
f()
不管最后的if执行不执行最后都会输出undefined因为存在预解析,函数内的a提升到函数顶部,因此输出的事undefined
但是当用let定义就不会出现这个问题
var a=1
function f(){
if(false){
let a=2
}
console.log(a)
}
f()
最后输出的一定是1,
从上边可以看出let没有预解析,不存在变量提升,并且作用域仅仅是当前的块,
再举一个典型的例子
for(var i=0;i<8;i++){
setTimeout(function(){
console.log(i)
},1000)
}
一秒后输出8个8,要解决就得用闭包
但是用let定义之后
for(let i=0;i<8;i++){
setTimeout(function(){
console.log(i)
},1000)
}
用了let之后1秒后输出1,2,3,4,5,6,7,8
还有一个列子
var arr =[];
for(var i=0; i<10; i++){
arr[i]=function(){
console.log(i);
}
}
arr[5]();//输出的是10
//用let定义之后
for(let i=0; i<10; i++){
arr[i]=function(){
console.log(i);
}
}
arr[5]();//输出的是5
还有一个最典型的列子
有三个按钮点击每个按钮弹出按钮的index
<input type="button" value="aaa">
<input type="button" value="bbb">
<input type="button" value="ccc">
//js
let aInput = document.querySelectorAll('input');
//用var定义
for(var=0; i<aInput.length; i++){
aInput[i].onclick=function(){
alert(i);
}
}
不管点击哪一个输出的永远是3,相信在实际工作中的都知道这是什么回事,之前解决就是用闭包
但是用es6之后用一个小小的let就解决了
for(let i=0; i<aInput.length; i++){
aInput[i].onclick=function(){
alert(i);
}
}
const和let的性质一样 只是const一旦定义不可再更改
比如
const a=1
a=2//Assignment to constant variable. 直接报错
let 和const还有一个特点就是在一个块级作用域内定义的变量不能重列如
let a=1
let a=2 //Identifier 'a' has already been declared