Làm cách nào để chuyển giá trị động trong đối tượng JavaScript?

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

1. Sử dụng trình truy cập dấu chấm
2. 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,

1. tên của môn học. propertyKey = propertyValue;

Hãy hiểu điều này một cách chi tiết bằng cách sử dụng một ví dụ,

1. const người dùng = {};
2. người dùng. firstName = 'Khắc nghiệt';

Trong đoạn mã trên, trước tiên chúng ta tạo một đối tượng có tên người dùng và đặt giá trị của nó thành một đối tượng bằng chữ. Và trong dòng tiếp theo, chúng tôi sẽ đặt một khóa mới cho đối tượng này có tên là firstName và đặt giá trị của nó thành 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,

1. objectName['propertyName'] = propertyValue;

Hãy xem xét một ví dụ,

1. const người dùng = {};
2. user['firstName'] = 'Harshal';

Trong đoạn mã trên, chúng tôi đang đặt giá trị cho thuộc tính FirstName thành khắc nghiệt. Và không giống như trình truy cập dấu chấm, nó cho phép chúng tôi đặt các khóa thuộc tính một cách linh hoạt

1. const người dùng = {};
2. khóa const = 'tên đầu tiên'
3. user[key] = 'Harshal';
4. bảng điều khiển. nhật ký (người dùng);

Nhưng trước es6, không thể đặt các phím động trong khi tạo đối tượng. (Như bạn có thể thấy trong đoạn mã trên, chúng tôi đang đặt khóa sau khi tạo đối tượ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

1. hãy để khóa = 'tên đầu tiên';
2. const người dùng = {
3. [chìa khóa]. 'Khắc nghiệt'
4. };
5. bảng điều khiển. nhật ký (người dùng);

Như bạn có thể thấy trong đoạn mã trên, chúng tôi đang đặt thuộc tính bằng cách sử dụng biến khóa

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

Làm cách nào để chuyển khóa động trong đối tượng bằng JavaScript?

Làm cách nào để chuyển giá trị động trong JavaScript?

Làm cách nào để chuyển khóa động cho đối tượng?

Làm cách nào để gán giá trị động cho biến trong JavaScript?