ES6系列之变量声明let const

Posted 2021-02-03 maniteresting

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