Nếu để JavaScript

Mọi người đang nói về những thay đổi lớn của ECMAScript 6 và khai báo biến trong ECMAScript 6(ES6). Về định nghĩa, đây là mô tả về const, let và var

`const` là tín hiệu cho biết mã định danh sẽ không được chỉ định lại

`let`, là tín hiệu cho biết biến có thể được gán lại, chẳng hạn như bộ đếm trong vòng lặp hoặc hoán đổi giá trị trong thuật toán. Nó cũng báo hiệu rằng biến sẽ chỉ được sử dụng trong khối mà nó được xác định, không phải lúc nào toàn bộ hàm chứa

`var` hiện là tín hiệu yếu nhất khi bạn xác định một biến trong JavaScript. Biến có thể được gán lại hoặc không, và biến có thể được sử dụng hoặc không cho toàn bộ chức năng hoặc chỉ cho mục đích của một khối hoặc vòng lặp

Hãy xem một ví dụ để hiểu theo cách tốt hơn

'var'

function run() {
    console.log(a);
    var a = 1;
}run();

Điều này sẽ in `undefined` khi `run` được gọi. Bởi vì, tất cả các biến được khai báo, với `var`, ở bất kỳ đâu trong hàm hiện tại đều được nâng lên. Điều đó có nghĩa là các khai báo `var` được xử lý trong thời gian biên dịch và công cụ JavaScript sẽ biết rằng có một biến có tên `a` tồn tại ở đâu đó trong hàm, nhưng giá trị sẽ chỉ được gán khi biểu thức gán được thực thi. Cho đến lúc đó nó sẽ có giá trị mặc định `undefined`. Đó là những gì xảy ra trong trường hợp này

`hãy`

‘use strict’;function run() {
    console.log(a);
    let a = 1;
}run();

Bạn không thể sử dụng 'let' mà không sử dụng 'usestrict';, nó sẽ báo lỗi. Bây giờ, mã sẽ đưa ra `ReferenceError`, bởi vì `let` đảm bảo rằng biến `a` chỉ hiển thị sau khi decalaring một. cũng có một kịch bản khác

‘use strict’;function run() {
    if (1 !== 1) {
       let a = 1;
     }
     console.log(a);
}
run();

Một lần nữa, mã sẽ đưa ra `ReferenceError`, bởi vì `let` đảm bảo rằng biến `a` chỉ hiển thị sau khi dán nhãn a vào khối `if`. Vì vậy, mã bên ngoài khối sẽ không biết về biến `a`

`const`. `const` chỉ tương tự như `const` của C hoặc C++. Khi bạn gán một giá trị cho biến được khai báo là `const`, bạn không thể gán một số giá trị khác cho biến const. Ví dụ,

‘use strict’;const a = 1;a = 2;

sẽ ném `TypeError. Gán cho biến không đổi. `

Ghi chú. Đừng nhầm lẫn `const` với các đối tượng có thể thay đổi. Như tôi đã nói, bạn không thể gán một số giá trị khác cho các biến const, nhưng bạn có thể sửa đổi giá trị `const`. Tham chiếu hằng số, không phải giá trị. Một từ khóa mới khác để khai báo biến trong ES6 là const, nhưng nó thường bị hiểu sai là “giá trị không đổi”. Thay vào đó, trong ES6, một const đại diện cho một tham chiếu không đổi đến một giá trị (thực tế điều này cũng đúng ở hầu hết các ngôn ngữ). Nói cách khác, con trỏ mà tên biến đang sử dụng không thể thay đổi trong bộ nhớ, nhưng thứ mà biến trỏ tới có thể thay đổi. Ví dụ,

‘use strict’;const a = {};a.a = 1;

là hoàn toàn hợp lệ, bởi vì chúng tôi không thay đổi những gì được gán cho `a`, nhưng chúng tôi đang thay đổi đối tượng được trỏ bởi `a`

Bạn có thể liên hệ với tôi nếu có bất kỳ nghi ngờ và đề xuất nào. Hãy chia sẻ điều này với những người khác nữa

Ồ, và nếu bạn thích điều này, hãy nhấp vào 💚 bên dưới. Hãy tiếp tục theo dõi không gian này và theo dõi tôi để biết thêm các bài viết về công nghệ

