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