Підручник з клавіш об’єктів JavaScript - Як використовувати пару ключ-значення JS

Ви можете згрупувати пов’язані дані разом в єдину структуру даних, використовуючи об’єкт JavaScript, наприклад:

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

Об'єкт містить властивості або пари ключ-значення. deskОб'єкт вище , має чотири властивості. Кожна властивість має ім’я, яке ще називають ключем, і відповідне значення.

Наприклад, ключ heightмає значення "4 feet". Разом ключ і значення складають єдину властивість.

height: "4 feet", 

deskОб'єкт містить дані про столі. Насправді це причина, чому ви використовуєте об’єкт JavaScript: для зберігання даних. Також просто отримати дані, які ви зберігаєте в об’єкті. Ці аспекти роблять об'єкти дуже корисними.

Ця стаття допоможе вам працювати з об’єктами JavaScript:

  • як створити об’єкт
  • як зберігати дані в об'єкті
  • і отримувати з нього дані.

Почнемо зі створення об’єкта.

Як створити об’єкт у JavaScript

Я створю об’єкт, який називається pizzaнижче, і додаю до нього пари ключ-значення.

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

Клавіші розташовані ліворуч від товстої кишки, :а значення - праворуч від неї. Кожна пара ключ-значення - це property. У цьому прикладі є три властивості:

  • Ключовий топпінг має значення “сир” .
  • Ключовий соус має значення «маринара» .
  • Основний розмір має значення «маленький» .

Кожна властивість розділяється комою. Всі властивості загорнуті в фігурні дужки.

Це основний синтаксис об’єкта. Але є кілька правил, про які слід пам’ятати, створюючи об’єкти JavaScript.

Клавіші об'єктів у JavaScript

Кожен ключ у вашому об'єкті JavaScript повинен мати рядок, символ або число.

Подивіться уважно на приклад нижче. Назви ключів 1і 2фактично змушені в рядки.

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

Різниця стає зрозумілою, коли ви друкуєте об’єкт.

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

Існує ще одне правило, про яке слід пам’ятати щодо назв ключів: якщо ім’я ключа містить пробіли, його потрібно обернути у лапки.

Погляньте на programmerоб’єкт нижче. Зверніть увагу на останню назву ключа,"current project name". Це ім'я ключа містить пробіли, тому я обернув його в лапки.

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

Значення об’єктів у JavaScript

З іншого боку, значенням може бути будь-який тип даних, включаючи масив, число або логічне значення. Значення у наведеному вище прикладі містять такі типи: рядок, ціле число, логічне значення та масив.

Ви навіть можете використовувати функцію як значення, і в цьому випадку вона відома як метод. sounds(), в об’єкті нижче, є прикладом.

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

Тепер скажімо, що ви хочете додати або видалити пару ключ-значення. Або ви просто хочете отримати значення об’єкта.

Ви можете робити ці речі, використовуючи позначення крапок або дужок, з якими ми вирішимо далі.

Як працюють крапкові позначення та нотації в дужках у JavaScript

Позначення крапками та нотатки в дужках - це два шляхи доступу та використання властивостей об’єкта. Напевно, ви частіше будете тягнутися до крапкових позначень, тому ми почнемо з цього.

Як додати пару ключ-значення із крапковим позначенням у JavaScript

Я створю порожній bookоб'єкт нижче.

const book = {}; 

Щоб додати пару ключ-значення, використовуючи крапкові позначення, використовуйте синтаксис:

objectName.keyName = value

Це код для додавання ключа (автора) та значення («Джейн Сміт») до bookоб’єкта:

book.author = "Jane Smith"; 

Ось розбивка вищевказаного коду:

  • book - це назва об’єкта
  • . (крапка)
  • author це назва ключа
  • = (дорівнює)
  • "Jane Smith" - значення

Коли надрукую об’єкт книги, я побачу нещодавно додану пару ключ-значення.

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

Я додаю ще одну пару ключ-значення до bookоб'єкта.

book.publicationYear = 2006; 

Тепер bookоб’єкт має дві властивості.

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

Як отримати доступ до даних в об’єкті JavaScript за допомогою крапкових позначень

