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
Soit "const myArray = [ 30, 50, 70 ];" : que fait "myArray[1]" de retour ?
70
Si "myArray" contient trois valeurs, que renvoie "myArray[9]" ?
Undefined
9
Null