关于ES6的let、const那些事儿

Babel 转码器

Babel是广泛使用的一个ES6转换器,将ES6代码转换成ES5代码,从而实现在老版本的浏览器执行。

let和const命令

let所声明的变量只在let命令所在的代码块内是有效的。

{
  let a = 10;
  var b = 1;
}

a // 10
b // index.html:16 Uncaught ReferenceError: b is not defined

通过let给出了变量的作用域问题,在我们通常的for循环使用比较方便

        var a = [];
        for (var i = 0; i < 10; i++) {
            a[i] = function () {
                console.log(i);
            };
        }

        for (let i = 0; i < 10; i++) {
            a[i] = function () {
                console.log(i);
            };
        }
    a[6]()
//当用var声明变量的时候,发现,在输出框内,输出的值是10,也是就说var定义的i是全局的变量,
//所以在全局内只有一个i,当后续的值不断写入之后,不断地覆盖之前的值
//如果使用let定义变量的话,由于作用域是在块级,也就是说,每一次循环都是一个新的变量,所以我们可以输出6

变量提升

在用var定义变量时,我们可以在声明之前就使用变量,值为underfined,也就是变量提升
在使用let定义变量时,如果变量没有定义或者说,在变量定义之前就使用变量的话,会报错Uncaught ReferenceError的

        console.log(a);     //undefined
        var a = 10;

        console.log(b);     //Uncaught ReferenceError
        let b = 5;

暂时性死区

只要块级作用域存在let命令,所声明的变量就绑定了这个区域,不再受外部的影响。

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

报错!也就是首先存在全局变量tmp,在块级作用域中,对tmp的赋值在声明变量之前,导致let声明的tmp绑定了这个块级作用域
ES6 明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。
凡是在声明之前就使用这些变量,就会报错。
在let声明变量之前都是不可以使用的,在语法称作暂时性死区

var tmp = 123;
if (true) {
    let tmp;
    tmp = 'abc';
    console.log(tmp);   //abc      
}
console.log(tmp);      //123

在这种情况下对变量首先进行声明,在之后的使用中也就不会报错了。

if (true) {
  // TDZ开始
  tmp = 'abc'; // ReferenceError
  console.log(tmp); // ReferenceError

  let tmp; // TDZ结束。在let声明之前,tmp都是属于死区
  console.log(tmp); // undefined

  tmp = 123;
  console.log(tmp); // 123
}

“暂时性死区”也意味着typeof不再是一个百分之百安全的操作。在使用typeof的时候报ReferenceError错误,但是没有声明的变量报underfined错误

function bar(x = y, y = 2) {
  return [x, y];
}

bar(); // 报错,在将y赋值给x的时候,y是没有被声明的,同样在使用let x=x 的时候,也是会报错的,将x赋值给x,但是后面的x并没有被定义

不允许重复声明

let不允许在相同的作用域内,重复声明同一个变量

// 报错
function func() {
  let a = 10;
  var a = 1;
}

// 报错
function func() {
  let a = 10;
  let a = 1;
}

同时,在函数内部重新声明参数也是不可以的

function func(arg) {
  let arg;
}
func() // 报错

function func(arg) {
  {
    let arg;
  }
}
func() // 不报错

块级作用域

在ES5中,只有全局作用域和函数作用域,没有块级作用域
块级作用域实现了块级作用域之间的一个嵌套,每一个块级对应都是他的一个作用域,内外层的变量就可以不受影响

块级作用域和函数声明
在ES5中,函数只能在顶层作用域和函数作用域中声明,不能在块级作用域中声明,但是浏览器没有遵循这个规定,也就是说,在浏览器中是不会报错的
在ES6中,块级作用域必须要有大括号,否则mJavaScript引擎就认为不存在块级作用域。

const命令

const声明一个只读的常量。一旦声明,常量的值就不能改变。

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

只声明不在赋值会报错

const foo;
// SyntaxError: Missing initializer in const declaration

const的作用域与let命令相同:只在声明所在的块级作用域内有效。

if (true) {
  const MAX = 5;
}

MAX // Uncaught ReferenceError: MAX is not defined

const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。
对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指向实际数据的指针,const只能保证这个指针是固定的(即总是指向另一个固定的地址),至于它指向的数据结构是不是可变的,就完全不能控制了。

posted @ 2020-07-08 10:29  快要学不动了  阅读(264)  评论(0)    收藏  举报