Stocker des objets dans un tableau

Version imprimable

30/06/2023, 02h57
nouby

Stocker des objets dans un tableau

Comment vous faites pour stocker dans un tableau une structure de données telle qu'un objet ?
Moi quand je le fais, toutes les cases du tableau se retrouvent avec le meme objet et donc les mêmes valeurs, et c'est pas le but.

je voudrais stocker dans un tableau un nombre indéterminé de quatre valeurs :

X,Y,W,H

Je ne comprends pas bien ce que tu veux faire... Quelque chose comme ça ? :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tableau d'objets et accès aux propriétés </title>
</head>
<body>
    <script>
        class Monobjet{
            constructor(X,Y,W,H){
              this.X=X;
              this.Y=Y;
              this.W=W;
              this.H=H;
            }
        }
 
        let obj1=new Monobjet(10,10,100,100), 
            obj2= new Monobjet(110,110,200,200),
            obj3=new Monobjet(310,310,400,500);
            obj4=new Monobjet(710,810,100,100);
 
     
        let tabObj=[obj1,obj2,obj3];
        tabObj.forEach(elt =>{ console.log('X = ' + elt.X + ', Y = ' + elt.Y + ', W = '+elt.W + ', H = ' + elt.H );} ); 
        console.log('Ajout de objet4 au tableau');
        tabObj.push(obj4);
        console.log('X = ' + tabObj[3].X + ', Y = ' + tabObj[3].Y + ', W = '+tabObj[3].W + ', H = ' + tabObj[3].H );                  
    </script>
</body>
</html>

01/07/2023, 18h05
nouby

Merci !

non ce que je voudrais obtenir c'est enregistrer dans un tableau toutes les positions écran que prend un objet, qui aura des positions au hazard dont on connait pas forcément la quantité de positions.
Et pouvoir ensuite faire la meme chose pour une dizaine d'objets du meme type.

Mais ton code m'a apprit quelques trucs utiles pour le stockage et d'autres trucs.
01/07/2023, 18h41
Archimède

Salut, dans le callback de requestAnimationFrame, tu fais un forEach sur ton tableau d'objets et tu redéfinis les propriétés X et Y des éléments objet de ton tableau. Si tu rajoutes un objet sur ta scène, tu fais un push du tableau d'objets pour stocker le nouvel élément...
01/07/2023, 23h25
nouby

Citation:

Envoyé par Archimède

Salut, dans le callback de requestAnimationFrame, tu fais un forEach sur ton tableau d'objets et tu redéfinis les propriétés X et Y des éléments objet de ton tableau. Si tu rajoutes un objet sur ta scène, tu fais un push du tableau d'objets pour stocker le nouvel élément...

Merci !
je vais essayer de comprendre cette solution ;)
02/07/2023, 03h37
nouby
J'ai pas réussi à comprendre :/
De toutes les façons que j'essaie de faire je comprend pas, car si je déclare :
Code:

1 2 3 4 5 6 var localpoint={ X:0, Y,0, } var tableau=[];
Je ne peux pas faire

Code:

tableau.push(new localpoint);

Car je ne veux pas l'enregistrer sans y avoir mis des valeurs.
X et Y sont donnés par random au départ, puis itération ensuite, c'est pas moi qui attribue X et Y. Je veux faire un chemin de points.

et je ne peux pas faire
Code:

1 2 var point1=new localpoint(100,45); var point2=new localpoint(40,25);
car je ne sais pas combien je vais devoir ajouter de localpoints et dans la dernière solution, au moment de l'insérer dans le tableau il va écraser les valeurs du précédent :
Code:

1 2 3 4 var point=new localpoint(100,45); tableau.push(point); var point=new localpoint(100,45); tableau.push(point);
Du coup, de toutes les manières je m'en sors pas et je suis bloqué sur ça depuis des jours.

Et comme ça ?

Code:

1
2
3
4
5
6
7
8
9
        var tableau = []
 
        for (let i = 0; i < 20; i += 1) {
            let localpoint = {}
            localpoint.X = Math.floor(Math.random() * 1920) + 1
            localpoint.Y = Math.floor(Math.random() * 1080) + 1
            tableau.push(localpoint);
        }
        console.table(tableau)

02/07/2023, 13h34
nouby

Justement je parle du push, le probleme avec ça c'est l'existence d'un seul objet, nommé localpoint, et donc dés qu'on varie ses valeurs et qu'on fait push(), cela change aussi les valeurs déjà memorisées dans le tableau car en fait c'est un seul et meme objet localpoint.
Enfin c'est comme ça que j'ai compris le truc des objets par référence, je suis pas un connaisseur des objets, mais chaque fois qu'il n'y a qu'un seul objet en jeu dans le code c'est comme ça, on peut pas avoir plus d'une seule variante de valeurs, tout ce qu'on mémorise dans le tableau a les memes valeurs.

