首页 > 代码库 > es6小白学习笔记(一)

es6小白学习笔记(一)

2024-08-30 03:59:29   218人阅读

1.let和const命令

1.es6新增了let和const命令，与var用法类似，但它声明的变量只在let所在的代码块内有效(块级作用域，es5只有全局和函数作用域)

 {
     let a = 1;
     var b = 2;
 }    
 console.log(a); //a is not defined  let声明的变量只在自己的块内有效
 console.log(b); //2
 var a = [];
 for(avr i = 0; i < 10; i++){
     a[i] = function() {
        console.log(i)
     };
 }   
 
 a[3](); //  10
 //a[3])() 打印出来是10，i是var声明的，在全局范围内都有效，所以每一次循环，新的i值都会覆盖旧值，所以最后i是10

 
 var a = [];
 for(let i = 0; i < 10; i++){
     a[i] = function() {
        console.log(i)
     };
 }
 a[3](); //  3
 //a[3]()  打印出来是3，变量i是let声明的，且仅在块级作用域内有效，每个i都是不同的作用域，所以最后输出3

2.不存在变量提升

变量提升的意思是把下边的东西提到上面，在JS中，就是把定义在后面的东西（变量或函数）提升到前面来定义。

eg:  var会存在变量提升 

 var v=‘Hello‘; 
 (function(){ 
     alert(v); 
     var v=‘World‘; 
 })() ;
 //这段代码alert出来的是undefined，就是因为存在变量提升，会把定义提到前面去，赋值不会提升，变量提升之后的代码如下：

 var v=‘Hello‘; 
 (function(){ 
     var v;
     alert(v); 
     v=‘World‘; 
 })() ;

使用let命令就不会存在变量提升，所以一定要先声明后使用。

 3.暂时性死区

ES6明确规定， 如果区块中存在let和const命令， 这个区块对这些命令声明的变量， 从一开始就形成了封闭作用域。 凡是在声明之前就使用这些变
量， 就会报错。 

 var tmp = ‘www‘;
 if (true) {  
     tmp = ‘abc‘;   // tmp is not defined
     console.log(tmp);   // tmp is not defined
     let tmp; 
     console.log(tmp); // undefined
     tmp = 123;
     console.log(tmp); // 123
 }

es6使用let和const，是为了避免var没有声明就使用所带来的一些问题。

4.不允许重复声明

//以下这几种都会报错
function() {
  let a = 1;
  var a = 2;  
}

function() {
  let a = 1;
  let a = 2;  
}

function fun( arg ){
  let arg;  
}

//不报错，两个arg属于不同的块级作用域
function fun( arg ){
  {
      let arg;  
   }    

}

2.块级作用域

1.在es5中没有块级作用域

//第一种场景：内层变量覆盖外层变量
var tmp = new Date();
function f() {
    console.log(tmp);
    if (false) {
    var tmp = ‘hello world!‘
    }
}
f(); //undefined   变量提升，内层变量覆盖了外层变量


//第二种场景：循环变量泄露为全局变量
var s = ‘hello‘;
for (var i = 0; i < s.length; i++) {
    console.log(s[i]);
}
onsole.log(i); // 5    循环结束后 i泄露为全局变量

2.es6的块级作用域，let和const

一对{}就代表一个块级作用域，可以任意嵌套

{{{
    {let aa = ‘hello‘}
    console.log(aa); //报错 
}}}

{{{
    {let aa = ‘hello‘}
     let aa = ‘world‘;   //不同的作用域可以定义同名变量
}}}

 

 

 

es6小白学习笔记(一)


联系
我们