Collections indexées

Une collection indexée est une structure de données dans laquelle les éléments sont stockés et accessibles à l'aide d'index numérotés. Les valeurs stockées dans une collection indexée des index numérotés à partir de 0, un format appelé "indexation zéro". Vous pouvez ensuite accéder aux valeurs stockées dans une collection indexée en référençant leurs index.

Tableau

Un tableau est un conteneur qui peut contenir zéro ou plusieurs valeurs de n'importe quel type de données. y compris des objets complexes ou d'autres tableaux. Les valeurs stockées dans un tableau parfois appelés "éléments", du tableau.

Créer un tableau

Comme pour les types de données primitifs, il existe deux approches pour créer un tableau : un littéral de tableau ou en appelant le constructeur Array() intégré de JavaScript avec new Array(). L'attribution d'un tableau à une variable fournit une couche de données et iterable d'attribuer plusieurs valeurs à un identifiant unique.

La syntaxe des littéraux de tableau utilise un ensemble de crochets ([]) entourant zéro ou plusieurs valeurs de données séparées par une virgule:

const myArray = [];

La syntaxe du constructeur de tableau utilise l'objet Array intégré de JavaScript en tant que avec le mot clé new:

const myArray = new Array();

Les syntaxes de littéral de tableau et de constructeur de tableau vous permettent de remplir un tableau avec informations lors de leur création, même si leur syntaxe diffère légèrement de valeurs sont définies. La syntaxe des littéraux de tableau utilise des valeurs séparées par une virgule entre les entre crochets, qui ressemble au tableau obtenu:

const myArray = [ true, null, "String", false ];

myArray;
> [ true, null, "String", false ]

La syntaxe du constructeur de tableau accepte des valeurs séparées par une virgule en tant qu'arguments, avec un argument exception de comportement spécial:

const myArray = new Array( true, null, "String", false );

myArray;
> Array(4) [ true, null, "String", false ]

Lorsqu'une seule valeur numérique est transmise au constructeur Array, cette valeur n'est pas attribuée à la position zéro dans le tableau obtenu. À la place, un tableau est créé avec ce nombre d'emplacements vides pour les valeurs. Cela n'impose aucune les limites du tableau. Vous pouvez ajouter et supprimer des éléments de la même manière comme avec un littéral de tableau.

// Firefox:\
const myArray = new Array( 10 );

myArray;
> Array(10) [ <10 empty slots> ]

// Chrome:
const myArray = new Array( 10 );

myArray;
> (10) [empty × 10]

Les tableaux contenant des emplacements vides (parfois appelés "tableaux creux") sont spéciaux cas d'utilisation. Au lieu de contenir une valeur undefined ou explicitement null, vide les emplacements sont souvent, mais pas toujours, traités comme des valeurs undefined ailleurs dans le langue.

Vous pouvez créer accidentellement un tableau creux à l'aide d'une syntaxe de littéral de tableau omettre une valeur entre les virgules lorsque vous créez un littéral de tableau:

const myArray = [ true,, true, false ];

myArray;
> Array(4) [ true, <1 empty slot>, true, false ]

Même s'il n'est pas traité comme une valeur significative dans tous les contextes, un emplacement vide est pris en compte dans la longueur totale du tableau, ce qui peut conduire à des résultats inattendus lors d'itérations les valeurs d'un tableau:

const myArray = [ 1,, 3, 4 ];

myArray.length;
> 4

for( const myValue of myArray ) {
  console.log( myValue + 10 );
}
> 11
> NaN
> 13
> 14

Ce comportement découle de certaines des premières décisions de conception de JavaScript. Dans le développement moderne, évitez d'utiliser des tableaux creux.

Comme pour les primitives, un littéral de tableau hérite des propriétés et des méthodes du constructeur correspondant. Étant donné qu'un tableau est une forme particulière d'objet, la syntaxe et les valeurs littérales de tableau La syntaxe new Array() crée des résultats fonctionnellement identiques: un objet qui hérite son prototype du constructeur Array.

const arrayLiteral = [];
const arrayConstructor = new Array();

typeof arrayLiteral;
> "object"

arrayLiteral;
> Array []
    length: 0
    <prototype>: Array []

typeof arrayConstructor;
> "object"

arrayConstructor;
> Array []
    length: 0
    <prototype>: Array []

Parce que les deux résultats sont identiques et que la syntaxe du littéral de tableau est plus concise. et littéral, nous vous recommandons vivement de toujours utiliser la syntaxe de littéral de tableau au lieu de Syntaxe new Array().

Accéder aux valeurs du tableau

Vous pouvez accéder aux éléments individuels du tableau en utilisant la notation entre crochets, une ensemble de crochets ([]) suivant le tableau ou son identifiant contenant un nombre faisant référence à l'index de cet élément:

[ "My string", "My other string" ][ 1 ];
> "My other string"

const myArray = [ "My string", 50, true ];

myArray[ 0 ];
> "My string"

myArray[ 1 ];
> 50

myArray[ 2 ];
> true

