Khóa đối tượng trong javascript là gì?

Bạn có thể nhóm các dữ liệu có liên quan lại với nhau thành một cấu trúc dữ liệu duy nhất bằng cách sử dụng một đối tượng JavaScript, như thế này

const desk = {
   height: "4 feet",
   weight: "30 pounds",
   color: "brown",
   material: "wood",
 };

Một đối tượng chứa các thuộc tính hoặc cặp khóa-giá trị. Đối tượng

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

3 ở trên có bốn thuộc tính. Mỗi thuộc tính có một tên, còn được gọi là một khóa và một giá trị tương ứng

Chẳng hạn, khóa

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

4 có giá trị

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

5. Cùng với nhau, khóa và giá trị tạo thành một thuộc tính duy nhất

height: "4 feet",

Đối tượng

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

3 chứa dữ liệu về cái bàn. Trên thực tế, đây là lý do tại sao bạn sử dụng một đối tượng JavaScript. để lưu trữ dữ liệu. Việc truy xuất dữ liệu mà bạn lưu trữ trong một đối tượng cũng đơn giản. Những khía cạnh này làm cho các đối tượng rất hữu ích

Bài viết này sẽ giúp bạn bắt đầu và chạy với các đối tượng JavaScript

• cách tạo đối tượng
• cách lưu trữ dữ liệu trong một đối tượng
• và lấy dữ liệu từ nó

Hãy bắt đầu bằng cách tạo một đối tượng

Cách tạo một đối tượng trong JavaScript

Tôi sẽ tạo một đối tượng có tên là

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

7 bên dưới và thêm các cặp khóa-giá trị vào đối tượng đó

const pizza = {
   topping: "cheese",
   sauce: "marinara",
   size: "small"
};

Các phím nằm bên trái dấu hai chấm

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

8 và các giá trị nằm bên phải dấu hai chấm. Mỗi cặp khóa-giá trị là một

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

9. Có ba thuộc tính trong ví dụ này

• Key topping có giá trị “phô mai”
• Nước sốt chính có giá trị “marinara”
• Kích thước khóa có giá trị “nhỏ”

Mỗi thuộc tính cách nhau bởi dấu phẩy. Tất cả các thuộc tính được bao bọc trong dấu ngoặc nhọn

Đây là cú pháp đối tượng cơ bản. Nhưng có một số quy tắc cần ghi nhớ khi tạo các đối tượng JavaScript

Khóa đối tượng trong JavaScript

Mỗi khóa trong đối tượng JavaScript của bạn phải là một chuỗi, ký hiệu hoặc số

Hãy xem kỹ ví dụ dưới đây. Các tên khóa

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

00 và

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

01 thực sự được ép thành các chuỗi

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

Đó là một sự khác biệt rõ ràng khi bạn in đối tượng

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

0

Có một quy tắc khác cần lưu ý về tên khóa. nếu tên khóa của bạn chứa dấu cách, bạn cần đặt nó trong dấu ngoặc kép

Hãy xem đối tượng

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

02 bên dưới. Lưu ý tên khóa cuối cùng,

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

03. Tên khóa này chứa dấu cách nên tôi đặt nó trong dấu ngoặc kép

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

6

Giá trị đối tượng trong JavaScript

Mặt khác, một giá trị có thể là bất kỳ loại dữ liệu nào, bao gồm một mảng, số hoặc boolean. Các giá trị trong ví dụ trên chứa các loại này. chuỗi, số nguyên, boolean và một mảng

Bạn thậm chí có thể sử dụng một hàm làm giá trị, trong trường hợp đó, nó được gọi là một phương thức.

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

04, trong đối tượng dưới đây, là một ví dụ

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

8

Bây giờ, giả sử bạn muốn thêm hoặc xóa một cặp khóa-giá trị. Hoặc đơn giản là bạn muốn lấy giá trị của một đối tượng

Bạn có thể thực hiện những việc này bằng cách sử dụng ký hiệu dấu chấm hoặc dấu ngoặc, mà chúng tôi sẽ giải quyết tiếp theo

Cách ký hiệu dấu chấm và ký hiệu khung hoạt động trong JavaScript

Ký hiệu dấu chấm và ký hiệu dấu ngoặc là hai cách để truy cập và sử dụng các thuộc tính của đối tượng. Bạn có thể thấy mình tiếp cận ký hiệu dấu chấm thường xuyên hơn, vì vậy chúng tôi sẽ bắt đầu với điều đó

Cách thêm cặp khóa-giá trị bằng ký hiệu dấu chấm trong JavaScript

Tôi sẽ tạo một đối tượng

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

05 trống bên dưới

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

0

Để thêm một cặp khóa-giá trị bằng ký hiệu dấu chấm, hãy sử dụng cú pháp

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

06

Đây là mã để thêm khóa (tác giả) và giá trị ("Jane Smith") vào đối tượng

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

