JavaScript Object Keys oktatóanyag - JS kulcs-érték pár használatának módja

A kapcsolódó adatokat egyetlen adatstruktúrába csoportosíthatja egy JavaScript objektum használatával, például:

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

Az objektum tulajdonságokat vagy kulcs-érték párokat tartalmaz. A deskfenti objektum négy tulajdonsággal rendelkezik. Minden tulajdonságnak van neve, amelyet kulcsnak is neveznek, és egy megfelelő érték.

Például a kulcs heightmegvan az értéke "4 feet". A kulcs és az érték együttesen egyetlen tulajdonságot alkot.

height: "4 feet", 

Az deskobjektum adatokat tartalmaz egy íróasztalról. Valójában ez az oka annak, hogy JavaScript objektumot használjon: adatok tárolására. Ugyancsak egyszerű lekérni az objektumban tárolt adatokat. Ezek a szempontok miatt az objektumok nagyon hasznosak.

Ez a cikk elindítja és futtatja a JavaScript objektumokat:

  • hogyan lehet objektumot létrehozni
  • hogyan tárolhatunk adatokat egy objektumban
  • és adatokat gyűjtsön belőle.

Kezdjük egy objektum létrehozásával.

Objektum létrehozása a JavaScript-ben

Létrehozok egy pizzaalább nevezett objektumot , és hozzáadok hozzá kulcs-érték párokat.

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

A kulcsok a kettőspont bal oldalán, :az értékek pedig attól jobbra találhatók. Minden kulcs-érték pár a property. Ebben a példában három tulajdonság van:

  • A kulcs feltét értéke „sajt” .
  • A kulcs szósz értéke „marinara” .
  • A kulcs méretének értéke „kicsi” .

Minden tulajdonságot vessző választ el. Az összes tulajdonság göndör zárójelbe van csomagolva.

Ez az objektum szintaxisa. De néhány szabályt figyelembe kell venni a JavaScript-objektumok létrehozásakor.

Objektumbillentyűk a JavaScript-ben

A JavaScript-objektum minden kulcsának karakterláncnak, szimbólumnak vagy számnak kell lennie.

Vizsgálja meg alaposan az alábbi példát. A kulcsok neve 1és 2valójában karakterláncokká vannak kényszerítve.

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

Ez a különbség egyértelművé vált az objektum nyomtatásakor.

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

A kulcsnevekkel kapcsolatban egy másik szabályt kell szem előtt tartani: ha a kulcsneve szóközöket tartalmaz, akkor idézőjelekbe kell csomagolnia.

Vessen egy pillantást az programmeralábbi tárgyra. Figyelje meg az utolsó kulcs nevét,"current project name". Ez a kulcsnév szóközöket tartalmaz, ezért idézőjelbe tettem.

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

Objektumértékek a JavaScript-ben

Az érték viszont bármilyen adattípus lehet, beleértve a tömböt, a számot vagy a logikai értéket. A fenti példa értékei ezeket a típusokat tartalmazzák: string, egész szám, logikai érték és egy tömb.

Akár egy függvényt is használhat értékként, ebben az esetben metódusnak nevezik. sounds(), az alábbi objektumban egy példa.

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

Most mondja el, hogy hozzá szeretne adni vagy törölni szeretne egy kulcs-érték párost. Vagy egyszerűen be akarja szerezni az objektum értékét.

Ezeket a pontokat vagy zárójeleket használva teheti meg, amelyeket a következő lépésben kezelünk.

Hogyan működik a pontozás és a zárójeles jelölés a JavaScript-ben

A pontozás és a zárójeles jelölés kétféle módon érhető el és használhatja az objektum tulajdonságait. Valószínűleg gyakrabban fogja elérni a dot jelölést, ezért kezdjük.

Kulcsérték-pár páros jelöléssel történő hozzáadása a JavaScript-ben

Létrehozok egy üreset bookobjektum alatt.

const book = {}; 

Kulcs-érték pár hozzáadásához pontozással használja a szintaxist:

objectName.keyName = value

Ez a kód, amely hozzáadja a kulcsot (szerző) és értéket ("Jane Smith") az bookobjektumhoz:

book.author = "Jane Smith"; 

Itt található a fenti kód bontása:

  • book az objektum neve
  • . (pont)
  • author a kulcs neve
  • = (egyenlő)
  • "Jane Smith" az érték

Amikor kinyomtatom a könyvobjektumot, meglátom az újonnan hozzáadott kulcs-érték párost.

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

Hozzáadok egy másik kulcs-érték párot az bookobjektumhoz.

book.publicationYear = 2006; 

Az bookobjektumnak most két tulajdonsága van.

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

Hogyan férhet hozzá egy JavaScript objektum adataihoz a Pontszerű jelölés használatával

A kulcs értékének pontjelölését is használhatja a kapcsolódó érték eléréséhez .

Ezt fontold meg basketballPlayertárgy.

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

Tegyük fel, hogy be akarjuk szerezni a „lövésvédő” értéket. Ez a használni kívánt szintaxis:

objectName.keyName

Használjuk ezt a szintaxist arra, hogy megszerezzük és kinyomtassuk a "lövészőr" értéket.

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

Itt található a fenti kód bontása:

  • basketballPlayer az objektum neve
  • . (pont)
  • position a kulcs neve

Ez egy másik példa.

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

Kulcsérték-pár törlése a JavaScript-ben

Kulcs-érték pár törléséhez használja az deleteoperátort. Ez a szintaxis:

delete objectName.keyName

Tehát a 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.