Es6 let和const

ES6 新增了let命令,用來聲明變量。它的用法類似于var,但是所聲明的變量,只在let命令所在的代碼塊內有效。

1.let命令

  1. 不存在變量提升
console.log(a); // undefined
var a = 0;
console.log(b) //Error 
let b = 10;

2.暫時性死區

var tmp = 123;

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

其實在用let關鍵字聲明變量之前使用就是暫時性死區

咱們都知道js中的typeof方法是不會報錯的,但是到啦Es6就有可能會報錯啦,看下邊的例子

typeof(a) // Errow 報錯其實大家因該都知道啦,這里的a在聲明之前就使用 啦 就是咱們上邊說的暫時性死區的;
let a = 10;

  1. 不允許重復聲明

不允許在同一作用域內聲明同樣的變量

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

// 報錯
function func() {
  let a = 10;
  let a = 1;
}

2. 塊級作用域

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}

雖然這個判斷執行啦,但是因為塊級作用域不允許外邊的塊級作用域使用里邊的塊級作用域的東西,跟閉包的原理差不多

  1. 塊級作用域與函數聲明
    ES5 規定,函數只能在頂層作用域和函數作用域之中聲明,不能在塊級作用域聲明。
// 情況一
if (true) {
  function f() {}
}

瀏覽器為了兼容以前的舊代碼,沒有遵守這個規定,所以上邊的代碼是生效的,但是不建議大家使用.

function f() { console.log('我在外面!'); }

(function () {
  if (false) {
    function f() { console.log('我在里面'); }
  }
  f();
}());

上邊的代碼在Es5中運行會得到"我在里面"的結果,應為在判斷里邊的函數被提升到函數的頭部,實際運行代碼如下

function f() { console.log('I am outside!'); }

(function () {
  function f() { console.log('I am inside!'); }
  if (false) {
  }
  f();
}());

但是到啦Es6就不一樣啦,理論上在Es6的環境下運行結果會是"我在外面",但是真的運行的時候會報錯,為什么呢?

原來是應為Es6修改啦在塊級作用域下聲明函數的規則

允許在塊級作用域內聲明函數。
函數聲明類似于var,即會提升到全局作用域或函數作用域的頭部。
同時,函數聲明還會提升到所在的塊級作用域的頭部。

實際上在遵守Es6規定下的瀏覽器上實際的運行過程為:

function f() { console.log('我在外面!'); }
(function () {
  var f = undefined;
  if (false) {
    function f() { console.log('我在里面!'); }
  }

  f();
}());
// Uncaught TypeError: f is not a function

3.const

1.const一旦聲明并初始化,這個常亮的值就不得被改變

const a = 10;
a = 20;
// Error
  1. const一旦聲明必須初始化否則報錯
  const a;
  //Errow

3.const的作用域與let命令相同:只在聲明所在的塊級作用域內有效。

if (true) {
  const MAX = 5;
}

console.log(MAX) // Uncaught ReferenceError: MAX is not defined

4.const命令聲明的常量也是不提升,同樣存在暫時性死區,只能在聲明的位置后面使用。

if (true) {
  console.log(MAX); // ReferenceError
  const MAX = 5;
}

5.const聲明的常量,也和let一樣不可重復聲明

var message = "Hello!";
let age = 25;

// 以下兩行都會報錯
const message = "Goodbye!";
const age = 30;

實際上const并不是值不可以改變,而是這個常量的內存指向的那個地址

const foo = {};

// 為 foo 添加一個屬性,可以成功
foo.prop = 123;
foo.prop // 123

// 將 foo 指向另一個對象,就會報錯
foo = {}; // TypeError: "foo" is read-only

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容