Const trong đối tượng javascript

Đây là một quan sát đơn giản mà tôi muốn viết vì tôi hầu như chưa bao giờ thấy kỹ thuật này được sử dụng trong tự nhiên. Gần như mọi lập trình viên đều quen thuộc với ý tưởng về một "hằng số". Tôi không chỉ nói về từ khóa

// constants.js
export const SALES_TAX_ALABAMA = 0.04;
export const SALES_TAX_FLORIDA = 0.06;
export const SALES_TAX_LOUISIANA = 0.0445;

3 trong JavaScript. Tôi đang nói về khái niệm đa năng về việc có một biến được đặt một lần - và chỉ một lần - bởi vì, một khi nó được đặt, giá trị của biến đó sẽ không bao giờ thay đổi. Nói cách khác, giá trị của nó sẽ không đổi

Cách phổ biến nhất để làm điều này với JavaScript hiện đại là như vậy

const SALES_TAX_ALABAMA = 0.04;
const SALES_TAX_FLORIDA = 0.06;
const SALES_TAX_LOUISIANA = 0.0445;

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Sau khi các biến này được khởi tạo bằng từ khóa

// constants.js
export const SALES_TAX_ALABAMA = 0.04;
export const SALES_TAX_FLORIDA = 0.06;
export const SALES_TAX_LOUISIANA = 0.0445;

3, mọi nỗ lực gán lại chúng sẽ dẫn đến lỗi thời gian chạy. Và cách tiếp cận này. "hoạt động", nhưng nó có thể hơi cồng kềnh. Trong mọi tập lệnh mà bạn muốn tận dụng các biến này, bạn sẽ cần xác định trước tất cả chúng. Và cách tiếp cận đó sẽ khó sử dụng nếu các biến này được sử dụng trong toàn bộ cơ sở mã của bạn

Với JavaScript hiện đại, một cách tiếp cận thay thế sẽ là

// constants.js
export const SALES_TAX_ALABAMA = 0.04;
export const SALES_TAX_FLORIDA = 0.06;
export const SALES_TAX_LOUISIANA = 0.0445;

5 các giá trị này từ một tệp duy nhất. Cách tiếp cận đó sẽ như thế này

// constants.js
export const SALES_TAX_ALABAMA = 0.04;
export const SALES_TAX_FLORIDA = 0.06;
export const SALES_TAX_LOUISIANA = 0.0445;

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Điều này làm cho các hằng số của chúng tôi trở nên phổ biến và dễ truy cập hơn trong ứng dụng của chúng tôi. Nhưng tôi sẽ tranh luận rằng điều này vẫn còn hơi cồng kềnh. Bởi vì mỗi khi chúng tôi muốn sử dụng bất kỳ một trong các biến này bên trong một tệp khác, mỗi biến phải được đưa vào tệp đó bằng một

// constants.js
export const SALES_TAX_ALABAMA = 0.04;
export const SALES_TAX_FLORIDA = 0.06;
export const SALES_TAX_LOUISIANA = 0.0445;

6

Tôi cũng thấy cách tiếp cận này rắc rối vì nó không phải lúc nào cũng hoạt động tốt với tính năng tự động hoàn thành trong các IDE của chúng tôi. Đã bao nhiêu lần bạn đang viết mã khi bạn nhận ra rằng bạn cần tận dụng một hằng số, giống như những hằng số được hiển thị ở trên. Nhưng bạn không nhớ chính xác các biến đó được đặt tên như thế nào? . ALA. , hy vọng sẽ thấy hằng số thuế suất Bán hàng của Alabama bật lên

Nhưng IDE của bạn không cung cấp trợ giúp nào trong việc tự động hoàn thành/nhập giá trị, vì không có hằng số nào bắt đầu bằng "ALA". Vì vậy, sau khi bạn thực hiện thêm một vài nỗ lực sai lầm để lấy giá trị bằng cách nhập tên từ bộ nhớ, cuối cùng bạn bỏ cuộc và mở tệp

// constants.js
export const SALES_TAX_ALABAMA = 0.04;
export const SALES_TAX_FLORIDA = 0.06;
export const SALES_TAX_LOUISIANA = 0.0445;

7 để bạn có thể tự mình đọc toàn bộ tệp dang để xem chính xác cách các biến đó được đặt tên.

Đối tượng để giải cứu (???)

