Phiên bản es6 của JavaScript đã giới thiệu rất nhiều tính năng có ảnh hưởng lớn đến cách mọi người viết mã JavaScript. Trong bài viết này, chúng ta sẽ xem xét một tính năng mới đi kèm với es6 cho phép các nhà phát triển tự động đặt các khóa thuộc tính cho các đối tượng của họ trong JavaScript
Trước ES6
Trước khi es6 xuất hiện, chủ yếu có hai cách để đặt khóa đối tượng
- Sử dụng trình truy cập dấu chấm
- Và sử dụng bộ truy cập dấu ngoặc vuông
Sử dụng trình truy cập dấu chấm
Bộ truy cập dấu chấm là một trong những cách phổ biến nhất để truy cập các giá trị từ hoặc đặt các giá trị vào đối tượng. Cú pháp để đặt thuộc tính đối tượng bằng trình truy cập dấu chấm như sau,
- tên của môn học. propertyKey = propertyValue;
- const người dùng = {};
- người dùng. firstName = 'Khắc nghiệt';
Vấn đề với cách tiếp cận trên là chúng ta không thể đặt các khóa đối tượng một cách linh hoạt. Ví dụ: chúng ta không thể giữ tên khóa firstName bên trong một biến rồi sử dụng biến đó để đặt cặp khóa-giá trị
Sử dụng bộ truy cập dấu ngoặc vuông
Cú pháp để đặt giá trị đối tượng bằng cách sử dụng bộ truy cập dấu ngoặc vuông như sau,
- objectName['propertyName'] = propertyValue;
- const người dùng = {};
- user['firstName'] = 'Harshal';
- const người dùng = {};
- khóa const = 'tên đầu tiên'
- user[key] = 'Harshal';
- bảng điều khiển. nhật ký [người dùng];
Phiên bản es6 của JavaScript đi kèm với một giải pháp cho vấn đề này. Bây giờ, chúng ta có thể sử dụng các biến trong khi tạo đối tượng để tự động thiết lập thuộc tính
- hãy để khóa = 'tên đầu tiên';
- const người dùng = {
- [chìa khóa]. 'Khắc nghiệt'
- };
- bảng điều khiển. nhật ký [người dùng];
Tôi hy vọng bạn thích bài viết này. Trong trường hợp bạn có bất kỳ phản hồi hoặc thắc mắc nào, vui lòng cho tôi biết trong phần bình luận
Trong phiên bản ES6 của JavaScript, các nhà phát triển có thể tự động đặt các khóa thuộc tính JavaScript cho các đối tượng của họ bằng cách sử dụng ký hiệu Dấu ngoặc
cú pháp
Thực hiện theo cú pháp đã cho để đặt khóa đối tượng động trong JavaScript với ký hiệu dấu ngoặc
[ keyVar ] = keyName ;
Trong cú pháp đã cho
- “keyVar” là tên biến lưu trữ tên của khóa sẽ được thêm động vào đối tượng
- “keyName” là tên của một khóa sẽ được đặt động trong một đối tượng
ví dụ 1
Đầu tiên, tạo một biến “newKey” để lưu tên của khóa “skill”
var newKey = 'skill';
Sau đó, tạo một đối tượng “thông tin”, với các thuộc tính “tên”, “tuổi” và “email”. Thêm một thuộc tính khác của một đối tượng bằng cách sử dụng khóa “kỹ năng” sẽ tự động thêm vào một đối tượng
thông tin var = {
tên . 'John' ,
tuổi . 28 ,
email . 'john@gmail. com' ,
[ newKey ]. 'JavaScript'
};
Gọi “bàn điều khiển. log[]” bằng cách truyền một đối tượng làm đối số để in tất cả các thuộc tính của đối tượng trong một cặp khóa-giá trị
bảng điều khiển. log[ thông tin ];
đầu ra
Đầu ra ở trên cho thấy rằng khóa động “kỹ năng” đã được thêm và truy cập thành công trong một đối tượng
ví dụ 2
Hãy in giá trị của khóa “kỹ năng” được lưu trữ trong đối tượng “thông tin”
bảng điều khiển. log[ thông tin. kỹ năng];
đầu ra
Đầu ra chỉ ra rằng đối tượng “info” truy cập thành công giá trị của biến “newKey” và lưu nó dưới dạng khóa động
Phần kết luận
Để thêm một khóa đối tượng một cách linh hoạt, hãy sử dụng ký hiệu dấu ngoặc. Đầu tiên, lưu trữ khóa trong một biến, sau đó chỉ định tên biến trong ký hiệu ngoặc để đặt khóa có giá trị dưới dạng cặp khóa-giá trị trong một đối tượng. Bài đăng trên blog này xác định khóa đối tượng động trong JavaScript