[LÖST] Javascript - Class med Array

Permalänk
Medlem

[LÖST] Javascript - Class med Array

Hej!

Sitter och gör lite skola och har fastnat lite och tänkte be om lite hjälp.

Jag har en klass som innehåller en array med objekt från en annan klass.

Mitt problem är att jag kan inte komma åt längden på min array med minArray.length.
När jag försöker komma åt längden med minArray.length från jag undefined som värde, dock fungerar tex minArray[0]namn.
Det jag vill åstadkomma är att loopa igenom min lista med en metod i klassen minKlass och därav hade jag velat ha tillgång till längden på min array.

EDIT: Här är koden är än så länge. Kör jag denna får jag resultatet jag vill. Men problemet är att jag inte kör loopen i calcTotal med array.length utan nu är det hårdkodat.

//Skapar en class class Vara { constructor(namn, pris, beskrivning, antal) { this.namn = namn; this.pris = pris; this.beskrivning = beskrivning; this.antal = antal; } //Skapar en metod i klassen calcSubTotal() { return this.pris * this.antal; // Returnerar pris * antal } } //Skapar en class class Kundkorg { constructor(varor) { this.varor = varor; } //Skapar en metod i klassen calcTotal() { var totalPris = 0; //Variabel för att räkna totalpris //Loopar genom array och lägger ihop totalpris. HÄR ÄR MITT PROBLEM for (var i = 0; i < 3; i++) { totalPris += lista[i].pris * lista[i].antal; } return totalPris; //Returnerar resultat } } //Visar resultat i webbläsare function Visa() { var div = document.getElementById("div"); div.innerHTML = lista.calcTotal(); document.body.appendChild(div); } //Skapar objekt i class Vara potatis = new Vara("potatis", 7, "mjölig", 20); mjolk = new Vara("mjölk", 12, "lättmjölk", 2); brod = new Vara("bröd", 22, "ljust", 1); //Skapar en array i class Kundkorg lista = new Kundkorg(); //Lägger till objekt från Vara i Kundkorg array lista[0] = potatis; lista[1] = mjolk; lista[2] = brod;

Tack på förhand

Postar min lösning också:

//Skapar en class class Vara { constructor(namn, pris, beskrivning, antal) { this.namn = namn; this.pris = pris; this.beskrivning = beskrivning; this.antal = antal; } //Skapar en metod i klassen calcSubTotal() { return this.pris * this.antal; // Returnerar pris * antal } } //Skapar en class class Kundkorg { constructor(varor) { this.varor = varor; } //Skapar en metod i klassen calcTotal() { var totalPris = 0; //Variabel för att räkna totalpris //Loopar genom array och lägger ihop totalpris for (var i = 0; i < lista.varor.length; i++) { totalPris += lista.varor[i].pris * lista.varor[i].antal; } return totalPris; //Returnerar resultat } } //Visar resultat i webbläsare function Visa() { var div = document.getElementById("div"); div.innerHTML = lista.calcTotal(); document.body.appendChild(div); } //Skapar objekt i class Vara potatis = new Vara("potatis", 7, "mjölig", 20); mjolk = new Vara("mjölk", 12, "lättmjölk", 2); brod = new Vara("bröd", 22, "ljust", 1); var array = [potatis, mjolk, brod]; var lista = new Kundkorg(array);

Visa signatur