Les tableaux en JavaScript ne sont pas associatifs, ce qui signifie que vous ne pouvez pas utiliser une chaîne arbitraire comme index. Cependant, la valeur numérique les valeurs utilisées pour accéder aux éléments d'un tableau sont forcées à une valeur de chaîne derrière ce qui signifie que vous pouvez utiliser une valeur de chaîne contenant uniquement des valeurs caractères:

const myArray = [ "My string", 50, true ];

myArray[ 2 ];
> true

myArray[ "2" ];
> true

Toute tentative d'accès à un élément en dehors de ceux définis dans le tableau entraîne undefined, et non une erreur:

const myArray = [ "My string", 50, true ];

myArray[ 9 ];
> undefined

Déstructuration de l'attribution

L'affectation de déstructuration est un moyen concis d'extraire une plage de valeurs tableaux ou d'objets et les attribuer à un ensemble d'identifiants, un processus parfois appelé "déballage" la structure de données d'origine, bien qu'il ne modifie pas le tableau ou l'objet d'origine.

L'attribution de déstructuration utilise une liste d'identifiants sous forme de tableau ou d'objet pour suivre les valeurs. Dans sa forme la plus simple, appelée modèle de liaison chaque valeur est désempaquetée du tableau ou de l'objet et attribuée à une variable correspondante, initialisée à l'aide de let ou const (ou var):

const myArray = [ "A string", "A second string" ];
const [ myFirstElement, mySecondElement ] = myArray;

const myObject = { firstValue: false, secondValue: true };
const { myProp, mySecondProp } = myObject;

myFirstElement;
> "My string"

mySecondElement;
> "Second string"

myProp;
> false

mySecondProp;
> true

Utilisez des accolades ({}) pour déstructurer un objet et des crochets ([]) pour déstructurer un tableau.

const myArray = [ false, true ];
const myObject = { firstValue: false, secondValue: true };

const [ myProp, mySecondProp ] = myObject;
> Uncaught TypeError: myObject is not iterable

const { myElement, mySecondElement } = myArray;

myElement
> undefined

mySecondElement;
> undefined

La déstructuration d'un tableau s'effectue dans un ordre séquentiel, de gauche à droite. Chaque dans l'attribution de déstructuration correspond à l'élément avec le même index:

const myArray = [ 1, 2, 3 ];
const [ myElement, mySecondElement, myThirdElement ] = myArray;

myElement;
> 1

mySecondElement;
> 2

myThirdElement;
> 3

Il s'agit également du comportement par défaut lors de la déstructuration d'un objet. Toutefois, si le utilisés dans l'attribution de déstructuration correspondent aux clés du propriétés, ces identifiants sont renseignés avec la propriété correspondante quel que soit l'ordre dans lequel elles sont spécifiées:

const myObject = { firstValue: 1, secondValue: 2, thirdValue 3 };
const { secondValue, thirdValue, firstValue } = myObject;

firstValue;
> 1

secondValue;
> 2

thirdValue;
> 3

Vous pouvez ignorer des éléments en omettant un identifiant:

const myArray = [ 1, 2, 3 ];
const [ firstValue,, secondValue ] = myArray;

firstValue;
> 1

secondValue;
> 3

La syntaxe de déstructuration vous permet également d'attribuer des valeurs par défaut au cas où une la valeur est soit un emplacement vide, comme dans le cas d'un tableau creux, soit Valeur undefined.

const myArray = [ true, ];
const [ firstValue = "Default string.", secondValue = "Default string." ] = myArray;

firstValue;
> true

secondValue;
> "Default string."

La déconstruction ne force pas les valeurs à des types particuliers. Cela signifie que Valeurs falsy (vides, par exemple) les chaînes ("") ou null, sont toujours considérées comme des valeurs déstructurées significatives:

const myArray = [ false, null, 0, "",, undefined ];
const [ falseValue = true, nullValue = true, zeroValue = true, emptyStringValue = true, emptySlot = true, undefinedValue = true ] = myArray;

falseValue;
> false;

nullValue;
> null

zeroValue;
> 0

emptyStringValue;
> ""

emptySlot;
> true

undefinedValue;
> true

Opérateur de répartition

Utiliser l'opérateur de répartition (...) introduit dans ES6 pour développer des données itérables structure telle qu'un tableau, une chaîne ou un littéral d'objet en éléments individuels. L'opérateur de répartition est immédiatement suivi de la structure de données à développer. ou l'identifiant d'une variable contenant cette structure de données.

const myArray = [ 1, 2, 3 ];

console.log( ...myArray );
> 1 2 3

La syntaxe de répartition est principalement utilisée pour copier et combiner des tableaux:

const myArray = [ 4, 5, 6 ];
const mySecondArray = [1, 2, 3, ...myArray ];

mySecondArray;
> Array(6) [ 1, 2, 3, 4, 5, 6 ]

Vous pouvez utiliser la syntaxe de dispersion uniquement dans les contextes suivants:

Pour les tableaux et les chaînes, la syntaxe de répartition ne s'applique que lorsque zéro ou plusieurs arguments dans un appel de fonction ou des éléments d'un tableau sont attendus. Le premier exemple de dans cette section, la syntaxe de l'opérateur de dispersion fonctionne, car elle transmet ...myArray en tant que un argument à la méthode console.log intégrée.

