前端學習OneDay--JS ES6之let和const

一、ECMAScript 和 JavaScript 的關係

ECMAScript 和 JavaScript，前者是後者的規格，後者是前者的一種實現。ES6 這個詞的原意，就是指 JavaScript 語言的下一個版本

二、let 和 const 命令

(1)let命令

let命令，用來聲明變量。它的用法類似於var，但是所聲明的變量，只在let命令所在的代碼塊內有效.

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

a // 1
b // b is not defined.

上面代碼中,分別聲明瞭a和b然後再外部，只有var聲明的變量返回了正確的值。這表明let聲明的變量只在它所在的定義域中有效。

那麼let一般都會用在什麼地方呢？for循環就很適合let命令

for(let i = 0; i < 10; i++){
    //...
}
console.log(i) // i is not defined.


var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10
//因爲i是全局變量，每一次循環i都會賦值給console.log(i)，這裏i也就是指全局的i,所以a數組中的所有值都指向同一個i，也就是10


var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6
// 變量i是let聲明的，當前的i只在本輪循環有效，所以每一次循環的i其實都是一個新的變量，所以最後輸出的是6

變量提升

// var 的情況
console.log(foo); // 輸出undefined
var foo = 2;

// let 的情況
console.log(bar); // 報錯ReferenceError
let bar = 2;

變量foo用var命令聲明，會發生變量提升，即腳本開始運行時，變量foo已經存在了，但是沒有值，所以會輸出undefined。變量bar用let命令聲明，不會發生變量提升。這表示在聲明它之前，變量bar是不存在的，這時如果用到它，就會拋出一個錯誤。

暫時性死區

var tmp = 123;

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

只要函數區域內存在let聲明，那麼它聲明的變量就會綁定這個區域，不受外部影響。所以在上述代碼中，雖然聲明var全局變量tmp，但是因爲if中存在let聲明的tmp，那麼在聲明前對tmp賦值會報錯。

ES6 明確規定，如果函數中存在let和const命令，這個區塊對這些命令聲明的變量，從一開始就形成了封閉作用域。凡是在聲明之前就使用這些變量，就會報錯。

不允許重複聲明

// 報錯
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
}

上面的函數有兩個代碼塊，都聲明瞭變量n，運行後輸出 5。這表示外層代碼塊不受內層代碼塊的影響。如果兩次都使用var定義變量n，最後輸出的值纔是 10

// ES6 允許塊級作用域的任意嵌套。
{{{{
  {let insane = 'Hello World'}
  console.log(insane); // 報錯
}}}};

// 內層作用域可以定義外層作用域的同名變量。
{{{{
  let insane = 'Hello World';
  {let insane = 'Hello World'}
}}}};

// 塊級作用域的出現，實際上使得獲得廣泛應用的匿名立即執行函數表達式（匿名 IIFE）不再必要了。
// IIFE 寫法
(function () {
  var tmp = ...;
  ...
}());

// 塊級作用域寫法
{
  let tmp = ...;
  ...
}

塊級作用域與函數聲明

ES6 引入了塊級作用域，明確允許在塊級作用域之中聲明函數。ES6 規定，塊級作用域之中，函數聲明語句的行爲類似於let，在塊級作用域之外不可引用。

// ES5 環境
function f() { console.log('I am outside!'); }

(function () {
  if (false) {
    // 重複聲明一次函數f
    function f() { console.log('I am inside!'); }
  }

  f();
}());

// 上述代碼在ES5中會得到  I am inside!  因爲在if內聲明f函數會被提升到頭部，實際運行效果如下

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

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

// ES6環境
function f() { console.log('I am outside!'); }

(function () {
  if (false) {
    // 重複聲明一次函數f
    function f() { console.log('I am inside!'); }
  }

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

如果改變了塊級作用域內聲明的函數的處理規則，顯然會對老代碼產生很大影響。爲了減輕因此產生的不兼容問題，ES6 在附錄 B裏面規定，瀏覽器的實現可以不遵守上面的規定，有自己的行爲方式。

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

上面三條規則只對 ES6 的瀏覽器實現有效，其他環境的實現不用遵守，還是將塊級作用域的函數聲明當作let處理

// 考慮到環境導致的行爲差異太大，應該避免在塊級作用域內聲明函數。如果確實需要，也應該寫成函數表達式，而不是函數聲明語句。

// 塊級作用域內部的函數聲明語句，建議不要使用
{
  let a = 'secret';
  function f() {
    return a;
  }
}

// 塊級作用域內部，優先使用函數表達式
{
  let a = 'secret';
  let f = function () {
    return a;
  };
}

(3)const 命令

const聲明一個只讀的常量。一旦聲明，常量的值就不能改變。

const PI = 3.1415;
PI // 3.1415

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

const聲明的變量不得改變值，這意味着，const一旦聲明變量，就必須立即初始化，不能留到以後賦值

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

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

if (true) {
  const MAX = 5;
}

MAX // Uncaught ReferenceError: MAX is not defined

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

if (true) {
  console.log(MAX); // ReferenceError
  const MAX = 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


const a = [];
a.push('Hello'); // 可執行
a.length = 0;    // 可執行
a = ['Dave'];    // 報錯

上面代碼中，常量foo儲存的是一個地址，這個地址指向一個對象。不可變的只是這個地址，即不能把foo指向另一個地址，但對象本身是可變的，所以依然可以爲其添加新屬性。

（4）頂層對象的屬性

頂層對象，在瀏覽器環境指的是window對象，在 Node 指的是global對象。

ES6中var命令和function命令聲明的全局變量是頂層對象的屬性；另一方面，let命令、const命令、class命令聲明的全局變量，不屬於頂層對象的屬性。

var a = 1;
// 如果在 Node 的 REPL 環境，可以寫成 global.a
// 或者採用通用方法，寫成 this.a
window.a // 1

let b = 1;
window.b // undefined

（5）globalThis 對象

頂層對象在各個環境中是不同的

瀏覽器裏面，頂層對象是window，但 Node 和 Web Worker 沒有window。
瀏覽器和 Web Worker 裏面，self也指向頂層對象，但是 Node 沒有self。
Node 裏面，頂層對象是global，但其他環境都不支持。

下面是兩種勉強可以使用的方法。

// 方法一
(typeof window !== 'undefined'
   ? window
   : (typeof process === 'object' &&
      typeof require === 'function' &&
      typeof global === 'object')
     ? global
     : this);

// 方法二
var getGlobal = function () {
  if (typeof self !== 'undefined') { return self; }
  if (typeof window !== 'undefined') { return window; }
  if (typeof global !== 'undefined') { return global; }
  throw new Error('unable to locate global object');
};

ES2020 在語言標準的層面，引入globalThis作爲頂層對象。也就是說，任何環境下，globalThis都是存在的，都可以從它拿到頂層對象，指向全局環境下的this。

前端學習OneDay--JS ES6之let和const

一、ECMAScript 和 JavaScript 的關係

二、let 和 const 命令

(1)let命令

變量提升

暫時性死區

(2)塊級作用域

塊級作用域與函數聲明

(3)const 命令

（4）頂層對象的屬性

（5）globalThis 對象

06Python爬蟲---正則表達式05之實戰

05Python爬蟲---小結

07Python爬蟲---Cookie實戰

08Python爬蟲---正則和Cookie小結

前端學習OneDay--JS ES6之let和const

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結