[CPU: Intel i5 13600KF] - [Moderkort: Asus TUF Z790] - [Minnen: Corsair Vengeance 2x16 5600MHz] - [GPU: Asus GeForce TUF 4070 Ti] [SSD: Samsung EVO 960 250GB, Samsung 850 500GB] - [Skärm: Msi 27" MAG274QRF-QD] - [Övrigt: Sennheiser HD650, Schiit Modi 2, Schiit Magni 3, Logitech G Pro, Ducky One 2 SF]

Permalänk
Medlem
Skrivet av KentBrack:

Hej!

Sitter och gör lite skola och har fastnat lite och tänkte be om lite hjälp.

Jag har en klass som innehåller en array med objekt från en annan klass.

Mitt problem är att jag kan inte komma åt längden på min array med minArray.length.
När jag försöker komma åt längden med minArray.length från jag undefined som värde, dock fungerar tex minArray[0]namn.
Det jag vill åstadkomma är att loopa igenom min lista med en metod i klassen minKlass och därav hade jag velat ha tillgång till längden på min array.

class item{
constructor(namn, antal) {

this.namn = namn;
this.antal= antal;
}

class minKlass{
constructor(minArray) {

this.minArray= minArray;

}
}

arrayItem1= new item("a", 1);
arrayItem2= new item("b", 2);
arrayItem3= new item("c", 3);

minArray = new minKlass();

lista[0] = arrayItem1;
lista[1] = arrayItem2;
lista[2] = arrayItem3;

Tack på förhand

minKlass tar en array i constructorn men du passar aldrig in något när du instansierar den.
Och vart kommer variabeln lista ifrån?

Det du får göra är att skicka in arrayen med items i minKlass och skapa metoder i klassen för att skriva ut/lägga till/ta bort data.
Alternativt bara instansiera den som en tom array och gör en metod för att lägga till items till arrayen i klassen.

Så anropas den med t.ex minKlass.showData();

Förresten, börja skriva koden på engelska redan nu. För man kodar aldrig på svenska när du arbetar med det.
Sen ska klassnamn skrivas med pascal case.
Happy coding!

Skickades från m.sweclockers.com

förtydligande att det är klassnamn för pascal case.
Permalänk
Medlem

Du hade missat en måsvinge efter klassen Item.

Men såhär kommer du åt längden. Jag gör det utanför klassen du ville ha funktionen i för detta, så du får göra den biten själv.
Obs, har inte testat koden men det bör fungera, om det inte gör det kolla efter ev missade semikolon etc.

Btw, det bästa sättet att debugga och testa olika kodsnuttar är direkt i console i t ex chrome, firefox har också en variant på detta. Man slipper kompilera massa kod när man sedan börjar jobba i verkliga livet.
Så spara din html sida och öppna upp det i chrome och tryck på F12 alt. högerklicka på sidan, välj 'Inspektera'. Där hittar du console fliken. Där kan kan skriva kod direkt i konsolen, komma åt object, html, skapa nya variabler osv. Du kan alltså manipulera hela sidan i konsolen och därmed kan du också testa stora delar av den befintliga koden och även tilltänkta koden direkt i konsolen innan du ens skriver det i html filen.

class item{
constructor(namn, antal) {

this.namn = namn;
this.antal= antal;
}
}

class MinKlass{
constructor(minArray) {

this.minArray= minArray;

}
}

arrayItem1= new item("a", 1);
arrayItem2= new item("b", 2);
arrayItem3= new item("c", 3);

var itemsArray = [
arrayItem1,
arrayItem2,
arrayItem3
];

minKlass = new MinKlass(itemsArray );

console.log(minKlass.minArray.length)

Permalänk
Medlem

@Nocto:
Tack för svaret. Har försökt med ditt förslag också och får "Cannot read property 'length' of undefined" som felkod :/

@zaibuf:
Ska ta en kika på och se om jag kommer någon vart

Visa signatur

[CPU: Intel i5 13600KF] - [Moderkort: Asus TUF Z790] - [Minnen: Corsair Vengeance 2x16 5600MHz] - [GPU: Asus GeForce TUF 4070 Ti] [SSD: Samsung EVO 960 250GB, Samsung 850 500GB] - [Skärm: Msi 27" MAG274QRF-QD] - [Övrigt: Sennheiser HD650, Schiit Modi 2, Schiit Magni 3, Logitech G Pro, Ducky One 2 SF]

Permalänk
99:e percentilen

Använd [code] när du klistrar in kod i forumet, så blir den lättare att läsa. (Redigera gärna trådstarten.)

[code]
console.log("Hello!");
[/code]

Visa signatur

Skrivet med hjälp av Better SweClockers

Permalänk
Medlem

@Alling:
Okej ska ta och ändra detta direkt!

Visa signatur

[CPU: Intel i5 13600KF] - [Moderkort: Asus TUF Z790] - [Minnen: Corsair Vengeance 2x16 5600MHz] - [GPU: Asus GeForce TUF 4070 Ti] [SSD: Samsung EVO 960 250GB, Samsung 850 500GB] - [Skärm: Msi 27" MAG274QRF-QD] - [Övrigt: Sennheiser HD650, Schiit Modi 2, Schiit Magni 3, Logitech G Pro, Ducky One 2 SF]

Permalänk
Medlem
Skrivet av KentBrack:

@Alling:
Okej ska ta och ändra detta direkt!

Om du inte* lyckas få fram det själv så kan du kika här, testat och får ut 3.

class Item { constructor(namn, antal) { this.namn = namn; this.antal = antal; } } class MinKlass { constructor(minArray) { this.minArray = minArray; } } arrayItem1 = new Item("a", 1); arrayItem2 = new Item("b", 2); arrayItem3 = new Item("c", 3); var arr = [arrayItem1, arrayItem2, arrayItem3]; var minKlass = new MinKlass(arr); console.log(minKlass.minArray.length); // Result: 3

felskrivning
Permalänk
Medlem

@KentBrack:

Testade koden precis, funkar fint.

Har du rensat cachen? Chrome älskar att cacha om du nu använder det.

Permalänk
Medlem

@zaibuf:
TACK! Detta var precis vad jag var ute efter.

Jag lyckades dock få fram det på ett annat sätt med hasOwnProperty i en metod i klassen, men koden blev överdrivet komplicerad och såg ut som något som legat och ruttnat

@Nocto:
Koden fungerade, fast ville byta ut det hårdkodade värdet i loopen som finns i klassmetoden.
Lyckades dock få ihop allt nu.

Visa signatur

[CPU: Intel i5 13600KF] - [Moderkort: Asus TUF Z790] - [Minnen: Corsair Vengeance 2x16 5600MHz] - [GPU: Asus GeForce TUF 4070 Ti] [SSD: Samsung EVO 960 250GB, Samsung 850 500GB] - [Skärm: Msi 27" MAG274QRF-QD] - [Övrigt: Sennheiser HD650, Schiit Modi 2, Schiit Magni 3, Logitech G Pro, Ducky One 2 SF]

Permalänk
Medlem

@KentBrack:

Skönt att du löste det, menade att den kod jag skrev fungerade då det var precis detsamma som Zai skrev senare med viss semantiskt skillnad.

Permalänk
Medlem

@Nocto:

Ah, jo. Det var jag som tänkte fel när jag testade koden. Missade att man skulle använda "minArray".
Skrev namnet på min array istället, alltså minKlass.

Tack för hjälpen

Visa signatur

[CPU: Intel i5 13600KF] - [Moderkort: Asus TUF Z790] - [Minnen: Corsair Vengeance 2x16 5600MHz] - [GPU: Asus GeForce TUF 4070 Ti] [SSD: Samsung EVO 960 250GB, Samsung 850 500GB] - [Skärm: Msi 27" MAG274QRF-QD] - [Övrigt: Sennheiser HD650, Schiit Modi 2, Schiit Magni 3, Logitech G Pro, Ducky One 2 SF]

Permalänk
99:e percentilen

@KentBrack, ett par tips till:

Variabeldeklarationer

Använd inte nyckelordet var. Använd const som utgångspunkt, och let endast då du behöver kunna skriva över variabeln.

Listor och loopar

var totalPris = 0; //Variabel för att räkna totalpris //Loopar genom array och lägger ihop totalpris. for (var i = 0; i < 3; i++) { totalPris += lista[i].pris * lista[i].antal; } return totalPris; //Returnerar resultat

Först och främst: Hårdkoda aldrig in värden likt 3 ovan. Detta är jätteviktigt. Skriv istället det du menar, nämligen lista.length. Denna princip kallas DRY – Don't Repeat Yourself.

Sedan vill jag nämna att ovanstående kod kan skrivas kortare, mer uttrycksorienterat (i motsats till instruktionsorienterat), med mer fokus på kodens betydelse/syfte samt med mindre så kallad boilerplate-kod enligt nedan. Notera exempelvis att indexen i arrayen egentligen inte är intressanta; du använder dem enbart för att plocka ut (samtliga) element ur arrayen. Inte heller behöver vi i exemplet nedan bry oss om längden av lista.

const f = (acc, item) => acc + item.pris * item.antal; return lista.reduce(f, 0);

I detta exempel är f en funktion som används för att reducera/"vika ihop" listan lista till ett enda värde. Det andra argumentet till reduce är det värde som den tomma listan ska reduceras till. Alltså: [].reduce(f, 0) === 0.

Kommentarer

Den första och den sista kommentaren ovan (före och efter loopen) bör räknas som fullständigt redundanta. De gör inte koden lättare att förstå (för de raderna är redan så tydliga de kan vara), utan stjäl snarare fokus och får läsaren att undra varför de är där överhuvudtaget. Jag föreslår att du i allmänhet skippar kommentarer som bara säger exakt samma sak som koden de beskriver.

Visa signatur

Skrivet med hjälp av Better SweClockers

Permalänk
Medlem
Skrivet av KentBrack:

@zaibuf:
TACK! Detta var precis vad jag var ute efter.

Jag lyckades dock få fram det på ett annat sätt med hasOwnProperty i en metod i klassen, men koden blev överdrivet komplicerad och såg ut som något som legat och ruttnat

@Nocto:
Koden fungerade, fast ville byta ut det hårdkodade värdet i loopen som finns i klassmetoden.
Lyckades dock få ihop allt nu.

Du kan hänvisa till this i klassen.
Så om du gör en metod som heter logArrayData() i minKlass så kan du loopa this.minArray och console.log alla värden.

Skickades från m.sweclockers.com