Outils pour utilisateurs

Outils du site


cours2007:poo1:cm:tableaux_et_collections

Voir cette page sous forme de diaporama.

Tableaux et Collections

Adresser une multitude

Tableaux

Tableau (structure de données) :
Ensemble d'éléments auquel on a accès à travers un numéro d'index (ou indice).

Quoi faire avec ?

Lire la documentation :

  • Syntaxe
  • Méthodes d'accès
  • Méthodes de modification
  • Méthodes itératives

Relation Tableau / Objet (Rappel)

  • Un tableau est un objet qui reçoit une propriété length
  • N'utiliser que des clefs numériques avec un tableau.
  • Dans le cas de clefs non numérique, utiliser un objet comme tableau associatif.

Syntaxe

Création tableau vide :

var a = [];
var a = new Array();

Création de taille prédéfinie :

var a = new Array(5);

Remarque : toujours préférer la notation littérale.

Syntaxe

Notation littérale :

var a = ["zero","un","deux"];

Création avec plusieurs paramètres :

var a = new Array("zero","un","deux");

Remarque : toujours préférer la notation littérale.

Exemple Tableau (Rappel)

var a = [];
a[3] = 3; // [undefined, undefined, undefined, 3]
a.length; // 4
a[6] = 'six'
//  [undefined, undefined, undefined, 3,
//                  undefined, undefined, "six"]
a.length; // 7

Méthodes d'accès

Ne modifient pas le tableau original :

concat

concat : Renvoie un nouveau tableau constitué de ce tableau joint avec d'autres tableaux et/ou valeurs.

var tableau = ["zero"];
var test = tableau.concat("un",["deux"])
// ["zero", "un", "deux"]

join

join : Concatène tous les éléments du tableau dans une chaîne.

var tableau = ["zero","un","deux"];
var test = tableau.join(" et ")
//  "zero et un et deux"

slice

slice : Extrait une section d'un tableau et la renvoie dans un nouveau tableau.

var tableau = ["zero","un","deux"];
var test = tableau.slice(1,2)
//  ["un"]
var test = tableau.slice(1,3)
// ["un", "deux"]
var test = tableau.slice(1)
// ["un", "deux"]

toSource

toSource : Renvoie une définition littérale représentant le tableau. Cette valeur peut être utilisée pour créer un nouveau tableau. Remplace la méthode Object.toSource.

var tableau = ["zero","un","deux"];
var test = tableau.toSource();
'["zero", "un", "deux"]'

toString

toString : Renvoie une chaîne représentant le tableau et ses éléments. Remplace la méthode Object.toString.

var tableau = ["zero","un","deux"];
var test = tableau.toString()
//  "zero,un,deux"

idem tableau.join(",")

indexOf

indexOf : Renvoie le premier indice auquel un élément donné peut être trouvé dans le tableau, ou -1 s'il n'est pas présent.

var tableau = ["zero","un","deux"];
var test = tableau.indexOf("un")
//  1

de>

valueOf

valueOf : Renvoie la valeur primitive du tableau. Remplace la méthode Object.valueOf.

Méthodes de modification

Attention, modifient le tableau :

pop

pop : Retire le dernier élément d'un tableau et renvoie cet élément.

var tableau = ["zero","un","deux"];
var test = tableau.pop();
// "deux"

push

push : Ajoute un ou plusieurs éléments à la fin du tableau et renvoie la nouvelle longueur de celui-ci.

var tableau = ["zero","un"];
var test = tableau.push("deux");
// 3
tableau;
["zero", "un", "deux"]

shift

shift : Retire le premier élément d'un tableau et renvoie cet élément.

var tableau = ["zero","un","deux"];
var test = tableau.shift();
// "zero"

unshift

unshif : Ajoute un ou plusieurs éléments au début d'un tableau et renvoie la nouvelle longueur de celui-ci.

var tableau = ["un","deux"];
var test = tableau.unshift("zero");
// 3
tableau;
["zero", "un", "deux"]

splice

splice : Ajoute et/ou retire des éléments d'un tableau.

var tableau = ["zero","un","deux"];
var test = tableau.splice(1,2,"I","II","III");
// ["un", "deux"]
tableau;
["zero", "I", "II", "III"]

reverse

reverse : Inverse l'ordre des éléments d'un tableau, le dernier devient le premier et le premier devient le dernier.