05

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

3

Đây là một sự cố của đoạn mã trên

• const shoppingCart = {
     1: "apple",
     2: "oranges"
  };
  

  05 là tên của đối tượng

• const shoppingCart = {
     1: "apple",
     2: "oranges"
  };
  

  09 (chấm)

• const shoppingCart = {
     1: "apple",
     2: "oranges"
  };
  

  60 là tên khóa

• const shoppingCart = {
     1: "apple",
     2: "oranges"
  };
  

  61 (bằng)

• const shoppingCart = {
     1: "apple",
     2: "oranges"
  };
  

  62 là giá trị

Khi tôi in đối tượng sách, tôi sẽ thấy cặp khóa-giá trị mới được thêm vào

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

9

Tôi sẽ thêm một cặp khóa-giá trị khác vào đối tượng

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

05

height: "4 feet",

0

Đối tượng

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

05 hiện có hai thuộc tính

height: "4 feet",

1

Cách truy cập dữ liệu trong đối tượng JavaScript bằng ký hiệu dấu chấm

Bạn cũng có thể sử dụng ký hiệu dấu chấm trên khóa để truy cập giá trị liên quan

Xem xét đối tượng

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

65 này

height: "4 feet",

2

Giả sử bạn muốn lấy giá trị “shooting guard. ” Đây là cú pháp sử dụng

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

66

Hãy sử dụng cú pháp này để lấy và in giá trị "shooting guard"

height: "4 feet",

3

Đây là một sự cố của đoạn mã trên

• const shoppingCart = {
     1: "apple",
     2: "oranges"
  };
  

  65 là tên của đối tượng

• const shoppingCart = {
     1: "apple",
     2: "oranges"
  };
  

  09 (chấm)

• const shoppingCart = {
     1: "apple",
     2: "oranges"
  };
  

  69 là tên khóa

Đây là một ví dụ khác

height: "4 feet",

4

Cách xóa cặp khóa-giá trị trong JavaScript

Để xóa một cặp khóa-giá trị, hãy sử dụng toán tử

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

80. Đây là cú pháp

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

81

Vì vậy, để xóa khóa

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

4 và giá trị của nó khỏi đối tượng

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

65, bạn sẽ viết mã này

height: "4 feet",

5

Do đó, đối tượng

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

65 hiện có ba cặp khóa-giá trị

height: "4 feet",

6

Có thể bạn sẽ thấy mình thường xuyên tìm đến ký hiệu dấu chấm, mặc dù có một số yêu cầu nhất định cần lưu ý

Khi sử dụng ký hiệu dấu chấm, tên khóa không được chứa dấu cách, dấu gạch ngang hoặc bắt đầu bằng số

Ví dụ: giả sử tôi cố gắng thêm một khóa chứa khoảng trắng bằng cách sử dụng ký hiệu dấu chấm. tôi sẽ gặp lỗi

height: "4 feet",

7

Vì vậy, ký hiệu dấu chấm sẽ không hoạt động trong mọi tình huống. Đó là lý do tại sao có một lựa chọn khác. ký hiệu ngoặc

Cách thêm cặp khóa-giá trị bằng ký hiệu ngoặc trong JavaScript

Cũng giống như ký hiệu dấu chấm, bạn có thể sử dụng ký hiệu dấu ngoặc để thêm cặp khóa-giá trị vào một đối tượng

Ký hiệu khung mang lại sự linh hoạt hơn so với ký hiệu dấu chấm. Đó là bởi vì tên khóa có thể bao gồm dấu cách và dấu gạch nối và chúng có thể bắt đầu bằng số

Tôi sẽ tạo một đối tượng

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

85 bên dưới

height: "4 feet",

8

Bây giờ tôi muốn thêm một cặp khóa-giá trị bằng cách sử dụng ký hiệu ngoặc. Đây là cú pháp

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

86

Vì vậy, đây là cách tôi thêm khóa (nghề nghiệp) và giá trị (doanh số) vào đối tượng nhân viên

height: "4 feet",

9

Đây là một sự cố của đoạn mã trên

• const shoppingCart = {
     1: "apple",
     2: "oranges"
  };
  

  85 là tên của đối tượng

• const shoppingCart = {
     1: "apple",
     2: "oranges"
  };
  

  88 là tên khóa

• const shoppingCart = {
     1: "apple",
     2: "oranges"
  };
  

  61 (bằng)

• const shoppingCart = {
     1: "apple",
     2: "oranges"
  };
  

  00 là giá trị

Dưới đây là một số ví dụ khác sử dụng tính linh hoạt của ký hiệu ngoặc để thêm nhiều cặp khóa-giá trị

const pizza = {
   topping: "cheese",
   sauce: "marinara",
   size: "small"
};

0

Khi tôi in đối tượng

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

85, nó trông như thế này

