Discussion :

[Ragoudcep]

Bonjour,


Je découvre le Js depuis quelque jours, et étant familier du c/c++ j'avoue être très surpris de l'approche de ce langage ! ()


J'aimerais créer un bête tableau à deux dimensions d'objets prédéfinis, mais je m'embrouille avec ces histoires d'objets proto-typés et tout la logique qui va avec...

En gros j'ai l'impression qu'il me faudrait créer un array, puis le remplir d'array, puis dans chaque array initialiser avec new mon objet prédéfinis, quelle lourdeur !

Mon constructeur ressemble à :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function Tile(P_position_x, P_position_y){
 
   this.D_position_x = P_position_x;
   this.D_position_y = P_position_y;
 
   }

S'il s'agissait d'une "classe", en C il "me suffirait" d'un simple Tile Grille[largeur][longueur];

En Js, je n'arrive pas à écrire mieux que ça... :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var tableau = new Array(5);
 
function Tile(P_position_x, P_position_y){
 
  this.D_position_x = P_position_x;
  this.D_position_y = P_position_y;
 
}
 
for (var i = 0; i < 5; i++) {
  tableau[i] = new Array(5);
  for (var u = 0; u < 5; u++) {
    tableau[i][u] = new Tile(4,2) ;
  }
}
alert(tableau[0][3].D_position_x+""+tableau[2][4].D_position_y); // affiche 42
alert(tableau[4][2].D_position_x+""+tableau[4][2].D_position_y); // affiche 42

Bref, autant dire que j'aimerais savoir s'il n'y a pas plus simple (et juste...) pour répondre à un besoin aussi primaire !

Si vous aviez une piste, je vous en remercierais grandement ! Tous les tutos fréquentés (sdz, mozilla, devellopez...) n'ont réussi qu'à m'embrouiller

Bonne journée à vous !

[danielhagnoul]

C'est un autre langage, donc des moyens différents et des possibilités différentes.

En utilisant ES2015, le JS d'aujourd'hui :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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
function Tile( P_position_x, P_position_y ){
  this.D_position_x = P_position_x;
  this.D_position_y = P_position_y;
}
 
const
  longueur = 5,
  tableau = new Array( longueur );
 
// initialisation du tableau
tableau.fill( new Array( longueur ) );
 
for ( let item of tableau ){
  item.fill( new Tile( 4, 2 ) );
}
 
// debug, console, touche F12
for ( let item of tableau ){
  for ( let jtem of item ){
    console.log( jtem );
  }
}
 
// votre test
console.log( tableau[0][3].D_position_x + "" + tableau[2][4].D_position_y ); // affiche 42
console.log( tableau[4][2].D_position_x + "" + tableau[4][2].D_position_y ); // affiche 42

[Ragoudcep]

Salut !

Merci ! Une réponse au top ! Je vais regarder tout ça de plus près...

Bonne journée à toi, et merci encore !

[SylvainPV]

Je précise, puisque vous débutez en JS, que la norme ES2015 utilisée dans le code de Daniel n'est pas bien supportée par les navigateurs anciens comme IE. Attention si vous avez des contraintes de support

[Ragoudcep]

Merci bien

C'est noté ! De toute façon depuis que j'ai commencé... c'est toujours IE qui finit en par être pointé du doigt dans les tutos... Je commence a anticiper le truc !

En tout cas le coup des let/const à l'air d'être assez majeur comme évolution, merci pour l'info !

Bonne soirée !

[danielhagnoul]

EDIT :

La méthode fill() remplit tout les éléments d'un tableau entre deux index avec une valeur statique.

Il est normal que cela ne fonctionne pas pour un objet, car il affecte le même objet à chaque cellule du tableau. Il est impossible de faire tableau.fill( new Array( longueur ) );.

Voir : http://www.developpez.net/forums/d16...s/#post8750629

[danielhagnoul]

La méthode fill ne peut prendre qu'une valeur statique, mais on peut construire et initialiser un tableau simple ou un tableau à deux dimensions avec Array.from(arrayLike[, fonctionMap[, thisArg]]).

Voir : https://developer.mozilla.org/fr/doc...aux/Array/from
Et : http://exploringjs.com/es6/ch_arrays.html#Array_from

Exemple :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function Cellule( actif, age, abouge ){
  this.actif = actif;
  this.age = age;
  this.abouge = abouge;
}
 
const
  longueur = 20,
  tableau = Array.from( new Array( longueur ), () => Array.from( new Array( longueur ), () => new Cellule( false, 0, false ) ) );
 
// test
tableau[1][1].age = 66;
tableau[5][5].actif = true;
tableau[15][3].abouge = true;
 
// debug, console, touche F12
for ( let [ i, item ] of tableau.entries() ){
  for ( let [ j, jtem ] of item.entries() ){
    console.log( `[ ${i}, ${j} ] : actif = ${ jtem.actif }, age = ${ jtem.age }, abouge = ${ jtem.abouge }` );
  }
}

[Ragoudcep]

Merci encore Daniel ! Heuresement que tu es là !

Je suis tombé exactement sur le même problème peu après avoir lu ta réponse sur mon sujet précédent !

Je modifiais mon tableau d'objet(S?!) en utilisant "tableau[x][y].blablabla]" sans me rendre compte qu'il s'agissait du même objet...

Je commence à trouver ça un peu tiré par les cheveux de devoir écrire pour un tableau a 2D d'objets :
const
longueur = 5,
tableau = Array.from( new Array( longueur ), () => Array.from( new Array( longueur ), () => new Cellule( false, 0, false ) ) );


On est loin de ce qu'on pourrait imaginer innocemment en attaquant le Js... Je m'attendais un langage beaucoup plus "friendly".
Comment ce fait-il que se soit aussi contre intuitif ?! Mystère !

Bon code à vous !

[SylvainPV]

Intéressant le coup du Array.from, perso j'ai l'habitude de passer par un fill().map():

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

const tableau = Array(longueur).fill().map(() => Array(longueur).fill().map(() => new Cellule( false, 0, false ) ))

Ce n'est pas le plus intuitif parce qu'on cherche une solution en une seule ligne avec un style fonctionnel. Une approche plus "user-friendly/débutant" serait d'utiliser deux boucles for comme tu l'as fait au départ:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
var tableau = [];
for(var i=0; i<longueur; i++){
   tableau[i] = [];
   for(var j=0; j<longueur; j++){
     tableau[i][j] = new Cellule(false, 0, false);
  }
}

C'est encore ce qu'il y a de plus clair

[melka one]

Une approche plus "user-friendly/débutant"

le mot débutant est un peut fort.

Dans plus ou moins le même sens au lieux de dire abeille on devrait dire Anthophila

quand j'ai commencé a apprendre javascript en voyant ce genre de syntaxe j'aurais fuis a toutes jambes

[danielhagnoul]

Je commence à trouver ça un peu tiré par les cheveux de devoir écrire pour un tableau a 2D d'objets :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
const
      longueur = 5,
      tableau = Array.from( new Array( longueur ), () => Array.from( new Array( longueur ), () => new Cellule( false, 0, false ) ) );

C'est peut-être la notation arrow qui vous fait paraître la chose complexe. Lorsqu'on l'utilise tous les jours, on trouve au contraire qu'elle simplifie les codes.

Version avec () => :

let tableau = Array.from( new Array( longueur ), () => Array.from( new Array( longueur ), () => new Cellule( false, 0, false ) ) );.

Version avec function :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
let tableau = Array.from( new Array( longueur ), 
  function(){
    return Array.from( new Array( longueur ), 
      function(){
        return new Cellule( false, 0, false )
      }
    )
  }
);