var tableau = ["zero","un","deux"];
tableau.reverse();
// ["deux", "un", "zero"]

sort

sort : Trie les éléments d'un tableau. (trié selon l'ordre lexicographique si pas de fonction de comparaison)

var tableau = ["zero","un","deux"];
tableau.sort();
// ["deux", "un", "zero"]
tableau.sort(function(a,b){
    return (b.length-a.length)
  });
// ["zero", "deux", "un"]

Parcourir un tableau

Il est fréquent d'utiliser une boucle for :

var tableau = ["zero","un","deux"];
for (var i = 0; i < tableau.length; i += 1) {
  // Dans la boucle, 
  // i est l'index courant
  // tableau[i] est l'élément courant
}

Mais éviter des erreurs en utilisant un itérateur

itérateur

Itérateur (motif de conception) ou Structure de contrôle#Itérateurs :
Permet de réaliser une boucle parcourant tous les éléments contenus dans une structure de données.

Méthodes itératives

Introduite dans JavaScript 1.6 :

Pour les autres navigateurs, existe dans Mootools : Array

forEach

forEach : Appelle une fonction pour chaque élément du tableau.

var tableau = ["zero","un","deux"];
tableau.forEach(function(element,indice,tab))
// Dans la boucle, 
// indice est l'index courant
// element==tab[indice] est l'élément courant
}

Remarque : Mootools, each == forEach même fonction.

filter

filter : Crée un nouveau tableau comprenant tous les éléments du tableau pour lesquels la fonction de filtre renvoie true.

var tableau = ["zero","un","deux"];
var test = tableau.filter(function(item){
              return (item[1]=="e")
           });
// ["zero", "deux"]

map

map : Crée un nouveau tableau contenant les résultats de l'appel de la fonction fournie sur chaque élément du tableau.

var tableau = ["zero","un","deux"];
var test = tableau.map(function(item){
              return (item.toUpperCase())
           });
// ["ZERO", "UN", "DEUX"]

every

every : Renvoie true si chaque élément du tableau satisfait à la fonction de test fournie.

var tableau = ["zero","un","deux"];
var test = tableau.evry(function(item){
              return (item[1]=="e")
           });
// false

some

some : Renvoie true si au moins un élément du tableau satisfait à la fonction de test fournie.

var tableau = ["zero","un","deux"];
var test = tableau.some(function(item){
              return (item[1]=="e")
           });
// true

Collections d'éléments

Une structure de données est une structure logique destinée à contenir des données, afin de leur donner une organisation permettant de simplifier leur traitement.

nodeList ≠ array (rappel)

Attention : Les fonctions du DOM retournent des listes de noeuds

  • Ce n'est pas des tableaux JavaScript
  • Elles se comportent comme des tableaux
  • Leurs contenus sont susceptibles de changer

Mootools : $A()

$A() : Permet d'utiliser les méthodes itératives sur des collections d'éléments du DOM.

elm.each() : Raccourci pour elm.forEach()

Mootools : $$() / .getElements()

$$(selecteur) / elm.getElements(selecteur) : retourne tous les éléments correspondants au sélecteur CSS.

elm.getElement(selecteur) : retourne que le premier.

Mootools : Elements

http://mootools.net/docs/core/Element/Element#Elements : retourné par les fonctions qui donnent une liste d'éléments

  • C'est un tableau
    • toutes les méthodes de Array
  • Les méthodes de Element sont automatiquement appliquées à tous les éléments du tableau.

Mootools : Elements

$$('a').setStyle('color',[128,96,196]);
$$('a').forEach(function(elm){
  elm.setStyle('color',[128,96,196]);
});

Exemples

<div id="contenu">
    <h3 class="titre">Un titre</h3>
    <ul id="menu">
      <li><a class="lien_menu" href="#">item 1</a></li>
      <li id="actif">
        <a class="lien_menu" href="#">item 2</a>
        <ul>
          <li><a class="lien_menu" href="#">item 2.1</a></li>
          <li><a class="lien_menu" href="#">item 2.2</a></li>
        </ul>
      </li>
      <li><a class="lien_menu" href="#">item 3</a></li>
    </ul>
    <p>Bla bla bla bla <a href="#">bla bla</a> bla </p>
</div>
cours2007/poo1/cm/tableaux_et_collections.txt · Dernière modification: 2009/05/16 22:00 (modification externe)