Hằng số là một định danh cho một giá trị đơn giản. Không thể sửa đổi giá trị trong quá trình thực thi tập lệnh. Trong JavaScript, câu lệnh const tạo ra một hằng số. Các hằng số tuân theo các quy tắc phạm vi giống như các biến JavaScript
Phiên bản
Việc triển khai const hiện tại là một tiện ích mở rộng dành riêng cho Mozilla và không phải là một phần của ECMAScript 5
cú pháp
const varname1 = value1 , varname2 = value2,.. varnameN = valueNThông số
varname1, varname2. tên biến đổiN. tên không đổi.
giá trị1, giá trị2. giá trị3. Giá trị của hằng số.
Ví dụ
Tài liệu web sau hiển thị chiều cao, chiều rộng và diện tích của hình chữ nhật
Mã HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8> <title>JavaScript const statement : Example-1</title> <link rel="stylesheet" type="text/css" href="example.css"> </head> <body> <h1>JavaScript : const statement</h1> <script src="const-statement-example1.js"></script> </body> </html>mã JS
const height = 400; const width = 200; var newParagraph = document.createElement("p"); var newText = document.createTextNode("Height is : "+height+" Width is : "+ width +". So, Area of the Rectangle is " + height*width + " sq.ft."); newParagraph.appendChild(newText); document.body.appendChild(newParagraph);Xem ví dụ trên trình duyệt
Tính tương thích của trình duyệt web
- Firefox & Chrome (V8) được hỗ trợ.
- Trong trường hợp Safari 5. 1. 7 và Opera 12. 00, bạn có thể thay đổi giá trị của const sau khi xác định một biến với const.
- Nó không được hỗ trợ trong Internet Explorer 6-9 hoặc trong bản xem trước của Internet Explorer 10.
Trước. JavaScript. câu lệnh return
Tiếp theo. JavaScript. Chức năng
Kiểm tra kỹ năng Lập trình của bạn với bài kiểm tra của w3resource
JavaScript. Lời khuyên trong ngày
Hiệu quả với các thao tác DOM
Truy cập DOM là điều cần thiết để tận dụng tối đa chương trình của bạn, nhưng làm như vậy nhiều lần sẽ gây ra sự lộn xộn về hình ảnh và sẽ làm chậm chương trình. Thay vào đó, hãy truy cập nó một lần và lưu trữ nó để sử dụng sau này trong một biến. Từ đó trở đi, bạn có thể truy cập trực tiếp vào biến đó thay vì DOM. Quá trình này rõ ràng hơn và hiệu quả hơn
Tìm hiểu lý do tại sao sử dụng const arr = [1, 2, 3]arr.push(4) // this is totally finearr = ['foo', 'bar'] // TypeError: Assignment to constant variable.8 làm cho mã của bạn tốt hơn và tìm hiểu ba mẹo nhanh để sử dụng nó trong mã của bạn để dễ dàng suy luận hơn
Không sử dụng var
Trước hết, không sử dụng const arr = [1, 2, 3]arr.push(4) // this is totally finearr = ['foo', 'bar'] // TypeError: Assignment to constant variable.0. Có một số điểm khác biệt giữa const arr = [1, 2, 3]arr.push(4) // this is totally finearr = ['foo', 'bar'] // TypeError: Assignment to constant variable.0, const arr = [1, 2, 3]arr.push(4) // this is totally finearr = ['foo', 'bar'] // TypeError: Assignment to constant variable.2 và const arr = [1, 2, 3]arr.push(4) // this is totally finearr = ['foo', 'bar'] // TypeError: Assignment to constant variable.3 và điều quan trọng nhất đối với tôi là const arr = [1, 2, 3]arr.push(4) // this is totally finearr = ['foo', 'bar'] // TypeError: Assignment to constant variable.2 và const arr = [1, 2, 3]arr.push(4) // this is totally finearr = ['foo', 'bar'] // TypeError: Assignment to constant variable.3 loại bỏ hành vi dễ xảy ra lỗi với biến nâng
Xem ví dụ này
// ❌ Don't do thisfunction foo() {
console.log(bar) // No error, but prints undefined
var bar = 1234
}// ✅ This is better
function foo() {
console.log(bar) // ReferenceError: bar is not defined
const bar = 1234
}
Có lỗi trong khi phát triển tốt hơn là có lỗi trong quá trình sản xuất, vì vậy tôi thích sự nghiêm ngặt của const arr = [1, 2, 3]arr.push(4) // this is totally finearr = ['foo', 'bar'] // TypeError: Assignment to constant variable.2 và const arr = [1, 2, 3]arr.push(4) // this is totally finearr = ['foo', 'bar'] // TypeError: Assignment to constant variable.3. Bên cạnh đó, lẽ ra kẻ nói dối của bạn phải cảnh báo bạn về việc biến không được xác định, vì vậy với const arr = [1, 2, 3]arr.push(4) // this is totally finearr = ['foo', 'bar'] // TypeError: Assignment to constant variable.2, const arr = [1, 2, 3]arr.push(4) // this is totally finearr = ['foo', 'bar'] // TypeError: Assignment to constant variable.3 và công cụ phù hợp, bạn sẽ không gặp phải bất kỳ vấn đề nào trước đây
Chỉ có một trường hợp mà tôi vẫn sử dụng const arr = [1, 2, 3]arr.push(4) // this is totally finearr = ['foo', 'bar'] // TypeError: Assignment to constant variable.0. Nút. js’ REPL hoặc bảng điều khiển của trình duyệt. Tại sao? . Đó là một hành vi mong muốn khi bạn đang thử nghiệm mọi thứ, nhưng không phải trong mã sản xuất
Hằng số. = bất biếnĐiều rất quan trọng là phải hiểu const arr = [1, 2, 3]arr.push(4) // this is totally finearr = ['foo', 'bar'] // TypeError: Assignment to constant variable.3. Nó không có nghĩa là bất biến
Một biến giống như một con trỏ tới một giá trị (nó là một con trỏ cho các đối tượng, nó là một giá trị được gán cho các nguyên hàm). const arr = [1, 2, 3]arr.push(4) // this is totally finearr = ['foo', 'bar'] // TypeError: Assignment to constant variable.3 ngăn không cho biến được gán cho một giá trị khác. Chúng ta có thể nói nó làm cho con trỏ trở nên bất biến, nhưng nó cũng không làm cho giá trị trở nên bất biến.
const arr = [1, 2, 3]arr.push(4) // this is totally finearr = ['foo', 'bar'] // TypeError: Assignment to constant variable.Vì vậy, hãy cẩn thận rằng các mảng và đối tượng được gán cho các biến const arr = [1, 2, 3]arr.push(4) // this is totally finearr = ['foo', 'bar'] // TypeError: Assignment to constant variable.3 có thể bị thay đổi. Tuy nhiên, các số, boolean và chuỗi là bất biến, vì vậy chúng không thể bị thay đổi. Không phải vì bạn đang sử dụng const arr = [1, 2, 3]arr.push(4) // this is totally finearr = ['foo', 'bar'] // TypeError: Assignment to constant variable.3 mà chỉ vì về bản chất chúng là bất biến
Tại sao const tốt hơnNhưng tại sao const arr = [1, 2, 3]arr.push(4) // this is totally finearr = ['foo', 'bar'] // TypeError: Assignment to constant variable.3 lại tốt hơn? . Một ví dụ siêu đơn giản
const height = 400; const width = 200; var newParagraph = document.createElement("p"); var newText = document.createTextNode("Height is : "+height+" Width is : "+ width +". So, Area of the Rectangle is " + height*width + " sq.ft."); newParagraph.appendChild(newText); document.body.appendChild(newParagraph); 1Sử dụng giá trị mặc định với. nhà điều hànhTrong nhiều tình huống, giá trị được gán cho một biến sẽ phụ thuộc vào một số điều kiện. Ví dụ, rất thường xuyên gán giá trị trả về của hàm cho nó, nhưng có thể hàm trả về const height = 400; const width = 200; var newParagraph = document.createElement("p"); var newText = document.createTextNode("Height is : "+height+" Width is : "+ width +". So, Area of the Rectangle is " + height*width + " sq.ft."); newParagraph.appendChild(newText); document.body.appendChild(newParagraph); 16 hoặc const height = 400; const width = 200; var newParagraph = document.createElement("p"); var newText = document.createTextNode("Height is : "+height+" Width is : "+ width +". So, Area of the Rectangle is " + height*width + " sq.ft."); newParagraph.appendChild(newText); document.body.appendChild(newParagraph); 17 và trong trường hợp đó, bạn muốn sử dụng giá trị mặc định. Trong trường hợp đó, bạn có thể muốn sử dụng const height = 400; const width = 200; var newParagraph = document.createElement("p"); var newText = document.createTextNode("Height is : "+height+" Width is : "+ width +". So, Area of the Rectangle is " + height*width + " sq.ft."); newParagraph.appendChild(newText); document.body.appendChild(newParagraph); 18 nhưng sau đó bạn không thể sử dụng const arr = [1, 2, 3]arr.push(4) // this is totally finearr = ['foo', 'bar'] // TypeError: Assignment to constant variable.3 vì bạn sẽ gán lại giá trị biến nếu điều kiện được đáp ứng và chúng tôi không thể làm điều đó và chúng tôi không muốn làm điều đó với const arr = [1, 2, 3]arr.push(4) // this is totally finearr = ['foo', 'bar'] // TypeError: Assignment to constant variable.3. Tuy nhiên, trong JavaScript có một giải pháp hay cho vấn đề đó
const height = 400; const width = 200; var newParagraph = document.createElement("p"); var newText = document.createTextNode("Height is : "+height+" Width is : "+ width +". So, Area of the Rectangle is " + height*width + " sq.ft."); newParagraph.appendChild(newText); document.body.appendChild(newParagraph); 7Lưu ý rằng const height = 400; const width = 200; var newParagraph = document.createElement("p"); var newText = document.createTextNode("Height is : "+height+" Width is : "+ width +". So, Area of the Rectangle is " + height*width + " sq.ft."); newParagraph.appendChild(newText); document.body.appendChild(newParagraph); 71 sẽ được sử dụng cho bất kỳ giá trị giả nào được trả về bởi const height = 400; const width = 200; var newParagraph = document.createElement("p"); var newText = document.createTextNode("Height is : "+height+" Width is : "+ width +". So, Area of the Rectangle is " + height*width + " sq.ft."); newParagraph.appendChild(newText); document.body.appendChild(newParagraph); 72
Sử dụng toán tử bậc ba ?Đôi khi bạn muốn gán giá trị này hay giá trị khác tùy thuộc vào một điều kiện không phải là giá trị đầu tiên cũng không phải là giá trị thứ hai. Bạn sẽ muốn viết lại một const height = 400; const width = 200; var newParagraph = document.createElement("p"); var newText = document.createTextNode("Height is : "+height+" Width is : "+ width +". So, Area of the Rectangle is " + height*width + " sq.ft."); newParagraph.appendChild(newText); document.body.appendChild(newParagraph); 18 trong trường hợp này. Nhưng bạn có thể sử dụng toán tử bậc ba để thay thế
const arr = [1, 2, 3]arr.push(4) // this is totally finearr = ['foo', 'bar'] // TypeError: Assignment to constant variable.1Nếu câu đủ dài tôi sẽ chia nó thành các dòng khác nhau
const arr = [1, 2, 3]arr.push(4) // this is totally finearr = ['foo', 'bar'] // TypeError: Assignment to constant variable.2Trích xuất hàmNhưng nếu có nhiều điều kiện hoặc chúng thực sự phức tạp hoặc đủ dài, bạn nên trích xuất một hàm để thay thế
const arr = [1, 2, 3]arr.push(4) // this is totally finearr = ['foo', 'bar'] // TypeError: Assignment to constant variable.3Bóng phụ. bản đánh máyMột lợi ích khác của việc sử dụng const arr = [1, 2, 3]arr.push(4) // this is totally finearr = ['foo', 'bar'] // TypeError: Assignment to constant variable.3 là trình biên dịch TypeScript sẽ tính toán các loại cho bạn
const arr = [1, 2, 3]arr.push(4) // this is totally finearr = ['foo', 'bar'] // TypeError: Assignment to constant variable.5Trong ví dụ đầu tiên, bạn phải thêm thông tin đánh máy; . Trong ví dụ thứ hai, trình biên dịch có thể khấu trừ các loại để bạn không phải viết chúng
Tuy nhiên, đôi khi bạn có thể muốn tự thêm thông tin nhập để thực thi việc nhập và ngăn chặn tương lai bạn (hoặc đồng đội) thay đổi biểu thức và do đó thay đổi loại biến