If you're seeing this message, it means we're having trouble loading external resources on our website.

Om du är bakom en brandvägg eller liknande filter, vänligen se till att domänerna *. kastatic.org och *. kasandbox.org inte är blockerade.

Huvudinnehåll

Repetition: Objekt

Det här är en sammanfattning av vad vi gick genom om objekt.
Det finns många typer av värden som vi kan lagra i JavaScript-variabler, och ibland vill vi lagra flera relaterade värden tillsammans: det är är då vi har användning av objekt!
En objekt är en datatyp som låter oss lagra en samling av egenskaper i en enda variabel. För att skapa ett objekt, deklarerar vi en variabel som vi gör i vanliga fall, och sen namnger vi egenskaperna vi vill ha mellan ett par måsvingar:
var objectName = { 
  propertyName: propertyValue,
  propertyName: propertyValue,
  ...
};
Här är ett objekt som beskriver Winston - det här objektet har två egenskaper, hometown och hair, och egenskapernas värden är strängar:
var aboutWinston = {
  hometown: "Mountain View, CA",
  hair: "no"
};
Här är ett mer komplext objekt som beskriver en katt med fyra egenskaper, age, furColor, likes och birthday.
var lizzieTheCat = {
  age: 18,
  furColor: "grey",
  likes: ["catnip", "milk"],
  birthday: {"month": 7, "day": 17, "year": 1994}
};
Här kan vi se att alla egenskaper håller olika datatyper - age lagrar ett tal, furColor lagrar en sträng, likes lagrar en array och birthday lagrar ett objekt. Det är det som är det häftiga med objekt (ja, en av de häftiga sakerna) - dom kan lagra andra föremål inuti sig! Vi kan alltså lagra objekt i objekt för att beskriva komplex data.
Ibland ser man också objekt med citattecken runt egenskapsnamnen, såhär:
var aboutWinston = {
  "hometown": "Mountain View, CA",
  "hair": "no"
};
Det fungerar likadant som det vi såg förut utan citattecken, det tar bara lite längre tid att skriva. Den enda gången man behöver använda citattecken är när egenskapsnamnen har ett mellanrum i sig, som t.ex:
var aboutWinston = {
  "his hair": "none"
};
I de fallen måste vi använda citattecken, annars förstår inte JavaScript-tolken vad vi skrivit. För att slippa tänka på citattecken kan det vara enklast att strunta i att använda mellanrum i egenskapsnamnen! Då behöver man aldrig använda citattecken runt egenskapsnamnen.

Komma åt objektegenskaper

Ett objekt är inte användbart om vi inte kan komma åt det som finns inuti det. Vi kan göra det på två sätt - först med det vi kallar "punktnotation", där vi skriver namnet på variabeln, följt av en "." Och sedan egenskapsnamnet:
var aboutWinston = {
  hometown: "Mountain View, CA",
  hair: "no"
};

text("Winston is from " + aboutWinston.hometown, 100, 100);
text("Winston has " + aboutWinston.hair + " hair", 100, 150);
Vi kan också använda oss av hakparanteser som vi gör när vi hämtar värden ur arrayer. Då skriver vi variabelnamnet, sedan hakparenteser med egenskapsnamnet mellan citattecken:
var hisHometown = aboutWinston["hometown"];
var hisHair = aboutWinston["hair"];
Om vi ​​försöker komma åt en egenskap som inte existerar så får vi "odefinierad":
text("Winston's life goal is " + aboutWinston.lifeGoal, 100, 150);

Ändra objektegenskaper

Precis som när vi lagrar något i variabler, kan vi när som helst ändra värdena för objektegenskaperna med hjälp av punkt eller hakparantes-notation:
aboutWinston.hair = "curly"; // Winston gets a wig (Winston får peruk)!
Vi kan också lägga till helt nya egenskaper!
aboutWinston.lifeGoal = "teach JavaScript";
Om vi ​​inte längre behöver en egenskap kan vi ta bort den (men för det mesta kommer vi förmodligen bara ändra värdet):
delete aboutWinston.hair;

Arrayer av objekt

Nu när vi kan både arrays och objekt kan vi kombinera dem för att göra arrayer av objekt, vilket är ett väldigt praktiskt sätt att lagra data i program. Vi kan till exempel ha en hel samling av katter:
var myCats = [
  {name: "Lizzie", 
   age: 18},
  {name: "Daemon",
   age: 1}
];

for (var i = 0; i < myCats.length; i++) {
  var myCat = myCats[i];
  println(myCat.name + ' is ' + myCat.age + ' years old.');
}
Tänk på att vi loopar genom en array av objekt på samma sätt som vi loopar genom en array av tal eller strängar, med hjälp av en for-loop. Inuti varje loop-iteration får vi tillgång till det aktuella arrayelementet med hjälp av hakparanteserna och vi kommer åt egenskaperna för det arrayelementet (ett objekt) med punktnotation.
Här är ett annat praktiskt exempel som du kan använda i dina program, en array av koordinater:
var positions = [
    {x: 200, y: 100},
    {x: 200, y: 200},
    {x: 200, y: 300}
];

for (var i = 0; i < positions.length; i++) {
    var position = positions[i];
    ellipse(position.x, position.y, 100, 100);
}
Ganska snyggt, va? Objekt kan vara förvirrande i början, men fortsätt använda dem, och så småningom kommer du att använda dem till nästan allt!