Làm cách nào để truy cập khóa đối tượng một cách linh hoạt trong JavaScript?

Bằng cách này, chúng tôi có thể thông báo cho TypeScript rằng biến myVar sẽ chỉ lưu trữ một chuỗi bằng với một trong các khóa trong đối tượng

Bây giờ chúng ta có thể truy cập động thuộc tính của đối tượng

Điều này là cần thiết vì TypeScript không phải lúc nào cũng có thể xác định loại chuỗi càng hẹp càng tốt

Nếu bạn cố đặt loại biến thành tổ hợp các khóa của đối tượng, bạn sẽ gặp lỗi

Cách dễ nhất để giải quyết vấn đề này là sử dụng một

Bạn cũng có thể sử dụng xác nhận loại trực tiếp trong dấu ngoặc vuông

Tuy nhiên, với phương pháp này, bạn phải sử dụng xác nhận kiểu mỗi khi bạn cố gắng truy cập động vào thuộc tính trên đối tượng

Ungalganeshtech

Theo

15 Tháng ba, 2020

·

1 phút đọc

·

Chỉ dành cho thành viên

Javascript — Cách thêm khóa động vào Đối tượng

Trong Javascript, việc tạo và thêm giá trị cho đối tượng bằng khóa tĩnh có thể được thực hiện như sau

Nhưng đôi khi bạn có thể cần thêm khóa đối tượng một cách linh hoạt

Có hai cách để truy cập hoặc lấy giá trị của một thuộc tính từ một đối tượng — ký hiệu dấu chấm (.), như obj.foo, và ký hiệu dấu ngoặc vuông ([]), như obj[foo]

Khi ký hiệu dấu chấm dễ đọc và viết hơn, ký hiệu dấu ngoặc vuông mang lại sự linh hoạt hơn nhiều vì giá trị giữa các dấu ngoặc có thể là bất kỳ biến hoặc biểu thức nào

Do đó, nếu tên thuộc tính của một đối tượng được lưu trữ trong một biến JavaScript, thì bạn có thể lấy giá trị của nó bằng cách sử dụng ký hiệu dấu ngoặc vuông, như minh họa trong ví dụ sau

Dấu ngoặc vuông được sử dụng để truy cập động các thuộc tính đối tượng trong JavaScript. Tên thuộc tính được xác định bằng một biến hoặc chuỗi bên trong các dấu ngoặc đó. Biến hoặc chuỗi này có thể được thay đổi dựa trên các điều kiện khác nhau. Đó là lý do tại sao nó được gọi là động

Trong bài viết này, chúng ta sẽ thấy các kỹ thuật khác nhau để truy cập động các thuộc tính đối tượng trong JavaScript

Cách truy cập động các thuộc tính đối tượng trong JavaScript

Hầu hết thời gian chúng tôi sử dụng ký hiệu dấu chấm (

          const person = {
    id: 1,
    firstname: 'john',
    lastname: 'doe',
    username: 'john_doe',
    email: '[email protected]',
    age: 35,
};

console.log(person.firstname);
// john

console.log(person['firstname']);
// john

        

0) để lấy giá trị từ thuộc tính đối tượng trong JavaScript. Bằng cách này, chúng tôi nhận được giá trị bằng cách sử dụng trực tiếp tên thuộc tính

Hạn chế chính của phương pháp này là không động. Điều đó có nghĩa là bạn không thể thay đổi tên thuộc tính trong mã của mình theo chương trình. Mỗi khi bạn phải nhập tên thuộc tính theo cách thủ công

Bạn có thể đáp ứng nhu cầu này bằng dấu ngoặc vuông [] thay vì sử dụng ký hiệu dấu chấm. Bạn không cần phải viết tên thuộc tính mỗi lần theo cách thủ công. Những tên này có thể được thay đổi tự động

Thuộc tính đối tượng có thể được truy cập động theo các cách sau

• Sử dụng cú pháp dấu ngoặc vuông trong JavaScript
• Xác định tên thuộc tính đối tượng bằng một chuỗi hoặc biến
• Truy cập các thuộc tính đối tượng lồng nhau bằng dấu ngoặc vuông
• Sử dụng phá hủy đối tượng để truy cập các thuộc tính đối tượng trong JS