Người ta có thể mong đợi nó là

if(condition) {
   // inside a block
}
Code language: JavaScript (javascript)

9. Đáng ngạc nhiên là nó sẽ là

if(condition) {
   // inside a block
}
Code language: JavaScript (javascript)

0 cho cả ba chức năng. Lý do là cả ba chức năng đang sử dụng biến

if(condition) {
   // inside a block
}
Code language: JavaScript (javascript)

1 từ phạm vi bên ngoài và tại thời điểm chúng tôi thực hiện chúng (trong vòng lặp thứ hai), giá trị của

if(condition) {
   // inside a block
}
Code language: JavaScript (javascript)

1 sẽ là

if(condition) {
   // inside a block
}



Code language: JavaScript (javascript)

0 (đó là điều kiện kết thúc cho vòng lặp đầu tiên)

Bản tóm tắt. trong hướng dẫn này, bạn sẽ học cách sử dụng từ khóa JavaScript

if(condition) {
   // inside a block
}
Code language: JavaScript (javascript)

8 để khai báo các biến trong phạm vi khối

Giới thiệu về từ khóa let trong JavaScript

Trong ES5, khi bạn khai báo một biến bằng từ khóa

if(condition) {
   // inside a block
}
Code language: JavaScript (javascript)

9, phạm vi của biến là toàn cục hoặc cục bộ. Nếu bạn khai báo một biến bên ngoài hàm, phạm vi của biến là toàn cục. Khi bạn khai báo một biến bên trong một hàm, phạm vi của biến là cục bộ

ES6 cung cấp một cách khai báo biến mới bằng cách sử dụng từ khóa

if(condition) {
   // inside a block
}
Code language: JavaScript (javascript)

8. Từ khóa

if(condition) {
   // inside a block
}
Code language: JavaScript (javascript)

8 tương tự như từ khóa

if(condition) {
   // inside a block
}
Code language: JavaScript (javascript)

9, ngoại trừ các biến này là phạm vi bị chặn. Ví dụ

‘use strict’;function run() {
    console.log(a);
    let a = 1;
}run();

0

Trong JavaScript, các khối được biểu thị bằng dấu ngoặc nhọn

‘use strict’;function run() {
    console.log(a);
    let a = 1;
}run();

13 , ví dụ: ________ 114, ________ 115, ________ 116, _______ 117,

‘use strict’;function run() {
    console.log(a);
    let a = 1;
}run();

18, v.v.

if(condition) {
   // inside a block
}
Code language: JavaScript (javascript)

Xem ví dụ sau

‘use strict’;function run() {
    console.log(a);
    let a = 1;
}run();

1

Cách thức hoạt động của kịch bản

• Đầu tiên, khai báo một biến

  ‘use strict’;function run() {
      console.log(a);
      let a = 1;
  }run();

  19 và khởi tạo giá trị của nó là 10
• Thứ hai, khai báo một biến mới có cùng tên

  ‘use strict’;function run() {
      console.log(a);
      let a = 1;
  }run();

  19 bên trong khối

  ‘use strict’;function run() {
      if (1 !== 1) {
         let a = 1;
       }
       console.log(a);
  }
  run();

  11 nhưng có giá trị ban đầu là 20
• Thứ ba, xuất giá trị của biến

  ‘use strict’;function run() {
      console.log(a);
      let a = 1;
  }run();

  19 bên trong và sau khối  

  ‘use strict’;function run() {
      if (1 !== 1) {
         let a = 1;
       }
       console.log(a);
  }
  run();

  11

Bởi vì từ khóa

if(condition) {
   // inside a block
}
Code language: JavaScript (javascript)

8 khai báo một biến trong phạm vi khối, nên biến

‘use strict’;function run() {
    console.log(a);
    let a = 1;
}run();

19 bên trong khối

‘use strict’;function run() {
    if (1 !== 1) {
       let a = 1;
     }
     console.log(a);
}
run();

11 là một biến mới và nó che khuất biến

‘use strict’;function run() {
    console.log(a);
    let a = 1;
}run();

