JavaScript Object Keys Tutorial - Sådan bruges et JS-nøgleværdipar
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 desk
objekt over har fire egenskaber. Hver ejendom har et navn, som også kaldes en nøgle og en tilsvarende værdi.
For eksempel nøglen height
har værdien "4 feet"
. Sammen udgør nøglen og værdien en enkelt ejendom.
height: "4 feet",
Det desk
objekt 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 pizza
nedenfor 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 1
og 2
tvinges 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å programmer
objektet 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 book
objekt 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 book
objektet:
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 book
objektet.
book.publicationYear = 2006;
Den book
objekt 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 basketballPlayer
objekt.
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 delete
operatøren for at slette et nøgleværdipar . Dette er syntaksen:
delete objectName.keyName
Så for at slette height
key 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 employee
object 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 .