Có nhiều phương pháp khác để truy cập các thuộc tính đối tượng trong JavaScript khi bạn không muốn thực hiện nó một cách linh hoạt

Cú pháp dấu ngoặc vuông cho các đối tượng JavaScript

Đây là cú pháp phổ biến nhất để truy cập các thuộc tính đối tượng động. Cú pháp sẽ như thế này

          objectName[propertyName]
        

Bạn phải viết tên đối tượng theo sau dấu ngoặc vuông. Bên trong các dấu ngoặc đó, bạn có thể xác định bất kỳ tên thuộc tính nào của đối tượng đó

Đối với tên thuộc tính, bạn có thể sử dụng một chuỗi hoặc một biến. Bạn không có sự linh hoạt này trong ký hiệu dấu chấm

Cũng đọc. Thủ thuật lặp qua một mảng đối tượng trong JavaScript

Truy cập các thuộc tính đối tượng một cách linh hoạt theo chuỗi trong JS

Để lấy giá trị từ một đối tượng JavaScript một cách linh hoạt, tôi sẽ sử dụng dấu ngoặc vuông và một chuỗi để xác định tên thuộc tính. Hãy xem một ví dụ

          const person = {
    id: 1,
    firstname: 'john',
    lastname: 'doe',
    username: 'john_doe',
    email: '[email protected]',
    age: 35,
};

console.log(person.firstname);
// john

console.log(person['firstname']);
// john

        

Lưu trữ đầu vào của người dùng trong một biến với

Vui lòng bật JavaScript

Lưu trữ thông tin nhập của người dùng vào một biến bằng JavaScript - Nhanh chóng và dễ dàng

Từ đối tượng

          const person = {
    id: 1,
    firstname: 'john',
    lastname: 'doe',
    username: 'john_doe',
    email: '[email protected]',
    age: 35,
};

console.log(person.firstname);
// john

console.log(person['firstname']);
// john

        

1 này, tôi đang truy cập thuộc tính

          const person = {
    id: 1,
    firstname: 'john',
    lastname: 'doe',
    username: 'john_doe',
    email: '[email protected]',
    age: 35,
};

console.log(person.firstname);
// john

console.log(person['firstname']);
// john

        

2. Lúc đầu, tôi đang sử dụng ký hiệu dấu chấm sau đó tôi đang sử dụng dấu ngoặc vuông. Cả hai đều trả về cùng một kết quả

Nhưng có một số trường hợp bạn không thể sử dụng ký hiệu dấu chấm. Ví dụ: nếu tên thuộc tính chứa ký hiệu gạch ngang (-) hoặc dấu cách, ký hiệu dấu chấm sẽ báo lỗi

          person.first-name
// throws an error

person["first-name"]
// john
        

Bạn phải sử dụng dấu ngoặc vuông trong tình huống này. Chúng ta sẽ nói về những ưu điểm của nó và khi nào bạn nên truy cập động các thuộc tính đối tượng trong phần sau một cách chi tiết

Nếu bạn cố truy cập một thuộc tính không tồn tại trong đối tượng, nó sẽ trả về không xác định. Bạn có thể kiểm tra xem một đối tượng có thuộc tính hay không bằng JavaScript nếu cần

Tự động truy cập các thuộc tính đối tượng bằng cách sử dụng biến

Trong cú pháp dấu ngoặc vuông, bạn được phép sử dụng các biến để lấy giá trị ra khỏi đối tượng JavaScript. Bạn có thể thay đổi giá trị của biến đó trong các điều kiện khác nhau và tự động nhận các thuộc tính khác nhau

          const person = {
    id: 1,
    firstname: 'john',
    lastname: 'doe',
    username: 'john_doe',
    email: '[email protected]',
    age: 35,
};

const key = 'username';

console.log(person[key]);
// john_doe

        

Bạn có thể thấy tôi có một biến

          const person = {
    id: 1,
    firstname: 'john',
    lastname: 'doe',
    username: 'john_doe',
    email: '[email protected]',
    age: 35,
};

console.log(person.firstname);
// john

console.log(person['firstname']);
// john

        

3 với giá trị tên người dùng. Tôi đang sử dụng biến

          const person = {
    id: 1,
    firstname: 'john',
    lastname: 'doe',
    username: 'john_doe',
    email: '[email protected]',
    age: 35,
};

