Du kan gruppere relaterede data sammen i en enkelt datastruktur ved hjælp af et JavaScript-objekt, som dette:

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

Et objekt indeholder egenskaber eller nøgleværdipar. Den deskobjekt over har fire egenskaber. Hver ejendom har et navn, som også kaldes en nøgle og en tilsvarende værdi.

For eksempel nøglen heighthar værdien "4 feet". Sammen udgør nøglen og værdien en enkelt ejendom.

height: "4 feet", 

Det deskobjekt indeholder data om et skrivebord. Faktisk er dette en grund til, at du bruger et JavaScript-objekt: til at gemme data. Det er også nemt at hente de data, du gemmer i et objekt. Disse aspekter gør genstande meget nyttige.

Denne artikel får dig til at køre med JavaScript-objekter:

• hvordan man opretter et objekt
• hvordan man gemmer data i et objekt
• og hente data fra det.

Lad os starte med at oprette et objekt.

Sådan oprettes et objekt i JavaScript

Jeg opretter et objekt kaldet pizzanedenfor og tilføjer nøgleværdipar til det.

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

Tasterne er til venstre for tyktarmen, :og værdierne er til højre for det. Hvert nøgleværdipar er en property. Der er tre egenskaber i dette eksempel:

• Nøglen topping har en værdi ”ost” .
• Nøglen sovs har en værdi ”marinara” .
• Nøglen størrelse har en værdi ”små” .

Hver ejendom er adskilt med et komma. Alle egenskaberne er pakket i krøllede seler.

Dette er den grundlæggende objektsyntaks. Men der er et par regler, du skal huske på, når du opretter JavaScript-objekter.

Objektnøgler i JavaScript

Hver nøgle i dit JavaScript-objekt skal være en streng, et symbol eller et tal.

Se nærmere på eksemplet nedenfor. Nøglenavne 1og 2tvinges faktisk til strenge.

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

Det er en forskel, der gøres klar, når du udskriver objektet.

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

Der er en anden regel at huske på nøglenavne: hvis dit nøglenavn indeholder mellemrum, skal du indpakke det i anførselstegn.

Se på programmerobjektet nedenfor. Bemærk det sidste nøglenavn,"current project name". Dette nøglenavn indeholder mellemrum, så jeg pakket det med citater.

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

Objektværdier i JavaScript

En værdi kan på den anden side være en hvilken som helst datatype, inklusive et array, nummer eller boolsk. Værdierne i eksemplet ovenfor indeholder disse typer: streng, heltal, boolsk og en matrix.

Du kan endda bruge en funktion som en værdi, i hvilket tilfælde den er kendt som en metode. sounds()i nedenstående objekt er et eksempel.

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

Sig nu, at du vil tilføje eller slette et nøgleværdipar. Eller du vil simpelthen hente et objekts værdi.

Du kan gøre disse ting ved at bruge prik- eller parentesnotation, som vi tager fat på næste gang.

Sådan fungerer punktnotation og parentesnotation i JavaScript

Punktnotation og parentesnotation er to måder at få adgang til og bruge et objekts egenskaber. Du vil sandsynligvis finde dig selv at nå frem til punktnotation oftere, så vi starter med det.

Sådan tilføjes et nøgleværdipar med punktnotation i JavaScript

Jeg opretter en tom bookobjekt nedenfor.

const book = {}; 

For at tilføje et nøgleværdipar ved hjælp af punktnotation skal du bruge syntaksen:

objectName.keyName = value

Dette er koden for at tilføje nøglen (forfatter) og værdien ("Jane Smith") til bookobjektet:

book.author = "Jane Smith"; 

Her er en oversigt over ovenstående kode:

• book er objektets navn
• . (prik)
• author er nøglenavnet
• = (lige med)
• "Jane Smith" er værdien

Når jeg udskriver bogobjektet, ser jeg det nyligt tilføjede nøgleværdipar.

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

Jeg tilføjer endnu et nøgleværdipar til bookobjektet.

book.publicationYear = 2006; 

Den bookobjekt har nu to egenskaber.

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

Sådan får du adgang til data i et JavaScript-objekt ved hjælp af punktnotation

Du kan også bruge punktnotation på en nøgle for at få adgang til den relaterede værdi.

Overvej dette basketballPlayerobjekt.

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

Sig, at du vil hente værdien "skydevagt." Dette er syntaksen, der skal bruges:

objectName.keyName

Lad os bruge denne syntaks til at hente og udskrive "skydevagt" -værdien.

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

Her er en oversigt over ovenstående kode:

• basketballPlayer er objektets navn
• . (prik)
• position er nøglenavnet

Dette er et andet eksempel.

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

Sådan slettes et nøgleværdipar i JavaScript

Brug deleteoperatøren for at slette et nøgleværdipar . Dette er syntaksen:

delete objectName.keyName

Så for at slette 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' ] 

Vi har dækket meget grund. Her er et resumé af de vigtigste ideer:

Objekter:

• Brug objekter til at gemme data som egenskaber (nøgleværdipar).
• Nøglenavne skal være strenge, symboler eller tal.
• Værdier kan være af enhver type.

Adgang til objektegenskaber:

• Punktnotation: objectName.keyName
• Beslagsnotation: objectName[“keyName”]

Slet en ejendom:

• delete objectName.keyName

Der er meget, du kan gøre med objekter. Og nu har du nogle af de grundlæggende, så du kan drage fordel af denne kraftfulde JavaScript-datatype.

Jeg skriver om at lære at programmere og de bedste måder at gøre det på amymhaddad.com. Jegtweetogsåom programmering, læring og produktivitet: @amymhaddad .