const pizza = {
   topping: "cheese",
   sauce: "marinara",
   size: "small"
};

1

Lưu ý đến thông tin này, chúng ta có thể thêm khóa “phần trăm chụp” vào đối tượng

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

65 từ phía trên

height: "4 feet",

2

Bạn có thể nhớ rằng ký hiệu dấu chấm đã gây ra lỗi cho chúng tôi khi chúng tôi cố gắng thêm một khóa bao gồm khoảng trắng

height: "4 feet",

7

Nhưng ký hiệu ngoặc giúp chúng tôi không bị lỗi, như bạn có thể thấy ở đây

const pizza = {
   topping: "cheese",
   sauce: "marinara",
   size: "small"
};

4

Đây là kết quả khi tôi in đối tượng

const pizza = {
   topping: "cheese",
   sauce: "marinara",
   size: "small"
};

5

Cách truy cập dữ liệu trong đối tượng JavaScript bằng ký hiệu ngoặc

Bạn cũng có thể sử dụng ký hiệu ngoặc trên một khóa để truy cập giá trị liên quan

Nhớ lại đối tượng

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

03 từ đầu bài viết

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

8

Hãy lấy giá trị được liên kết với khóa,

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

04. Để thực hiện việc này, hãy bọc các trích dẫn tên khóa và đặt nó trong ngoặc. Đây là cú pháp

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

05

Đây là mã bạn muốn viết với ký hiệu dấu ngoặc.

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

06

Đây là sự cố của đoạn mã trên

• const shoppingCart = {
     1: "apple",
     2: "oranges"
  };
  

  03 là tên của đối tượng

• const shoppingCart = {
     1: "apple",
     2: "oranges"
  };
  

  08 là tên khóa được đặt trong ngoặc vuông

Đây là một ví dụ khác

const pizza = {
   topping: "cheese",
   sauce: "marinara",
   size: "small"
};

7

Lưu ý rằng

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

04 là một phương thức, đó là lý do tại sao tôi thêm dấu ngoặc đơn ở cuối để gọi nó

Đây là cách bạn gọi một phương thức bằng cách sử dụng ký hiệu dấu chấm

const pizza = {
   topping: "cheese",
   sauce: "marinara",
   size: "small"
};

8Phương thức đối tượng JavaScript

Bạn biết cách truy cập các thuộc tính cụ thể. Nhưng nếu bạn muốn tất cả các khóa hoặc tất cả các giá trị từ một đối tượng thì sao?

Có hai phương pháp sẽ cung cấp cho bạn thông tin bạn cần

const pizza = {
   topping: "cheese",
   sauce: "marinara",
   size: "small"
};

9

Sử dụng phương pháp

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

30 để truy xuất tất cả các tên khóa từ một đối tượng

Đây là cú pháp

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

31

Chúng ta có thể sử dụng phương pháp này trên đối tượng

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

32 ở trên

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

0

Nếu bạn in kết quả, bạn sẽ nhận được một mảng các khóa của đối tượng

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

1

Tương tự như vậy, bạn có thể sử dụng phương thức

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

33 để lấy tất cả các giá trị từ một đối tượng. Đây là cú pháp

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

34

Bây giờ chúng ta sẽ lấy tất cả các giá trị từ đối tượng

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

32

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

2

Chúng tôi đã bao phủ rất nhiều mặt đất. Dưới đây là tóm tắt các ý chính

Các đối tượng

• Sử dụng các đối tượng để lưu trữ dữ liệu dưới dạng thuộc tính (cặp khóa-giá trị)
• Tên khóa phải là chuỗi, ký hiệu hoặc số
• Giá trị có thể là bất kỳ loại

Truy cập thuộc tính đối tượng

• ký hiệu dấu chấm.

  const shoppingCart = {
     1: "apple",
     2: "oranges"
  };
  

  66
• ký hiệu khung.

  const shoppingCart = {
     1: "apple",
     2: "oranges"
  };
  

  05

Xóa một thuộc tính

• const shoppingCart = {
     1: "apple",
     2: "oranges"
  };
  

  81
  

Có rất nhiều thứ bạn có thể làm với đồ vật. Và bây giờ bạn đã nắm được một số kiến ​​thức cơ bản để có thể tận dụng loại dữ liệu JavaScript mạnh mẽ này

Tôi viết về việc học lập trình và những cách tốt nhất để thực hiện nó trên amymhaddad. com. Tôi cũng tweet về lập trình, học tập và năng suất. @amymhaddad

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

---

Amy Haddad

Lập trình viên và nhà văn. cách học hiệu quả. com. công cụ lập kế hoạch hàng ngày. com

---

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Khóa trong đối tượng trong JavaScript là gì?

Khóa đối tượng JavaScript thuộc loại nào?

Sự khác biệt giữa khóa đối tượng và khóa đối tượng là gì?

Đối tượng JavaScript có khóa không?