console.log(person.firstname);
// john

console.log(person['firstname']);
// john

        

3 để truy cập thuộc tính

          const person = {
    id: 1,
    firstname: 'john',
    lastname: 'doe',
    username: 'john_doe',
    email: '[email protected]',
    age: 35,
};

console.log(person.firstname);
// john

console.log(person['firstname']);
// john

        

5 từ đối tượng

          const person = {
    id: 1,
    firstname: 'john',
    lastname: 'doe',
    username: 'john_doe',
    email: '[email protected]',
    age: 35,
};

console.log(person.firstname);
// john

console.log(person['firstname']);
// john

        

1

Nếu bạn muốn truy cập tất cả các thuộc tính từ một đối tượng, bạn phải truy cập từng thuộc tính riêng lẻ như

          const person = {
    id: 1,
    firstname: 'john',
    lastname: 'doe',
    username: 'john_doe',
    email: '[email protected]',
    age: 35,
};

console.log(person.firstname);
// john

console.log(person['firstname']);
// john

        

7,

          const person = {
    id: 1,
    firstname: 'john',
    lastname: 'doe',
    username: 'john_doe',
    email: '[email protected]',
    age: 35,
};

console.log(person.firstname);
// john

console.log(person['firstname']);
// john

        

8, v.v.

Nhưng bạn có thể làm điều này tự động bằng cách lặp qua đối tượng trong JavaScript và sử dụng dấu ngoặc vuông

          const person = {
    id: 1,
    firstname: 'john',
    lastname: 'doe',
    username: 'john_doe',
    email: '[email protected]',
    age: 35,
};

for (const property in person) {
    console.log(person[property]);
}

        

đầu ra

          1
john
doe
john_doe
[email protected]
35
        

Tôi đang lặp qua đối tượng

          const person = {
    id: 1,
    firstname: 'john',
    lastname: 'doe',
    username: 'john_doe',
    email: '[email protected]',
    age: 35,
};

console.log(person.firstname);
// john

console.log(person['firstname']);
// john

        

1 bằng cách sử dụng vòng lặp

          person.first-name
// throws an error

person["first-name"]
// john
        

0 trong JavaScript. Trong vòng lặp, tôi sẽ có từng tên thuộc tính trong biến thuộc tính

Tôi có thể sử dụng biến này để tự động nhận tất cả các giá trị thuộc tính mà không cần truy cập từng giá trị riêng lẻ

Tự động truy cập các thuộc tính đối tượng lồng nhau

Bạn có thể truy cập động các thuộc tính đối tượng lồng nhau trong JavaScript bằng cách sử dụng dấu ngoặc vuông. Bạn cần sử dụng nhiều dấu ngoặc vuông cho một đối tượng lồng nhau

          const person = {
    id: 1,
    name: {
        firstname: 'john',
        lastname: 'doe',
    },
    username: 'john_doe',
    email: '[email protected]',
    age: 35,
};

const key = 'name';

console.log(person[key]['firstname']);
// john

console.log(person['name']['firstname']);
// john

        

Tôi có một đối tượng lồng nhau với thuộc tính

          person.first-name
// throws an error

person["first-name"]
// john
        

1 cũng là một đối tượng. Thuộc tính

          person.first-name
// throws an error

person["first-name"]
// john
        

1 chứa hai thuộc tính lồng nhau

Để truy cập các thuộc tính lồng nhau này, tôi phải sử dụng 2 dấu ngoặc vuông. Một cho

          person.first-name
// throws an error

person["first-name"]
// john
        

1 khác cho tên thuộc tính lồng nhau

Bạn có thể sử dụng chuỗi, biến hoặc cả hai cùng nhau để truy cập thuộc tính đối tượng lồng nhau trong JavaScript

Sử dụng Object Destructuring để truy cập các thuộc tính một cách linh hoạt

Bạn có thể sử dụng tính năng phá hủy đối tượng JavaScript để truy cập các thuộc tính một cách linh hoạt. Với kỹ thuật này, chúng ta có thể trích xuất bất kỳ thuộc tính đối tượng nào một cách dễ dàng

          const person = {
    id: 1,
    firstname: 'john',
    lastname: 'doe',
    username: 'john_doe',
    email: '[email protected]',
    age: 35,
};