Ви також можете використовувати крапкові позначення на ключі для доступу до відповідного значення.

Розгляньте це basketballPlayerоб'єкт.

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

Скажімо, ви хочете отримати значення "страж стрільби". Ось такий синтаксис:

objectName.keyName

Давайте застосуємо цей синтаксис для отримання та друку значення "стрільби".

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

Ось розбивка вищевказаного коду:

  • basketballPlayer - це назва об’єкта
  • . (крапка)
  • position це назва ключа

Це ще один приклад.

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

Як видалити пару ключ-значення в JavaScript

Щоб видалити пару ключ-значення, використовуйте deleteоператор. Це синтаксис:

delete objectName.keyName

Отже, щоб видалити heightkey and its value from the basketballPlayer object, you’d write this code:

delete basketballPlayer.height; 

As a result, the basketballPlayer object now has three key-value pairs.

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

You’ll probably find yourself reaching for dot notation frequently, though there are certain requirements to be aware of.

When using dot notation, key names can’t contain spaces, hyphens, or start with a number.

For example, say I try to add a key that contains spaces using dot notation. I’ll get an error.

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

So dot notation won’t work in every situation. That’s why there’s another option: bracket notation.

How to Add a Key-Value Pair Using Bracket Notation in JavaScript

Just like dot notation, you can use bracket notation to add a key-value pair to an object.

Bracket notation offers more flexibility than dot notation. That’s because key names can include spaces and hyphens, and they can start with numbers.

I'll create an employeeobject below.

const employee = {}; 

Now I want to add a key-value pair using bracket notation. This is the syntax:

objectName[“keyName”] = value

So this is how I’d add the key (sales) and value (“occupation”) to the employee object:

employee["occupation"] = "sales"; 

Here's a breakdown of the above code:

  • employee is the object's name
  • "occupation" is the key name
  • = (equals)
  • "sales" is the value

Below are several more examples that use bracket notation's flexibility to add a variety of key-value pairs.

//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"; 

When I print the employee object, it looks like this:

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

With this information in mind, we can add the “shooting percentage” key to the basketballPlayer object from above.

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

You may remember that dot notation left us with an error when we tried to add a key that included spaces.

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

But bracket notation leaves us error-free, as you can see here:

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

This is the result when I print the object:

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

How to Access Data in a JavaScript Object Using Bracket Notation

You can also use bracket notation on a key to access the related value.

Recall the animal object from the start of the article.

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

Let's get the value associated with the key, name. To do this, wrap the key name quotes and put it in brackets. This is the syntax:

objectName[“keyName”]

Here's the code you'd write with bracket notation: animal["name"];.

This is a breakdown of the above code:

  • animal is the object's name
  • ["name"] is the key name enclosed in square brackets

Here’s another example.

console.log(animal["sounds"]()); //Result: meow meow undefined 

Note that sounds()is a method, which is why I added the parentheses at the end to invoke it.

This is how you’d invoke a method using dot notation.

console.log(animal.sounds()); //Result: meow meow undefined 

JavaScript Object Methods

You know how to access specific properties. But what if you want all of the keys or all of the values from an object?

There are two methods that will give you the information you need.

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

Use the Object.keys() method to retrieve all of the key names from an object.

This is the syntax:

Object.keys(objectName)

We can use this method on the above runner object.

Object.keys(runner); 

If you print the result, you’ll get an array of the object’s keys.

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

Likewise, you can use the Object.values() method to get all of the values from an object. This is the syntax:

Object.values(objectName)

Now we'll get all of the values from the runner object.

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

We’ve covered a lot of ground. Here’s a summary of the key ideas:

Objects:

  • Use objects to store data as properties (key-value pairs).
  • Key names must be strings, symbols, or numbers.
  • Values can be any type.

Access object properties:

  • Dot notation: objectName.keyName
  • Bracket notation: objectName[“keyName”]

Delete a property:

  • delete objectName.keyName

There’s a lot you can do with objects. And now you’ve got some of the basics so you can take advantage of this powerful JavaScript data type.

I write about learning to program, and the best ways to go about it on amymhaddad.com. I also tweet about programming, learning, and productivity: @amymhaddad.