Đây là lý do tại sao tôi thích sử dụng các đối tượng JavaScript để tạo các quy ước không gian tên. (Trên thực tế, tôi đã viết cả một bài báo về nó. Bạn có thể đọc nó ở đây. https. // nhà phát triển. đến/bytebodger/why-do-js-devs-hate-namespaces-2eg1)

Khi bạn lưu các giá trị của mình dưới dạng các cặp khóa/giá trị bên trong một đối tượng, IDE của bạn sẽ trở nên mạnh mẽ hơn nhiều. Ngay khi bạn nhập tên ban đầu của đối tượng, sau đó nhập

// constants.js
export const SALES_TAX_ALABAMA = 0.04;
export const SALES_TAX_FLORIDA = 0.06;
export const SALES_TAX_LOUISIANA = 0.0445;

8, gần như bất kỳ IDE hiện đại nào cũng sẽ hiển thị tất cả các khóa tiềm năng tồn tại bên trong đối tượng đó một cách hữu ích

Điều này có nghĩa là bạn có thể cấu trúc lại tệp hằng số của mình để trông như thế này

________số 8

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Điều này tăng cường tính năng tự động hoàn thành IDE của bạn. Nhưng mà. nó đi kèm với một nhược điểm. Bởi vì, trong JavaScript, một đối tượng được xác định bằng từ khóa

// constants.js
export const SALES_TAX_ALABAMA = 0.04;
export const SALES_TAX_FLORIDA = 0.06;
export const SALES_TAX_LOUISIANA = 0.0445;

3 không thực sự là một "hằng số"

Với ví dụ trên, đoạn mã sau sẽ đưa ra một lỗi thời gian chạy rất cần thiết

const SALES_TAX_ALABAMA = 0.04;
const SALES_TAX_FLORIDA = 0.06;
const SALES_TAX_LOUISIANA = 0.0445;

0

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Nó gây ra lỗi thời gian chạy vì

// constants.js
export const CONSTANT = {
  SALES_TAX: {
    ALABAMA = 0.04;
    FLORIDA = 0.06;
    LOUISIANA = 0.0445;  
  },
};

0 được xác định bằng từ khóa

// constants.js
export const SALES_TAX_ALABAMA = 0.04;
export const SALES_TAX_FLORIDA = 0.06;
export const SALES_TAX_LOUISIANA = 0.0445;

3 và chúng tôi không thể gán lại giá trị của nó sau khi nó được đặt. Tuy nhiên. điều này không nhất thiết bảo vệ nội dung lồng nhau của đối tượng khỏi bị gán lại

Vì vậy, đoạn mã sau sẽ KHÔNG gây ra lỗi thời gian chạy

const SALES_TAX_ALABAMA = 0.04;
const SALES_TAX_FLORIDA = 0.06;
const SALES_TAX_LOUISIANA = 0.0445;

3

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Điều đó thực sự không hữu ích lắm phải không?

// constants.js export const CONSTANT = { SALES_TAX: { ALABAMA = 0.04; FLORIDA = 0.06; LOUISIANA = 0.0445; }, }; 2 Để Giải Cứu (. )

Đây là lý do tại sao tôi sử dụng

// constants.js
export const CONSTANT = {
  SALES_TAX: {
    ALABAMA = 0.04;
    FLORIDA = 0.06;
    LOUISIANA = 0.0445;  
  },
};

2 trên tất cả các hằng số của mình. (Và đó là một kỹ thuật đơn giản mà tôi hiếm khi thấy ngoài mã của chính mình. )

Mã sửa đổi trông như thế này

const SALES_TAX_ALABAMA = 0.04;
const SALES_TAX_FLORIDA = 0.06;
const SALES_TAX_LOUISIANA = 0.0445;

6

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bây giờ, nếu chúng ta cố chạy mã này, nó sẽ báo lỗi thời gian chạy

const SALES_TAX_ALABAMA = 0.04;
const SALES_TAX_FLORIDA = 0.06;
const SALES_TAX_LOUISIANA = 0.0445;

3

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Cấp, điều này hơi dài dòng, bởi vì bạn cần sử dụng

// constants.js
export const CONSTANT = {
  SALES_TAX: {
    ALABAMA = 0.04;
    FLORIDA = 0.06;
    LOUISIANA = 0.0445;  
  },
};

2 trên mọi đối tượng, ngay cả những đối tượng được lồng bên trong một đối tượng khác. Trong ví dụ trên, nếu bạn không đóng băng đối tượng

// constants.js
export const CONSTANT = {
  SALES_TAX: {
    ALABAMA = 0.04;
    FLORIDA = 0.06;
    LOUISIANA = 0.0445;  
  },
};

5, bạn vẫn có thể gán lại các giá trị của nó

Một cách tiếp cận tốt hơn

Tôi đã biết rằng một số nhà phát triển sẽ không thích cách tiếp cận này, bởi vì họ sẽ không thích phải sử dụng

// constants.js
export const CONSTANT = {
  SALES_TAX: {
    ALABAMA = 0.04;
    FLORIDA = 0.06;
    LOUISIANA = 0.0445;  
  },
};

2 trên mọi lớp đối tượng trong tệp

// constants.js
export const SALES_TAX_ALABAMA = 0.04;
export const SALES_TAX_FLORIDA = 0.06;
export const SALES_TAX_LOUISIANA = 0.0445;

7. Và đó là tốt. Có chỗ ở đây cho phong cách thay thế. Nhưng tôi chắc chắn thích phương pháp này vì một vài lý do đơn giản

Một tập tin hằng số duy nhất

Bạn không cần sử dụng

// constants.js
export const CONSTANT = {
  SALES_TAX: {
    ALABAMA = 0.04;
    FLORIDA = 0.06;
    LOUISIANA = 0.0445;  
  },
};

2 nếu bạn muốn duy trì một tệp

// constants.js
export const SALES_TAX_ALABAMA = 0.04;
export const SALES_TAX_FLORIDA = 0.06;
export const SALES_TAX_LOUISIANA = 0.0445;

7. Bạn chỉ có thể trở lại cách làm việc "truyền thống", như thế này

// constants.js
export const SALES_TAX_ALABAMA = 0.04;
export const SALES_TAX_FLORIDA = 0.06;
export const SALES_TAX_LOUISIANA = 0.0445;

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Nhưng tôi có thể nói với bạn từ hàng chục năm kinh nghiệm rằng việc mở một tệp

// constants.js
export const SALES_TAX_ALABAMA = 0.04;
export const SALES_TAX_FLORIDA = 0.06;
export const SALES_TAX_LOUISIANA = 0.0445;

7 chung có hàng trăm biến được định nghĩa trong đó không phải là điều quá bất thường. Khi điều này xảy ra, tôi thường tìm thấy một cái gì đó như thế này

// constants.js
export const SALES_TAX_ALABAMA = 0.04;
export const SALES_TAX_FLORIDA = 0.06;
export const SALES_TAX_LOUISIANA = 0.0445;

6

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bạn thấy những gì đã xảy ra ở đó?

Điều này dẫn tôi đến điểm thứ hai của tôi

Các đối tượng thúc đẩy cấu trúc đặt tên phân loại

Chắc chắn rồi, một nhà phát triển lười biếng vẫn có thể xác định giá trị cho thuế suất bán hàng của Alabama hai lần trong cùng một tệp. Ngay cả khi bạn đang sử dụng các đối tượng để giữ các giá trị đó theo quy ước phân loại. Nhưng nó ít có khả năng xảy ra hơn. Bởi vì, khi bạn đang xem xét các giá trị hiện có trong tệp

// constants.js
export const SALES_TAX_ALABAMA = 0.04;
export const SALES_TAX_FLORIDA = 0.06;
export const SALES_TAX_LOUISIANA = 0.0445;

7, sẽ dễ dàng nhận thấy rằng đã có toàn bộ "phần" dành cho thuế suất bán hàng. Điều này có nghĩa là các nhà phát triển trong tương lai có nhiều khả năng tìm thấy giá trị đã tồn tại hơn. Và nếu giá trị đó chưa tồn tại trong tệp, thì nhiều khả năng họ sẽ thêm giá trị theo đúng thứ tự phân loại

Điều này cũng trở nên hợp lý hơn nhiều khi tìm kiếm thông qua các giá trị đó bằng chức năng tự động hoàn thành của IDE của chúng tôi. Ngay khi bạn nhập

const SALES_TAX_ALABAMA = 0.04;
const SALES_TAX_FLORIDA = 0.06;
const SALES_TAX_LOUISIANA = 0.0445;

02, IDE của bạn sẽ hiển thị cho bạn tất cả các "lớp phụ" bên dưới đối tượng chính

const SALES_TAX_ALABAMA = 0.04;
const SALES_TAX_FLORIDA = 0.06;
const SALES_TAX_LOUISIANA = 0.0445;

03 và bạn sẽ dễ dàng nhận thấy ngay lập tức rằng nó đã chứa một phần dành riêng cho thuế suất bán hàng

Một đối tượng có thể là const?

Tại sao sử dụng const cho các đối tượng?

Const {} có nghĩa là gì trong JavaScript?