HomeLập trìnhJavaScriptHướng dẫn về...

Hướng dẫn về khóa đối tượng JavaScript – Cách sử dụng cặp khóa-giá trị JS


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ư sau:

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ị. Các desk đối tượng 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à khóa và một giá trị tương ứng.

Ví dụ, chìa khóa height có giá trị "4 feet". Cùng với nhau, khóa và giá trị tạo nên một thuộc tính duy nhất.

height: "4 feet",

Các desk đối tượng chứa dữ liệu về một bàn làm việc. 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 rất đơ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.

Tôi sẽ tạo một đối tượng gọi là pizza bên dưới và thêm các cặp khóa-giá trị vào đó.

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

Các phím ở bên trái của dấu hai chấm : và các giá trị ở bên phải của nó. Mỗi cặp khóa-giá trị là một property. Có ba thuộc tính trong ví dụ này:

  • Chìa khóa Cao sang có một giá trị “phô mai”.
  • Chìa khóa Nước xốt có một giá trị “bò biển”.
  • Chìa khóa kích thước có một giá trị “bé nhỏ”.

Mỗi thuộc tính được phân tách bằng 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. Tên khóa 12 thực sự bị ép thành 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.

console.log(shoppingCart);
//Result: { '1': 'apple', '2': 'oranges' }

Có một quy tắc khác cần ghi nhớ 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 nhìn vào programmer đối tượng bên dưới. Lưu ý tên khóa cuối cùng, "current project name" . Tên khóa này chứa khoảng trắng nên tôi đặt nó trong dấu ngoặc kép.

Đọc thêm  Cách học JavaScript nhanh hơn một chút

const programmer = {
   firstname: "Phil",
   age: 21,
   backendDeveloper: true,
   languages: ["Python", "JavaScript", "Java", "C++"],
   "current project name": "The Amazing App"
};

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 sau: 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. sounds()trong đối tượng dưới đây, là một ví dụ.

const animal = {
   type: "cat",
   name: "kitty",
   sounds() { console.log("meow meow") }
};

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 vuông mà chúng tôi sẽ giải quyết trong phần tiếp theo.

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. Có thể bạn sẽ 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 ta 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 khoảng trống book đối tượng bên dưới.

const book = {};

Để 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:

objectName.keyName = value

Đây là mã để thêm khóa (tác giả) và giá trị (“Jane Smith”) vào book vật:

book.author = "Jane Smith";

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

  • book là tên của đối tượng
  • . (chấm)
  • author là tên khóa
  • = (bằng)
  • "Jane Smith" 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.

console.log(book);
//Result: { author: 'Jane Smith' }

Tôi sẽ thêm một cặp khóa-giá trị khác vào book vật.

book.publicationYear = 2006;

Các book đối tượng bây giờ có hai thuộc tính.

console.log(book);
//Result: { author: 'Jane Smith', publicationYear: 2006 }

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 một phím để quyền giá trị liên quan.

Xem xét điều này basketballPlayer vật.

const basketballPlayer = {
   name: "James",
   averagePointsPerGame: 20,
   height: "6 feet, 2 inches",
   position: "shooting guard"
};

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

objectName.keyName

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

console.log(basketballPlayer.position);
//Result: shooting guard

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

  • basketballPlayer là tên của đối tượng
  • . (chấm)
  • position là tên khóa

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

console.log(basketballPlayer.name);
//Result: James

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 delete nhà điều hành. Đây là cú pháp:

Đọc thêm  Cách thay đổi màu đánh dấu Google Maps bằng JavaScript

delete objectName.keyName

Vì vậy để xóa height khóa và giá trị của nó từ basketballPlayer đối tượng, bạn sẽ viết mã này:

delete basketballPlayer.height;

Kết quả là, các basketballPlayer đối tượng hiện có ba cặp khóa-giá trị.

console.log(basketballPlayer);
//Result: { name: 'James', averagePointsPerGame: 20, position: 'shooting guard' }

Có thể bạn sẽ thấy mình thường xuyên sử dụng 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 nối hoặc bắt đầu bằng một số.

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

basketballPlayer.shooting percentage = "75%";
//Results in an error

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 tùy 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 employee đối tượng bên dưới.

const employee = {};

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:

objectName[“keyName”] = value

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:

employee["occupation"] = "sales";

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

  • employee là tên của đối tượng
  • "occupation" là tên khóa
  • = (bằng)
  • "sales" 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ị khác nhau.

//Add multi-word key name
employee["travels frequently"] = true;
 
//Add key name that starts with a number and includes a hyphen
employee["1st-territory"] = "Chicago";
 
//Add a key name that starts with a number
employee["25"] = "total customers";

Khi tôi in employee đối tượng, nó trông như thế này:

{
  '25': 'total customers',
  occupation: 'sales',
  'travels frequently': true,
  '1st-territory': 'Chicago'
}

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

const basketballPlayer = {
   name: "James",
   averagePointsPerGame: 20,
   height: "6 feet, 2 inches",
   position: "shooting guard"
};

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.

basketballPlayer.shooting percentage = "75%";
//Results in an error

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:

basketballPlayer["shooting percentage"] = "75%";

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

Đọc thêm  Tìm hiểu các hoạt động CRUD trong JavaScript bằng cách xây dựng ứng dụng TODO

{
  name: 'James',
  averagePointsPerGame: 20,
  height: '6 feet, 2 inches',
  position: 'shooting guard',
  'shooting percentage': '75%'
}

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 phím để quyền giá trị liên quan.

nhớ lại animal đối tượng ngay từ đầu bài viết.

const animal = {
   type: "cat",
   name: "kitty",
   sounds() { console.log("meow meow") }
};

Hãy lấy giá trị được liên kết với khóa, name. Để 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:

objectName[“keyName”]

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

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

  • animal là tên của đối tượng
  • ["name"] là tên khóa được đặt trong ngoặc vuông

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

console.log(animal["sounds"]());

//Result: 
meow meow
undefined

Lưu ý rằng sounds() 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.

console.log(animal.sounds());

//Result: 
meow meow
undefined

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 của các phím hoặc tất cả các của các giá trị từ một đối tượng?

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

const runner = {
   name: "Jessica",
   age: 20,
   milesPerWeek: 40,
   race: "marathon"
};

Sử dụng Object.keys() phương pháp để lấy tất cả các tên khóa từ một đối tượng.

Đây là cú pháp:

Object.keys(objectName)

Chúng ta có thể sử dụng phương pháp này trên runner vật.

Object.keys(runner);

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.

console.log(Object.keys(runner));
//Result: [ 'name', 'age', 'milesPerWeek', 'race' ]

Tương tự, bạn có thể sử dụng Object.values() phương pháp để lấy tất cả các giá trị từ một đối tượng. Đây là cú pháp:

Object.values(objectName)

Bây giờ chúng tôi sẽ nhận được tất cả các giá trị từ runner vật.

console.log(Object.values(runner));
//Result: [ 'Jessica', 20, 40, 'marathon' ]

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ố.
  • Các giá trị có thể là bất kỳ loại nào.

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

  • Ký hiệu dấu chấm: objectName.keyName
  • Ký hiệu ngoặc: objectName[“keyName”]

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

  • delete objectName.keyName

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 Mà còn tweet về lập trình, học tập và năng suất: @amymhaddad.





Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status