const { email, username } = person;

console.log(email);
// [email protected]

console.log(username);
// john_doe

        

Tôi đang nhận các thuộc tính

          person.first-name
// throws an error

person["first-name"]
// john
        

4 và

          const person = {
    id: 1,
    firstname: 'john',
    lastname: 'doe',
    username: 'john_doe',
    email: '[email protected]',
    age: 35,
};

console.log(person.firstname);
// john

console.log(person['firstname']);
// john

        

5 từ đối tượng người có tính hủy. Bạn có thể truy cập bao nhiêu thuộc tính tùy thích, được phân tách bằng dấu phẩy

Nó sẽ tạo các biến

          person.first-name
// throws an error

person["first-name"]
// john
        

4 và

          const person = {
    id: 1,
    firstname: 'john',
    lastname: 'doe',
    username: 'john_doe',
    email: '[email protected]',
    age: 35,
};

console.log(person.firstname);
// john

console.log(person['firstname']);
// john

        

5 với các giá trị thuộc tính. Bây giờ bạn có thể sử dụng các biến đó để lấy các giá trị từ chúng

Ưu điểm của việc truy cập các thuộc tính đối tượng một cách linh hoạt

Mặc dù hầu hết thời gian, chúng tôi sử dụng ký hiệu dấu chấm để truy cập các thuộc tính từ một đối tượng trong JavaScript. Nhưng có một số trường hợp chúng ta không thể sử dụng ký hiệu dấu chấm

Ngoài ra còn có một số lợi thế của việc sử dụng dấu ngoặc vuông. Hãy thảo luận về những tình huống mà bạn phải sử dụng cú pháp dấu ngoặc vuông và một số ưu điểm chính với các ví dụ

• Mã định danh không hợp lệ trong tên thuộc tính. Nếu tên thuộc tính có số nhận dạng không hợp lệ như ký hiệu gạch ngang (-), dấu cách hoặc số ở đầu, thì bạn không thể sử dụng ký hiệu dấu chấm. Đó là lý do tại sao bạn cần sử dụng dấu ngoặc vuông

          const person = {
    id: 1,
    'first-name': 'john',
    'last name': 'doe',
    '2username': 'john_doe',
    email: '[email protected]',
    age: 35,
};

console.log(person.first-name);
// throws SyntaxError

console.log(person.2username);
// throws SyntaxError

console.log(person['first-name']);
// john

console.log(person['2username']);
// john_doe


        

Như bạn có thể thấy, đối tượng

          const person = {
    id: 1,
    firstname: 'john',
    lastname: 'doe',
    username: 'john_doe',
    email: '[email protected]',
    age: 35,
};

console.log(person.firstname);
// john

console.log(person['firstname']);
// john

        

1 chứa các thuộc tính có số nhận dạng không hợp lệ. Bạn không thể truy cập các thuộc tính

          person.first-name
// throws an error

person["first-name"]
// john
        

9,

          const person = {
    id: 1,
    firstname: 'john',
    lastname: 'doe',
    username: 'john_doe',
    email: '[email protected]',
    age: 35,
};

const key = 'username';

console.log(person[key]);
// john_doe

        

0 hoặc

          const person = {
    id: 1,
    firstname: 'john',
    lastname: 'doe',
    username: 'john_doe',
    email: '[email protected]',
    age: 35,
};

const key = 'username';

console.log(person[key]);
// john_doe

        

1 có ký hiệu dấu chấm. Nó sẽ báo lỗi cú pháp

Cách duy nhất để truy cập các thuộc tính đó là theo cú pháp dấu ngoặc vuông. Bên trong dấu ngoặc, bạn phải xác định tên thuộc tính dưới dạng chuỗi

• Đổi tên BĐS có điều kiện. Nếu bạn đang sử dụng cú pháp dấu ngoặc vuông, Bạn có thể thay đổi tên thuộc tính bằng điều kiện

          const person = {
    id: 1,
    firstname: 'john',
    lastname: 'doe',
    username: 'john_doe',
    email: '[email protected]',
    age: 35,
};

let key = '';

if (condition) {
    key = 'lastname';
} else {
    key = 'firstname';
}

console.log(person[key]);

        