Par exemple, vous ne pouvez pas affecter les données réparties à une variable située en dehors un autre tableau:

const myArray = [ 1, 2, 3 ];
const spreadVariable = ...myArray;
> Uncaught SyntaxError: Unexpected token '...'

Toutefois, vous copiez un tableau en répartissant le tableau d'origine dans un littéral de tableau:

const myArray = [ 1, 2, 3 ];
const spreadArray = [ ...myArray ];

spreadArray;
> Array(3) [ 1, 2, 3 ]

Pour fusionner les éléments qui composent deux tableaux ou plus en un seul tableau:

const myArray = [ 1, 2, 3 ];
const mySecondArray = [ 4, 5, 6 ];
const myNewArray = [ ...myArray, ...mySecondArray ];

myNewArray;
> Array(6) [ 1, 2, 3, 4, 5, 6 ]

Ou, pour transmettre les éléments d'un tableau en tant qu'arguments individuels dans un appel de fonction:

const myArray = [ true, false ];
const myFunction = ( myArgument, mySecondArgument ) => {
    console.log( myArgument, mySecondArgument );
};

myFunction( ...myArray );
> true false

L'opérateur de propagation a été étendu pour fonctionner avec littéraux d'objet dans ES2018. Comme pour les tableaux, vous pouvez utiliser l'opérateur de dispersion pour dupliquer ou fusionner des objets:

const myObj = { myProperty : true };
const mySecondObj = { ...myObj };

mySecondObj;
> Object { myProperty: true }

const myFirstObj = { myProperty : true };
const mySecondObj = { additionalProperty : true };
const myMergedObj = { ...myFirstObj, ...mySecondObj };

myMergedObj;
> Object { myProperty: true, additionalProperty: true }

L'opérateur de propagation crée une « superficie » des copies. Cela signifie qu'il ne copie pas prototype de l'objet d'origine et non-enumerable propriétés.

const myCustomPrototype = { protoProp: "My prototype." };
const myObj = Object.create( myCustomPrototype, {
    myEnumerableProp: {
        value: true,
        enumerable: true
    },
    myNonEnumerableProp: {
        value: false,
        enumerable: false
    }
});
const myNewObj = { ...myObj };

myObj;
> Object { myEnumerableProp: true, … }
    myEnumerableProp: true
    myNonEnumerableProp: false
    <prototype>: Object { protoProp: "My prototype." }

myNewObj;
> Object { myEnumerableProp: true }
    myEnumerableProp: true
    <prototype>: Object { … }

Gardez à l'esprit que les tableaux et les objets ne peuvent pas être utilisés de manière interchangeable. Vous ne pouvez pas propager un objet dans un tableau, ou un tableau dans un objet.

Opérateur REST

Bien que la syntaxe de l'opérateur lui-même soit la même, l'opérateur REST (...) exécute la fonction opposée en fonction du contexte dans lequel elle est utilisée. Au lieu de développer une structure de données itérable en éléments individuels, comme c'est le cas dans destructuration ou en tant que paramètre "function", l'opérateur "rest" combine éléments en une structure de données itérable. Le nom vient du fait qu’il s’agit utilisés pour rassembler « le reste » d'un ensemble de valeurs de données.

Lorsqu'elle est utilisée avec une attribution de déstructuration, la syntaxe est appelée "propriété de repos" syntaxe.

const myArray = [ "First", "Second", "Third", "Fourth", "Fifth" ];

[ myFirstElement, mySecondElement, ...remainingElements ] = myArray;

myFirstElement;
> "First"

mySecondElement;
> "Second"

remainingElements;
> Array(3) [ "Third", "Fourth", "Fifth"]

Lorsqu'elle est utilisée pour fournir un nombre illimité d'arguments à une fonction, la syntaxe s'appelle « paramètre REST » syntaxe:

function myFunction( ...myParameters ) {
    let result = 0;
    myParameters.forEach( ( myParam ) => {
        result += myParam;
    });
    return result;
};

myFunction( 2, 2 );
> 4

myFunction( 1, 1, 1, 10, 5 );
> 18

myFunction( 10, 11, 25 );
> 46

%TypedArray%

Les tableaux typés sont une fonctionnalité ES6 conçue pour stocker des données binaires structurées. par exemple lorsque vous travaillez avec des fichiers importés ou WebGL :

Comme pour les symboles, %TypedArray% Fonction intrinsèque (généralement documentée sous la forme %TypedArray% ou @@TypedArray afin qu'elle ne puisse pas être confondue avec une propriété globale) n'est pas une fonction constructeur dans au sens conventionnel. Vous ne pouvez pas l'appeler avec new ni l'appeler directement. Au lieu de cela, %TypedArray% fait référence à une super-classe parente de constructeurs, chacun d'eux fonctionnant avec un format de données binaire spécifique. La La super-classe %TypedArray% intrinsèque fournit des propriétés et des méthodes utilitaires qui toutes les sous-classes du constructeur %TypedArray% et leurs instances héritent.

Testez vos connaissances