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

Bạn với tư cách là nhà phát triển JavaScript luôn tìm cách lấy giá trị của khóa từ một đối tượng. Đây là một nhiệm vụ rất phổ biến trong JavaScript. Trong bài viết này, bạn sẽ tìm hiểu cách đối tượng Javascript nhận giá trị theo khóa

Mục lục

khóa đối tượng javascript

Khóa của đối tượng là tên của thuộc tính.

Bạn có thể coi khóa là chỉ mục được đặt tên của một mảng kết hợp. JavaScript không có mảng kết hợp. Thay vào đó, các đối tượng JavaScript được sử dụng để lưu trữ các cặp khóa-giá trị

Nói chung, khóa của đối tượng đã được biết và sử dụng khóa này, bạn có thể truy cập giá trị của đối tượng

Có 2 cách để truy xuất giá trị của đối tượng

1. Sử dụng ký hiệu dấu chấm
2. Sử dụng dấu ngoặc vuông

1. Sử dụng ký hiệu dấu chấm

Ký hiệu dấu chấm là cách được sử dụng phổ biến nhất để truy cập giá trị của đối tượng.

Để sử dụng, hãy viết tên của đối tượng theo sau là dấu chấm và sau đó là tên của khóa. Ví dụ người. tên (trong đó người là một đối tượng và tên là chìa khóa).

Ví dụ

var person = {
  name: "John",
  age: 30,
  city: "New York"
};

// access value of object
// using dot notation
console.log(person.name); // John
console.log(person.age); // 30
console.log(person.city); // New York

chạy ở đây

Đoạn mã trên sẽ in giá trị của tên khóa trong bảng điều khiển

2. Sử dụng dấu ngoặc vuông

Dấu ngoặc vuông square bracket là một cách khác để truy cập giá trị của đối tượng.

Để sử dụng, hãy viết tên của đối tượng theo sau dấu ngoặc vuông và sau đó là tên của khóa. Ví dụ person["name"] (trong đó person là đối tượng và tên là khóa).

Ví dụ

var person = {
  name: "John",
  age: 30,
  city: "New York"
};

// access value of object
// using square bracket
console.log(person["name"]); // John
console.log(person["age"]); // 30
console.log(person["city"]); // New York

chạy ở đây

Đối tượng Javascript nhận giá trị theo biến khóa

Đôi khi bạn có khóa của một đối tượng được lưu trữ trong một biến và bạn muốn truy cập giá trị của khóa. Đây là một kịch bản rất phổ biến.

Khi bạn cố gắng truy cập giá trị ngay bây giờ bằng cách sử dụng biến, nó sẽ cho bạn không xác định

Đây là một ví dụ để hiển thị điều này

Ví dụ

const person = {
  name: "John",
  age: 30,
  city: "New York"
};
// key stored in a variable
var userName = "name";

// trying to access value using dot notation
console.log(person.userName); // undefined

chạy ở đây

Mã trên sẽ in không xác định trong bảng điều khiển vì Javascript coi 'tên người dùng' là khóa chứ không phải biến. Vì biến không phải là khóa của đối tượng, nên nó sẽ cho bạn không xác định.

Vì vậy, để truy cập giá trị của đối tượng khi bạn có khóa được lưu trong một biến, hãy sử dụng ký hiệu dấu ngoặc vuông

Ví dụ

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

// key stored in a variable
var userName = "name";

// using square bracket
console.log(person[userName]); // John

chạy ở đây

Lưu ý . Luôn sử dụng ký hiệu dấu ngoặc vuông khi bạn lưu trữ khóa trong một biến.

Đây là một ví dụ khác trong đó khóa được chuyển vào hàm Javascript và bạn phải sử dụng đối số để truy cập giá trị

Ví dụ

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

// using square bracket to access value
// stored in a variable (argument)
function getValue(key) {
  return person[key];
}

console.log(getValue("name")); // John

chạy ở đây

Đối tượng Javascript nhận giá trị theo chuỗi khóa

Tương tự như ví dụ trước, khi bạn chỉ cần có khóa là một chuỗi, bạn có thể truy cập giá trị của khóa

Giống như ví dụ trước, bạn không thể sử dụng ký hiệu dấu chấm để truy cập giá trị của khóa. Bạn phải sử dụng ký hiệu dấu ngoặc vuông .

Ví dụ

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

// key as a string
// using square bracket
console.log(person["name"]); // John
console.log(person["age"]); // 30
console.log(person["city"]); // New York

chạy ở đây

báo cáo quảng cáo này

Đối tượng Javascript nhận giá trị theo khóa trong mảng

Như chúng ta đã biết, Đối tượng. keys() trả về một mảng gồm tất cả các khóa của đối tượng.

Vì vậy, bạn có một dãy khóa và bạn muốn truy cập giá trị của khóa. Đây là kịch bản tương tự như việc lặp lại các khóa đối tượng trong một mảng

Ví dụ

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

// get all keys of the object
const keys = Object.keys(person);

// getting value of the keys in array
for (let i = 0; i < keys.length; i++) {
  console.log(person[keys[i]]);
}

chạy ở đây

Trong ví dụ trên, chúng tôi đang lặp lại các khóa của đối tượng và lưu trữ các khóa trong một mảng. Sau đó, chúng tôi đang truy cập giá trị của khóa bằng ký hiệu dấu ngoặc vuông

JavaScript truy cập thuộc tính đối tượng lồng nhau có biến

Khi bạn có một đối tượng lồng nhau, sau đó bắt đầu xâu chuỗi các phím bằng cách sử dụng ký hiệu dấu chấm hoặc dấu ngoặc vuông. Nhưng vì bạn có khóa được lưu trữ trong một biến, nên bạn phải sử dụng ký hiệu dấu ngoặc vuông

Hãy để đối tượng của bạn như thế này

const person = {
  name: "John",
  age: 30,
  hobbies: {
    music: "guitar",
    sport: "football"
  },
  education: {
    highSchool: "St. John's High School",
    marks: [{ maths: "A+" }, { science: "B+" }]
  },
  city: "New York"
}

Bây giờ bạn muốn truy cập điểm của môn học đầu tiên. Đơn giản chỉ cần bắt đầu chuỗi với ký hiệu dấu ngoặc vuông. Ví dụ person["education"]["marks"][0]["maths"] sẽ cho bạn . .

Đây là một ví dụ để hiển thị điều này

Ví dụ

chạy ở đây

Phần kết luận

Trong bài viết ngắn này, chúng ta hiểu cách đối tượng Javascript nhận giá trị theo khóa. Bạn có thể sử dụng ký hiệu dấu chấm hoặc ký hiệu dấu ngoặc vuông để truy cập giá trị của . Nhưng nếu bạn có khóa được lưu trữ trong một biến, bạn phải sử dụng ký hiệu dấu ngoặc vuông.

Đối với các đối tượng lồng nhau, các thuộc tính bắt đầu chuỗi và sử dụng bất kỳ ký hiệu nào trong hai ký hiệu nếu nó phù hợp với khái niệm đã thảo luận