Преговор: Обекти

Това е преговор на материала, който покрихме в урока за обекти.

Има много видове стойности, които можем да запазваме в променливи в JavaScript. А понякога искаме да запазим няколко свързани стойности заедно: ето тук на помощ идват обектите!

Обектът е тип данни, който ни позволява да запазваме колекция от свойства в една променлива. За да създадем обект, декларираме променлива, както обикновено, а след това използваме къдрави скоби, за да обособим двойки ключ-стойност, които са свойства на обекта:

var objectName = { 
  propertyName: propertyValue,
  propertyName: propertyValue,
  ...
};

Ето един обект, който описва Уинстън – този обект има 2 свойства – роден град hometown и коса hair, а всяко от тези свойства е низ:

var aboutWinston = {
  hometown: "Маунтин Вю, Калифорния",
  hair: "няма"
};

Ето един по-сложен обект, който описва котка с 4 свойства – възраст age, цвят на козината furColor, неща, които харесва likes и рожден ден birthday.

var lizzieTheCat = {
  age: 18,
  furColor: "grey",
  likes: ["catnip", "milk"],
  birthday: {"month": 7, "day": 17, "year": 1994}
};

Забележи как всяко свойство запазва различен тип данни – age запазва число, furColor запазва низ, likes запазва масив, а birthday запазва друг обект. Това е хубавото на обектите (добре де, едно от хубавите неща) – те могат да пазят в себе си други обекти! Така можеш да имаш дълбоко вложени обекти, за да описваш сложни данни.

Обектите могат да се декларират и с помощта на кавички около имената на свойствата, ето така:

var aboutWinston = {
  "hometown": "Маунтин Вю, Калифорния",
  "hair": "няма"
};

Това е същото като онова, което видяхме по-рано без кавичките, но се пише по-дълго време. Единственият случай, в който задължително се нуждаеш от кавички, е ако името на свойството съдържа интервал, както е тук:

var aboutWinston = {
  "his hair": "няма"
};

Тук трябва да използваме кавички, защото в противен случай интерпретаторът на JavaScript ще се обърка. Ето един съвет от мен: просто не използвай интервали в имената на свойствата! Така никога няма да се налага да използваш кавички за имената на свойствата.

Достъпване на свойствата на обект

Един обект не е полезен, освен ако не можем да погледнем в него и да вземем стойностите на различните свойства. Можем да го направим по 2 начина – като използваме "нотация с точка", в която пишем името на променливата, последвана от точка ".", а след това и името на свойството:

var aboutWinston = {
  hometown: "Маунтин Вю, Калифорния",
  hair: "няма"
};

text("Уинстън е от " + aboutWinston.hometown, 100, 100);
text("Уинстън " + aboutWinston.hair + " коса", 100, 150);

Можем да използваме и "нотация с квадратни скоби", която изглежда подобно на достъпването на елементите на масив, където пишем името на променливата, след това квадратни скоби, а в тях поставяме името на свойството:

var hisHometown = aboutWinston["hometown"];
var hisHair = aboutWinston["hair"];

Ако се опитаме да достъпим свойство, което не съществува, ще получим "undefined" (недефинирано):

text("Целта в живота на Уинстън е " + aboutWinston.lifeGoal, 100, 150);

Промяна на свойствата на обекта

Точно както съхранявахме други типове данни в променливи, можем да променим стойностите на свойствата на обектите по всяко време по време на изпълнението на програмата, като използваме точковата нотация или нотацията със скоби:

aboutWinston.hair = "има къдрава"; // Уинстън се сдобива с перука!

Можем също така да прибавим изцяло нови свойства!

aboutWinston.lifeGoal = "да преподава JavaScript";

Ако сме приключили с някое свойство, можем да го изтрием (но в повечето случаи просто ще променим неговата стойност):

delete aboutWinston.hair;

Масиви от обекти

След като вече познаваш масивите и обектите, можеш да ги комбинираш и да направиш масиви от обекти, което всъщност е полезен начин за съхранение на данни в програмата. Например масив от котки:

var myCats = [
  {name: "Лизи", 
   age: 18},
  {name: "Демон",
   age: 1}
];

for (var i = 0; i < myCats.length; i++) {
  var myCat = myCats[i];
  println(myCat.name + ' е на ' + myCat.age);
}

Забележи, че обхождаме масива от обекти по същия начин, както обхождаме масив от числа или низове – с помощта на for цикъл. Във всяка итерация достъпваме текущия елемент на масива с нотация с квадратни скоби, а след това достъпваме свойствата на този елемент на масива (който е обект) с нотация с точка.

Ето още един практически пример, който можеш да използваш в своите програми – масив с координати:

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);
}

Доста подредено, нали? В началото обектите може да изглеждат трудни, но продължавай да ги използваш и накрая ще се пристрастиш и ще превръщаш всичко в обект!

Искаш ли да се присъединиш към разговора?

Вписване в профила

Сортирай по:

Все още няма публикации.

Разбираш ли английски? Натисни тук, за да видиш още дискусии в английския сайт на Кан Академия.