19 được khai báo ở đầu tập lệnh. Do đó, giá trị của

‘use strict’;function run() {
    console.log(a);
    let a = 1;
}run();

19 trong bảng điều khiển là

‘use strict’;function run() {
    if (1 !== 1) {
       let a = 1;
     }
     console.log(a);
}
run();

19

Khi công cụ JavaScript hoàn thành việc thực thi khối

‘use strict’;function run() {
    if (1 !== 1) {
       let a = 1;
     }
     console.log(a);
}
run();

11, biến

‘use strict’;function run() {
    console.log(a);
    let a = 1;
}run();

19 bên trong khối

‘use strict’;function run() {
    if (1 !== 1) {
       let a = 1;
     }
     console.log(a);
}
run();

11 nằm ngoài phạm vi. Do đó, giá trị của biến 

‘use strict’;function run() {
    console.log(a);
    let a = 1;
}run();

19 theo sau khối

‘use strict’;function run() {
    if (1 !== 1) {
       let a = 1;
     }
     console.log(a);
}
run();

11 là 10

JavaScript let và đối tượng toàn cầu

Khi bạn khai báo một biến toàn cục bằng từ khóa

if(condition) {
   // inside a block
}
Code language: JavaScript (javascript)

9, bạn thêm biến đó vào danh sách thuộc tính của đối tượng toàn cầu. Trong trường hợp của trình duyệt web, đối tượng chung là

‘use strict’;const a = 1;a = 2;

66. Ví dụ

‘use strict’;function run() {
    if (1 !== 1) {
       let a = 1;
     }
     console.log(a);
}
run();

1

Tuy nhiên, khi bạn sử dụng từ khóa

if(condition) {
   // inside a block
}
Code language: JavaScript (javascript)

8 để khai báo một biến, thì biến đó không được gắn vào đối tượng toàn cục như một thuộc tính. Ví dụ

‘use strict’;const a = 1;a = 2;

6

Chức năng gọi lại và cho phép JavaScript trong một vòng lặp for

Xem ví dụ sau

‘use strict’;const a = {};a.a = 1;

0

Mục đích của mã là xuất các số từ 0 đến 4 vào bảng điều khiển mỗi giây. Tuy nhiên, nó xuất ra số

‘use strict’;const a = 1;a = 2;

68 năm lần

‘use strict’;const a = {};a.a = 1;

2

Trong ví dụ này, biến

‘use strict’;const a = 1;a = 2;

69 là biến toàn cục. Sau vòng lặp, giá trị của nó là 5. Khi các hàm gọi lại được truyền cho hàm

‘use strict’;const a = {};a.a = 1;

00 thực thi, chúng tham chiếu cùng một biến

‘use strict’;const a = 1;a = 2;

69 với giá trị 5

Trong ES5, bạn có thể khắc phục sự cố này bằng cách tạo một phạm vi khác để mỗi hàm gọi lại tham chiếu đến một biến mới. Và để tạo một phạm vi mới, bạn cần tạo một chức năng. Thông thường, bạn sử dụng mẫu IIFE như sau

‘use strict’;const a = {};a.a = 1;

6

đầu ra

‘use strict’;const a = {};a.a = 1;

7

Trong ES6, từ khóa

if(condition) {
   // inside a block
}
Code language: JavaScript (javascript)

8 khai báo một biến mới trong mỗi lần lặp lại vòng lặp. Do đó, bạn chỉ cần thay thế từ khóa

if(condition) {
   // inside a block
}
Code language: JavaScript (javascript)

9 bằng từ khóa

if(condition) {
   // inside a block
}
Code language: JavaScript (javascript)

8 để khắc phục sự cố

if(condition) {
   // inside a block
}
Code language: JavaScript (javascript)

1

Để tạo mã hoàn toàn theo phong cách ES6, bạn có thể sử dụng chức năng mũi tên như sau

if(condition) {
   // inside a block
}
Code language: JavaScript (javascript)

0

Lưu ý rằng bạn sẽ tìm hiểu thêm về các hàm mũi tên trong hướng dẫn sau

khai báo lại

Từ khóa

if(condition) {
   // inside a block
}
Code language: JavaScript (javascript)

