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à9. Đáng ngạc nhiên là nó sẽ làCode language: JavaScript [javascript]
if[condition] { // inside a block }
0 cho cả ba chức năng. Lý do là cả ba chức năng đang sử dụng biếnCode language: JavaScript [javascript]
if[condition] { // inside a block }
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ủaCode language: JavaScript [javascript]
if[condition] { // inside a block }
1 sẽ làCode language: JavaScript [javascript]
if[condition] { // inside a block }
0 [đó là điều kiện kết thúc cho vòng lặp đầu tiên]
if[condition] { // inside a block }
Code language: JavaScript [javascript]
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
8 để khai báo các biến trong phạm vi khốiCode language: JavaScript [javascript]
if[condition] { // inside a block }
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
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ộCode language: JavaScript [javascript]
if[condition] { // inside a block }
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
8. Từ khóaCode language: JavaScript [javascript]
if[condition] { // inside a block }
8 tương tự như từ khóaCode language: JavaScript [javascript]
if[condition] { // inside a block }
9, ngoại trừ các biến này là phạm vi bị chặn. Ví dụCode language: JavaScript [javascript]
if[condition] { // inside a block }
‘use strict’;function run[] {0
console.log[a];
let a = 1;
}run[];
Trong JavaScript, các khối được biểu thị bằng dấu ngoặc nhọn
‘use strict’;function run[] {13 , ví dụ: ________ 114, ________ 115, ________ 116, _______ 117,
console.log[a];
let a = 1;
}run[];
‘use strict’;function run[] {18, v.v.
console.log[a];
let a = 1;
}run[];
Code language: JavaScript [javascript]
if[condition] { // inside a block }
Xem ví dụ sau
‘use strict’;function run[] {1
console.log[a];
let a = 1;
}run[];
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[] {
19 và khởi tạo giá trị của nó là 10
console.log[a];
let a = 1;
}run[]; - Thứ hai, khai báo một biến mới có cùng tên
‘use strict’;function run[] {
19 bên trong khối
console.log[a];
let a = 1;
}run[];‘use strict’;function run[] {
11 nhưng có giá trị ban đầu là 20
if [1 !== 1] {
let a = 1;
}
console.log[a];
}
run[]; - Thứ ba, xuất giá trị của biến
‘use strict’;function run[] {
19 bên trong và sau khối
console.log[a];
let a = 1;
}run[];‘use strict’;function run[] {
11
if [1 !== 1] {
let a = 1;
}
console.log[a];
}
run[];
Bởi vì từ khóa
8 khai báo một biến trong phạm vi khối, nên biếnCode language: JavaScript [javascript]
if[condition] { // inside a block }
‘use strict’;function run[] {19 bên trong khối
console.log[a];
let a = 1;
}run[];
‘use strict’;function run[] {11 là một biến mới và nó che khuất biến
if [1 !== 1] {
let a = 1;
}
console.log[a];
}
run[];
‘use strict’;function run[] {19 được khai báo ở đầu tập lệnh. Do đó, giá trị của
console.log[a];
let a = 1;
}run[];
‘use strict’;function run[] {19 trong bảng điều khiển là
console.log[a];
let a = 1;
}run[];
‘use strict’;function run[] {19
if [1 !== 1] {
let a = 1;
}
console.log[a];
}
run[];
Khi công cụ JavaScript hoàn thành việc thực thi khối
‘use strict’;function run[] {11, biến
if [1 !== 1] {
let a = 1;
}
console.log[a];
}
run[];
‘use strict’;function run[] {19 bên trong khối
console.log[a];
let a = 1;
}run[];
‘use strict’;function run[] {11 nằm ngoài phạm vi. Do đó, giá trị của biến
if [1 !== 1] {
let a = 1;
}
console.log[a];
}
run[];
‘use strict’;function run[] {19 theo sau khối
console.log[a];
let a = 1;
}run[];
‘use strict’;function run[] {11 là 10
if [1 !== 1] {
let a = 1;
}
console.log[a];
}
run[];
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
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àCode language: JavaScript [javascript]
if[condition] { // inside a block }
‘use strict’;const a = 1;a = 2;66. Ví dụ
‘use strict’;function run[] {1
if [1 !== 1] {
let a = 1;
}
console.log[a];
}
run[];
Tuy nhiên, khi bạn sử dụng từ khóa
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ụCode language: JavaScript [javascript]
if[condition] { // inside a block }
‘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
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óaCode language: JavaScript [javascript]
if[condition] { // inside a block }
9 bằng từ khóaCode language: JavaScript [javascript]
if[condition] { // inside a block }
8 để khắc phục sự cốCode language: JavaScript [javascript]
if[condition] { // inside a block }
1Code language: JavaScript [javascript]
if[condition] { // inside a block }
Để 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
0Code language: JavaScript [javascript]
if[condition] { // inside a block }
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
9 cho phép bạn khai báo lại một biến mà không gặp vấn đề gìCode language: JavaScript [javascript]
if[condition] { // inside a block }
1Code language: JavaScript [javascript]
if[condition] { // inside a block }
Tuy nhiên, khai báo lại một biến bằng từ khóa
8 sẽ dẫn đến lỗiCode language: JavaScript [javascript]
if[condition] { // inside a block }
2Code language: JavaScript [javascript]
if[condition] { // inside a block }
Đây là thông báo lỗi
3Code language: JavaScript [javascript]
if[condition] { // inside a block }
JavaScript let biến và cẩu
Hãy xem xét ví dụ sau
4
if[condition] { // inside a block }
Code language: JavaScript [javascript]
Mã này gây ra lỗi
5Code language: JavaScript [javascript]
if[condition] { // inside a block }
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
8 không nâng lên, nhưng nó cóCode language: JavaScript [javascript]
if[condition] { // inside a block }
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
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ộtCode language: JavaScript [javascript]
if[condition] { // inside a block }
‘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
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ýCode language: JavaScript [javascript]
if[condition] { // inside a block }
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í
6Code language: JavaScript [javascript]
if[condition] { // inside a block }
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
8 trong TDZ, bạn sẽ nhận được mộtCode language: JavaScript [javascript]
if[condition] { // inside a block }
‘use strict’;const a = {};a.a = 1;08 như minh họa trong ví dụ sau
7Code language: JavaScript [javascript]
if[condition] { // inside a block }
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