Nếu điều kiện đúng, biến

          const person = {
    id: 1,
    firstname: 'john',
    lastname: 'doe',
    username: 'john_doe',
    email: '[email protected]',
    age: 35,
};

console.log(person.firstname);
// john

console.log(person['firstname']);
// john

        

3 sẽ bằng

          const person = {
    id: 1,
    firstname: 'john',
    lastname: 'doe',
    username: 'john_doe',
    email: '[email protected]',
    age: 35,
};

const key = 'username';

console.log(person[key]);
// john_doe

        

3. Nếu không, Nó sẽ bằng

          const person = {
    id: 1,
    firstname: 'john',
    lastname: 'doe',
    username: 'john_doe',
    email: '[email protected]',
    age: 35,
};

console.log(person.firstname);
// john

console.log(person['firstname']);
// john

        

2. Chúng tôi có thể nhận được các giá trị khác nhau từ

          const person = {
    id: 1,
    firstname: 'john',
    lastname: 'doe',
    username: 'john_doe',
    email: '[email protected]',
    age: 35,
};

const key = 'username';

console.log(person[key]);
// john_doe

        

5 dựa trên điều kiện

• Trích xuất các thuộc tính cụ thể từ một đối tượng. Bằng cách truy cập động các thuộc tính đối tượng bằng cách sử dụng tính năng hủy, bạn có thể nhận các thuộc tính cụ thể từ một đối tượng
• Lặp qua các thuộc tính đối tượng. Khi chúng ta truy cập các thuộc tính đối tượng một cách linh hoạt bằng cách sử dụng các biến, việc lặp lại các thuộc tính đối tượng trở nên rất dễ dàng. Bằng cách này, chúng tôi có thể nhận được tất cả các giá trị mà không cần truy cập các thuộc tính đó theo cách thủ công

Cũng đọc. Hơn 6 cách tìm đối tượng trong một mảng đối tượng bằng JavaScript

Khi nào nên truy cập các thuộc tính đối tượng một cách linh hoạt

Trong khi viết mã, hầu hết thời gian chúng ta truy cập các giá trị thuộc tính riêng lẻ bằng ký hiệu dấu chấm. Nhưng bạn đã thấy một số trường hợp chúng ta không thể sử dụng nó

Chúng tôi cũng nhận được một số lợi thế bằng cách truy cập các thuộc tính một cách linh hoạt trong một số trường hợp. Đối với tôi, thật tốt khi sử dụng cả hai kết hợp dựa trên các yêu cầu

Thông thường, bạn nên sử dụng ký hiệu dấu chấm để lấy giá trị từ một đối tượng. Bởi vì nó rất dễ dàng và được chấp nhận rộng rãi trong thế giới lập trình

Khi cần sử dụng biến để lấy giá trị từ đối tượng thì phải lấy động. Nếu tên thuộc tính mà bạn muốn truy cập thay đổi theo các điều kiện khác nhau, bạn có thể truy cập thuộc tính đó một cách linh hoạt

Phần kết luận

Nhận các giá trị từ một đối tượng bằng cách sử dụng tên thuộc tính là một tác vụ rất phổ biến trong JavaScript. Khả năng trích xuất các giá trị bằng cách sử dụng các thuộc tính đối tượng động mang lại cho chúng tôi nhiều sức mạnh và tính linh hoạt hơn

Chúng ta có thể truy cập các thuộc tính đối tượng một cách linh hoạt bằng cách sử dụng cú pháp dấu ngoặc vuông. Theo cách này, chúng ta có thể sử dụng các chuỗi hoặc biến đơn giản để xác định thuộc tính nào chúng ta muốn truy cập

Bạn có thể truy cập các thuộc tính đối tượng lồng nhau và tự động lặp qua các thuộc tính đó. Trong khi viết mã, bạn thường gặp phải loại yêu cầu này trong ứng dụng của mình

Đó là lý do tại sao bạn nên biết cách truy cập động các thuộc tính đối tượng trong JavaScript cùng với các cách phổ biến khác

Làm cách nào để truy cập khóa đối tượng động trong JavaScript?

Làm cách nào để truy cập khóa đối tượng trong JavaScript?

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

Làm cách nào để lấy giá trị đối tượng theo biến chính trong JavaScript?