9 cho phép bạn khai báo lại một biến mà không gặp vấn đề gì

if(condition) {
   // inside a block
}
Code language: JavaScript (javascript)

1

Tuy nhiên, khai báo lại một biến bằng từ khóa

if(condition) {
   // inside a block
}
Code language: JavaScript (javascript)

8 sẽ dẫn đến lỗi

if(condition) {
   // inside a block
}
Code language: JavaScript (javascript)

2

Đây là thông báo lỗi

if(condition) {
   // inside a block
}
Code language: JavaScript (javascript)

3

JavaScript let biến và cẩu

Hãy xem xét ví dụ sau

if(condition) {
   // inside a block
}



Code language: JavaScript (javascript)

4

Mã này gây ra lỗi

if(condition) {
   // inside a block
}
Code language: JavaScript (javascript)

5

Trong ví dụ này, việc truy cập biến

‘use strict’;const a = {};a.a = 1;

07 trước khi khai báo sẽ gây ra lỗi

‘use strict’;const a = {};a.a = 1;

08. Bạn có thể nghĩ rằng một khai báo biến sử dụng từ khóa

if(condition) {
   // inside a block
}
Code language: JavaScript (javascript)

8 không nâng lên, nhưng nó có

Trên thực tế, công cụ JavaScript sẽ nâng một biến được khai báo bằng từ khóa

if(condition) {
   // inside a block
}
Code language: JavaScript (javascript)

8 lên đầu khối. Tuy nhiên, công cụ JavaScript không khởi tạo biến. Do đó, khi bạn tham chiếu một biến chưa được khởi tạo, bạn sẽ nhận được một

‘use strict’;const a = {};a.a = 1;

08

Vùng chết tạm thời (TDZ)

Một biến được khai báo bởi từ khóa

if(condition) {
   // inside a block
}
Code language: JavaScript (javascript)

8 có cái gọi là vùng chết tạm thời (TDZ). TDZ là thời gian từ khi bắt đầu tạo khối cho đến khi khai báo biến được xử lý

Ví dụ sau minh họa rằng vùng chết tạm thời dựa trên thời gian, không dựa trên vị trí

if(condition) {
   // inside a block
}
Code language: JavaScript (javascript)

6

trong ví dụ này

Đầu tiên, dấu ngoặc nhọn bắt đầu phạm vi khối mới, do đó, TDZ bắt đầu

Thứ hai, biểu thức hàm

‘use strict’;const a = {};a.a = 1;

23 truy cập biến

‘use strict’;const a = {};a.a = 1;

24. Tuy nhiên hàm

‘use strict’;const a = {};a.a = 1;

23 vẫn chưa được thực thi

Thứ ba, khai báo biến

‘use strict’;const a = {};a.a = 1;

24 và khởi tạo giá trị của nó thành

‘use strict’;const a = {};a.a = 1;

27. Thời gian từ khi bắt đầu phạm vi khối cho đến khi biến

‘use strict’;const a = {};a.a = 1;

24 được truy cập được gọi là vùng chết tạm thời. Khi công cụ JavaScript xử lý khai báo, TDZ kết thúc

Cuối cùng, gọi hàm

‘use strict’;const a = {};a.a = 1;

23 truy cập biến

‘use strict’;const a = {};a.a = 1;

24 bên ngoài TDZ

Lưu ý rằng nếu bạn truy cập một biến được khai báo bởi từ khóa

if(condition) {
   // inside a block
}
Code language: JavaScript (javascript)

8 trong TDZ, bạn sẽ nhận được một

‘use strict’;const a = {};a.a = 1;

08 như minh họa trong ví dụ sau

if(condition) {
   // inside a block
}
Code language: JavaScript (javascript)

7

Lưu ý rằng biến

‘use strict’;const a = {};a.a = 1;

63 là một biến không tồn tại, do đó, kiểu của nó là

Vùng chết tạm thời ngăn bạn vô tình tham chiếu đến một biến trước khi khai báo

Bạn có thể sử dụng let trong JavaScript không?

Tôi có thể sử dụng cái gì thay vì let trong JavaScript?

Let có cần thiết trong JavaScript không?

Let có tốt hơn VAR không?