Ce que j'essaie de faire, c'est de créer un nouveau localpoint en début de boucle, laisser la boucle travailler et modifier ses valeurs et enregistrer le localpoint dans le tableau en fin de boucle afin d'avoir un nouveau localpoint différent du précédent, mais le problème c'est que tous les localpoints portent le meme nom, donc ils auront les mêmes valeurs :/
Il faudrait que j'arrive à créer des localpoints ayant des noms différents dans le tableau de localpoints, ou alors utiliser une méthode différente pour créer et enregistrer les localpoints.

EDIT : J'ai enfin reussi !

La solution était d'utiiser un objet point pour créer les valeurs aléatoires qui vont servir à créer le localpoint en début de boucle.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 var point={ X:0, Y:0, DirX:0, DirY:0, fin:false, limitV:0, Nbr:0, index:0 } class Clocalpoint{ constructor(X,Y){ this.X=X; this.Y=Y; } } /* Enregistre dans Tchemin tous les localpoints du chemin. */ function trace(){ // La limite haute du localpoint courant. point.limitV=Math.floor(Math.random(100)); // Départ de la boucle de test. point.fin=false; // Début de la boucle permettant de tracer un chemin de locapoints. while(point.fin==false){ // On crée le nouveau localpoint. var localpoint=new Clocalpoint(); // On lui attribue les valeurs X et Y de l'objet point qui sert à créer ces valeurs. localpoint.X=point.X; localpoint.Y=point.Y; // Selon la direction de X, la fin du tracé pour ce localpoint sera largeur écran ou 0. if(point.DirX==+1){ if(localpoint.X>=largeur){ point.fin=true; } }else{ if(localpoint.X<=0){ point.fin=true; } } // On mémorise le localpoint dans le tableau. Tchemin.push(localpoint); console.log(localpoint); } console.log(Tchemin); }

Mon premier exemple fonctionne bien, le "localpoint" X & Y sont différents à chaque boucle.

Si tu veux ajouter les objects "localpoint" à la fin de la boucle dans l'array "tableau"

Code:

1
2
3
4
5
6
7
        var tableau = [], localpoint = []
 
        for (let i = 0; i < 20; i += 1) {
            localpoint.push({ X: Math.floor(Math.random() * 1920) + 1, Y: Math.floor(Math.random() * 1080) + 1 })
        }
        tableau.push(localpoint);
        console.log(tableau)

Ou sinon

Code:

1
2
3
4
5
6
7
        var tableau = [], localpoint = []
 
        for (let i = 0; i < 20; i += 1) {
            localpoint.push({ X: Math.floor(Math.random() * 1920) + 1, Y: Math.floor(Math.random() * 1080) + 1 })
            tableau.push(localpoint[i]);
        }
        console.log(tableau)

Ah d’accord, merci alors car j'y connais rien, je disais ça par rapport à ce que j'avais constaté avec l'existence d'un seul objet localpoint, mais en effet je vois que j'avais rien compris comme d'hab, aux objets :/
A force et avec votre aide je vais finir par y arriver, merci beaucoup !

Moi j'avais cru que puisque tous les objets dans le tableau avaient le même nom, ils avaient forcément ensuite les mêmes valeurs, à cause de l'adressage par référence mais apparemment j'avais rien compris.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 0:Clocalpoint {X: 771, Y: 0} 1:Clocalpoint {X: 739, Y: 32} 2:Clocalpoint {X: 707, Y: 64} 3:Clocalpoint {X: 675, Y: 96} 4:Clocalpoint {X: 643, Y: 128} 5:Clocalpoint {X: 611, Y: 160} 6:Clocalpoint {X: 579, Y: 192} 7:Clocalpoint {X: 547, Y: 224} 8:Clocalpoint {X: 515, Y: 256} 9:Clocalpoint {X: 483, Y: 288} 10:Clocalpoint {X: 451, Y: 320} 11:Clocalpoint {X: 419, Y: 352} 12:Clocalpoint {X: 387, Y: 384} 13:Clocalpoint {X: 355, Y: 416} 14:Clocalpoint {X: 323, Y: 448} 15:Clocalpoint {X: 291, Y: 480} 16:Clocalpoint {X: 259, Y: 512} 17:Clocalpoint {X: 227, Y: 544} 18:Clocalpoint {X: 195, Y: 576} 19:Clocalpoint {X: 163, Y: 608} 20:Clocalpoint {X: 131, Y: 640} 21:Clocalpoint {X: 99, Y: 672} 22:Clocalpoint {X: 67, Y: 653} 23:Clocalpoint {X: 35, Y: 653} 24:Clocalpoint {X: 3, Y: 653} 25:Clocalpoint {X: -29, Y: 653} length : 26