ES6变量声明解析

  • A+
所属分类:Web前端
摘要

不要用 var,而是用 const 和 let,分别表示常量和变量。不同于 var 的函数作用域,const 和 let 都是块级作用域。


# const 和 let

不要用 var,而是用 const 和 let,分别表示常量和变量。不同于 var 的函数作用域,const 和 let 都是块级作用域。

1 const NUM = 1000; 2  3 let count = 0; 4 count = count + 1;

1.count

在我们使用const声明常量时,总认为值一旦声明就不可改变,其实是有误解的;

const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址不得改动。对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。

但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指针,const只能保证这个指针是固定的,至于它指向的数据结构是不是可变的,就完全不能控制了。因此,将一个对象声明为常量必须非常小心。

// 声明四个产量,分别赋予不同的类型 const NUM = 1000; const NAME = '博客园'; const TIME = {           year: 2021,           month: 4,           day: 19 } const ARR = [5, 8]  //改变常量 NUM = 1006; //不可执行 错误提示:Uncaught TypeError: Assignment to constant variable  NAME = '博客'; //不可执行 错误提示:Uncaught TypeError: Assignment to constant variable  TIME = {           year: 2022,           month: 4,           day: 19 } // 不可执行, 将 TIME 指向另一个对象,就会报错  TIME.year = 2022 // 为 TIME添加一个属性,可以成功  ARR  = ['name'] // 不可执行, 将 ARR  指向另一个数组,就会报错  ARR.push(85) // 可执行

上面代码中,常量TIME,这个地址指向一个对象。不可变的只是这个地址,即不能把TIME指向另一个地址,但对象本身是可变的,所以依然可以为其添加新属性。

如果真的想将对象冻结,应该使用Object.freeze方法。

1 const foo = Object.freeze({}); 2  3 // 常规模式时,下面一行不起作用; 4 // 严格模式时,该行会报错 5 foo.prop = 123;

上面代码中,常量foo指向一个冻结的对象,所以添加新属性不起作用,严格模式时还会报错。

除了将对象本身冻结,对象的属性也应该冻结。下面是一个将对象彻底冻结的函数。

1 var constantize = (obj) => { 2   Object.freeze(obj); 3   Object.keys(obj).forEach( (key, i) => { 4     if ( typeof obj[key] === 'object' ) { 5       constantize( obj[key] ); 6     } 7   }); 8 };

 

2.let

1.let 声明不会在全局声明时(在最顶部的范围)创建window 对象的属性。
2.let 声明的变量只在其声明的块或子块中可用,这一点,与var相似。二者之间最主要的区别在于var声明的变量的作用域是整个封闭函数。

1    { 2      let name = '小王'; 3      console.log(name );//小王 4      console.log(Window.name);//underfined 5      var age=18; 6    } 7  8   console.log(age);//18 9   console.log(name);//报错

3.在同一个函数或块作用域中重复声明同一个变量会引起SyntaxError。

 if(true){       let name= '小王';       let name= '小飞';  }  // Uncaught SyntaxError: Identifier 'name' has already been declared

4.switch 语句中只有一个块,你可能因此而遇到错误。

 1 switch(1) {  2   case 1:  3     let name;  4     break;  5   case 2:  6     let name;  7     break;  8 }  9 // Uncaught SyntaxError: Identifier 'name' has already been declared 10 //解决方法--一个嵌套在 case 子句中的块会创建一个新的块作用域的词法环境,就不会产生上诉重复声明的错误。 11 switch(1) { 12   case 1:{ 13     let name; 14     break; 15   } 16   case 2:{ 17     let name; 18     break; 19   } 20 }

5.var 与 let合并的声明方式会报SyntaxError错误, 因为var会将变量提升至块的顶部, 这会导致隐式地重复声明变量.

1   2     var name ='小王'; 3     let name = '小飞'; 4     //Uncaught SyntaxError: Identifier 'name' has already been declared 5