Vous êtes sur la page 1sur 44

JavaScript nous permet de travailler avec des primitives (chaînes, nombres, etc.) comme s'il s'agissait d'objets.

Ils fournissent également des méthodes pour appeler en tant que tel. Nous les étudierons bientôt, mais nous
verrons d’abord comment cela fonctionne car, bien entendu, les primitives ne sont pas des objets (et nous
allons le rendre encore plus clair).
Regardons la distinction clé entre les primitives et les objets.

Est une valeur de type primitif. Il y a 6 types primitifs: string, number, boolean, symbol, null et undefined.

Est capable de stocker plusieurs valeurs en tant que propriétés. Peut être créé avec {}, par exemple: {name:
"John", age: 30}. Il existe d'autres types d'objets en JavaScript, par exemple, les fonctions sont des objets.
Une des meilleures choses à propos des objets est que nous pouvons stocker une fonction comme l'une de ses
propriétés:
var john = {
name: "John",
sayHi: function() {
console.log("Hi buddy!");
}
};

john.sayHi();

Nous avons donc créé un objet john avec la méthode sayHi.De nombreux objets intégrés existent déjà, tels que
ceux qui fonctionnent avec des dates, des erreurs, des éléments HTML, etc. Ils ont des propriétés et des
méthodes différentes.
Mais, ces fonctionnalités ont un coût!
Les objets sont «plus lourds» que les primitives. Ils ont besoin de ressources supplémentaires pour soutenir
les mécanismes internes. Mais comme les propriétés et les méthodes sont très utiles en programmation, les
moteurs JavaScript tentent de les optimiser pour réduire la charge supplémentaire.

Voici le paradoxe auquel est confronté le créateur de JavaScript:


 Il y a beaucoup de choses que l'on voudrait faire avec une primitive telle qu'une chaîne ou un nombre. Ce
serait génial d'y avoir accès comme méthodes.
 Les primitives doivent être aussi rapides et légères que possible.
La solution semble un peu bizarre, mais la voici:
1. Les primitives sont toujours primitives. Une seule valeur, comme vous le souhaitez.
2. Le langage permet d'accéder aux méthodes et aux propriétés des chaînes, des nombres, des booléens et des
symboles.
3. Lorsque cela se produit, un «wrapper d'objet» spécial est créé pour fournir la fonctionnalité supplémentaire,
puis est détruit.
Les « emballages d'objets » sont différents pour chaque type primitif et sont appelés: String, Number, Boolean
et Symbol. Ainsi, ils fournissent différents ensembles de méthodes.

Par exemple, il existe une méthode str.toUpperCase () qui renvoie une chaîne en majuscule.
Voici comment ça fonctionne:
var str = "Hello";
console.log( str.toUpperCase() ); // HELLO

Simple, non? Voici ce qui se passe réellement dans str.toUpperCase():


1. La chaîne str est une primitive. Ainsi, au moment d'accéder à sa propriété, un objet spécial est créé, qui
connaît la valeur de la chaîne et a des méthodes utiles, comme toUpperCase().
2. Cette méthode s'exécute et retourne une nouvelle chaîne (indiquée par console.log).
3. L'objet spécial est détruit, laissant le primitif str seul.
Les primitives peuvent donc fournir des méthodes, mais elles restent légères.
Le moteur JavaScript optimise fortement ce processus. Il peut même ignorer la création de l'objet
supplémentaire. Mais il doit toujours adhérer à la spécification et se comporter comme s'il en crée une.
Un nombre a ses propres méthodes, par exemple, toFixed (n) arrondit le nombre à la précision donnée:
var n = 1.23456;
console.log( n.toFixed(2) ); // 1.23

Nous verrons des méthodes plus spécifiques dans les chapitres Nombres et Chaînes .
Par exemple:

console.log( typeof 1 ); // "number"


console.log( typeof new Number(1) ); // "object"!
D'un autre côté, utiliser les mêmes fonctions String/Number/Boolean sans new est une chose totalement saine
et utile. Ils convertissent une valeur dans le type correspondant: une chaîne, un nombre ou un booléen
(primitive).
Par exemple, ceci est entièrement valide:
var num = Number("123"); // convert a string to number

console.log(null.test); // error

 Les primitives sauf null et undefined fournissent de nombreuses méthodes utiles. Nous étudierons cela dans
les prochains chapitres.
 Formellement, ces méthodes fonctionnent via des objets temporaires, mais les moteurs JavaScript sont bien
ajustés pour optimiser cela en interne, ils ne sont donc pas coûteux à appeler.

Tous les nombres en JavaScript sont stockés au format IEEE-754 au format 64 bits , également appelé «double
précision».Récapitulons et développons ce que nous savons actuellement à leur sujet.

Imaginez que nous ayons besoin d'écrire 1 milliard. La manière évidente est:
var billion = 1000000000;
Mais dans la vie réelle, nous évitons généralement d’écrire une longue chaîne de zéros, car il est facile de les
taper mal. De plus, nous sommes paresseux. Nous écrirons généralement quelque chose comme "1bn"un
milliard ou "7.3bn"7 milliards 300 millions. La même chose est vraie pour la plupart des grands nombres.
En JavaScript, nous raccourcissons un nombre en ajoutant la lettre "e"au nombre et en précisant le nombre de
zéros:
var billion = 1e9;
console.log( billion );
console.log( 7.3e9 );

En d'autres termes, "e"multiplie le nombre par le nombre de 1zéros donné.


1e3 = 1 * 1000
1.23e6 = 1.23 * 1000000

Maintenant écrivons quelque chose de très petit. Disons, 1 microseconde (un millionième de seconde):
var ms = 0.000001;

Comme avant, utiliser "e"peut aider. Si nous souhaitons éviter d'écrire les zéros explicitement, nous pourrions
dire:
var ms = 1e-6;

Si nous comptons les zéros dans 0.000001, il y en a 6. Alors naturellement c'est 1e-6.En d'autres termes, un
nombre négatif après "e"signifie une division de 1 avec le nombre donné de zéros:

1e-3 = 1 / 1000 (=0.001)

1.23e-6 = 1.23 / 1000000 (=0.00000123)

Les nombres hexadécimaux sont largement utilisés en JavaScript pour représenter des couleurs, encoder des
caractères et pour beaucoup d'autres choses. Alors, naturellement, il existe un moyen plus court de les
écrire: 0x puis le nombre.
Par exemple:
console.log( 0xff );
console.log( 0xFF );

Les systèmes de numération binaire et octale sont rarement utilisés, mais également supportés par
les préfixes 0b et 0o:
var a = 0b11111111;
console.log(" a ="+a );
var b = 0o377;
console.log(" b ="+a );

Il n'y a que 3 systèmes de numération avec un tel support. Pour les autres systèmes de numération, nous
devrions utiliser la fonction parseInt() .

La méthode num.toString(base) retourne une représentation sous forme de chaîne num dans le système
numérique avec le donné base.
Par exemple:
var num = 255;

console.log( num.toString(16) ); // ff
console.log( num.toString(2) ); // 11111111

La base peut varier de 2 à 16. Par défaut c'est 10.


Les cas d'utilisation courants pour cela sont:
 base = 16 est utilisé pour les couleurs hexadécimales, les codages de caractères, etc., les chiffres peuvent
être 0..9 ou A..F.
 base = 2 est principalement utilisé pour le débogage d'opérations au niveau du bit, les chiffres peuvent être 0
ou 1.
console.log( 123456..toString(16) ); // 1e240

L’arrondissement est l’une des opérations les plus utilisées lors de la manipulation des nombres. Il existe
plusieurs fonctions intégrées pour arrondir:
Math.floor

Arrondit: 3.1 devient 3 et -1.1 devient -2.

Math.ceil

Arrondit: 3.1 devient 4 et -1.1 devient -1.

Math.round

Arrondit à l'entier le plus proche: 3.1 devient 3, 3.6devient 4 et -1.1devient -1.


Math.trunc (non supporté par Internet Explorer)

Supprime tout ce qui suit la virgule sans arrondir: 3.1devient 3, -1.1devient -1.Voici le tableau pour
résumer les différences entre eux:

1. Multiplier et diviser.
Par exemple, pour arrondir le nombre au deuxième chiffre après la décimale, multipliez le nombre par 100,
appelez la fonction d'arrondi puis divisez-la.
var num = 1.23456;
console.log( Math.floor(num * 100) / 100 ); // 1.23456 -> 123.456 -> 123 -> 1.23

2. La méthode toFixed (n) arrondit le nombre en n chiffres après le point et renvoie une représentation sous
forme de chaîne du résultat.
var num = 12.34;
console.log( num.toFixed(1) ); // "12.3"

3. Ceci arrondit à la valeur la plus proche, similaire à Math.round:


var num = 12.36;
console.log( num.toFixed(1) ); // "12.4"

Veuillez noter que le résultat de toFixed est une chaîne. Si la partie décimale est plus courte que nécessaire,
des zéros sont ajoutés à la fin:

var num = 12.34;


console.log( num.toFixed(5) ); // "12.34000"
1. Nous pouvons le convertir en un numéro en utilisant le plus unaire ou un Number() appel: +num.toFixed(5).

En interne, un nombre est représenté au format 64 bits IEEE-754 . Il y a donc exactement 64 bits pour stocker
un nombre: 52 d'entre eux sont utilisés pour stocker les chiffres, 11 d'entre eux stockent la position du point
décimal (ils sont zéro pour les nombres entiers), et 1 bit est pour le signe.
Si un nombre est trop grand, le stockage 64 bits serait saturé, donnant potentiellement une infinité:
console.log( 1e500 ); // Infinity
Ce qui est peut-être un peu moins évident, mais qui arrive assez souvent, est la perte de précision. Considérez
ce test :
console.log ( 0.1 + 0.2 == 0.3 ); // false

C'est vrai, si nous vérifions si la somme de 0.1et 0.2 est 0.3, nous obtenons false. Etrange! Qu'est-ce que c'est
alors sinon 0.3?
console.log ( 0.1 + 0.2 ); // 0.30000000000000004

Aie! Il y a plus de conséquences qu'une comparaison incorrecte ici. Imaginez que vous faites un site e-
shopping et les met de visiteurs $0.10 et des $0.20 biens dans leur tableau. Le total de la commande
sera $0.30000000000000004. Cela surprendrait n'importe qui.
Mais pourquoi cela se produit-il?
Un nombre est stocké en mémoire sous sa forme binaire, une séquence de uns et de zéros. Mais les fractions
telles que 0.1, 0.2 qui paraissent simples dans le système numérique décimal, sont en réalité des fractions sans
fin dans leur forme binaire.
En d'autres termes, qu'est-ce que c'est 0.1? C'est un divisé par dix 1/10, un dixième. Dans le système
numérique décimal, ces nombres sont facilement représentables. Comparez - le à un tiers: 1/3. Cela devient
une fraction sans fin 0.33333(3).
Ainsi, la division par pouvoirs 10 est garantie de bien fonctionner dans le système décimal, mais la division
par 3 ne l’est pas. Pour la même raison, dans le système de numération binaire, la division par pouvoirs de 2
est garantie, mais 1/10 devient une fraction binaire sans fin.
Il n’existe aucun moyen de stocker exactement 0,1 ou 0,2 à l’aide du système binaire, tout comme il n’existe
aucun moyen de stocker un tiers sous forme de fraction décimale.
Le format numérique IEEE-754 résout ce problème en arrondissant au nombre le plus proche possible. Ces
règles d’arrondi ne nous permettent normalement pas de voir cette «petite perte de précision», aussi le nombre
apparaît-il 0.3. Mais attention, la perte existe toujours.
Nous pouvons voir cela en action:
console.log( 0.1.toFixed(20) ); // 0.10000000000000000555

Et quand on additionne deux nombres, leurs «pertes de précision» s'additionnent.


C'est pourquoi 0.1 + 0.2 n'est pas exactement 0.3.

Nous pouvons arrondir le résultat à l'aide d'une méthode toFixed (n) :


1. var sum = 0.1 + 0.2;
console.log( sum.toFixed(2) ); // 0.30
Veuillez noter que toFixed renvoie toujours une chaîne. Il s'assure qu'il a 2 chiffres après le point
décimal. C'est pratique si nous avons un e-shopping et que nous devons montrer $0.30. Pour les autres cas,
nous pouvons utiliser l’operateur unaire plus pour le contraindre en un nombre:
var sum = 0.1 + 0.2;
console.log ( +sum.toFixed(2) ); // 0.3
Nous pouvons temporairement transformer des nombres en nombres entiers pour les maths, puis les revenir en
arrière. Cela fonctionne comme ceci:
console.log ( (0.1 * 10 + 0.2 * 10) / 10 ); // 0.3
Cela fonctionne parce que lorsque nous le faisons 0.1 * 10 = 1, les 0.2 * 10 = 2 deux nombres deviennent des
nombres entiers et il n'y a pas de perte de précision.
Si nous avions affaire à un magasin, la solution la plus radicale consisterait à stocker tous les prix en centimes
et à ne pas utiliser de fractions du tout. Mais que se passe-t-il si nous appliquons une réduction de 30%? En
pratique, il est rarement possible d’éviter totalement les fractions, aussi les solutions ci-dessus permettent-elles
d’éviter ce piège.

Cela souffre du même problème: une perte de précision. Il y a 64 bits pour le numéro, 52 d'entre eux peuvent
être utilisés pour stocker des chiffres, mais cela ne suffit pas. Ainsi, les chiffres les moins significatifs
disparaissent.JavaScript ne déclenche pas d'erreur dans de tels événements. Il fait de son mieux pour adapter
le nombre au format souhaité, mais malheureusement, ce format n’est pas assez grand.

Rappelez-vous ces deux valeurs numériques spéciales?


 Infinity (et -Infinity) est une valeur numérique spéciale qui est plus grande que tout.
 NaN représente une erreur.
Ils appartiennent au type number, mais ne sont pas des nombres «normaux», il y a donc des fonctions
spéciales pour les vérifier:
 isNaN(value) convertit son argument en un nombre puis le teste pour être NaN:
 console.log( isNaN(NaN) ); // true
console.log ( isNaN("str") ); // true

Mais avons-nous besoin de cette fonction? Ne pouvons-nous pas simplement utiliser la comparaison ===
NaN? Désolé, mais la réponse est non. La valeur NaN est unique en ce sens qu'elle ne correspond à rien, y
compris elle-même:
console.log ( NaN === NaN ); // false
isFinite(value) convertit son argument en nombre et renvoie true s'il s'agit d'un nombre régulier,
pas NaN/Infinity/-Infinity:
 console.log ( isFinite("15") ); // true
 console.log ( isFinite("str") ); // false, because a special value: NaN
console.log ( isFinite(Infinity) ); // false, because a special value: Infinity
Parfois, isFinite() est utilisé pour valider si une valeur de chaîne est un nombre régulier:
var num = +prompt("Enter a number", '');

Console.log( isFinite(num) );

Veuillez noter qu'une chaîne vide ou une chaîne d'espacement seul est traitée comme 0 dans toutes les
fonctions numériques, y compris isFinite().

La conversion numérique utilisant un plus + ou Number() est stricte. Si une valeur n'est pas exactement un
nombre, elle échoue:
Console.log( +"100px" ); // NaN
La seule exception concerne les espaces au début ou à la fin de la chaîne, car ils sont ignorés.
Mais dans la vraie vie, nous avons souvent des valeurs en unités, comme "100px"ou "12pt"en CSS. De plus,
dans de nombreux pays, le symbole monétaire se situe après le montant. Nous avons donc "19€"et
souhaiterions en extraire une valeur numérique.
C'est l’affaire de parseInt() et parseFloat().
Ils «lisent» un nombre d'une chaîne jusqu'à ce qu'ils le puissent. En cas d'erreur, le numéro rassemblé est
renvoyé. La fonction parseInt() retourne un entier, alors que parseFloat() retournera un nombre à virgule
flottante:
console.log( parseInt('100px') );
console.log ( parseFloat('12.5em') );

console.log ( parseInt('12.3') );
console.log ( parseFloat('12.3.4') );

Il y a des situations où parseInt/parseFloatreviendra NaN. Cela arrive quand aucun chiffre ne peut être lu:
console.log ( parseInt('a123') );
JavaScript a un objet Math intégré qui contient une petite bibliothèque de fonctions et de constantes
mathématiques.
Quelques exemples:
Math.random()

Retourne un nombre aléatoire de 0 à 1 (non compris 1)


console.log ( Math.random() ); // 0.1234567894322
console.log ( Math.random() ); // 0.5435252343232
console.log ( Math.random() ); // ... (any random numbers)
Math.max(a, b, c...) / Math.min(a, b, c...)

Retourne le plus grand / le plus petit du nombre arbitraire d'arguments.


console.log ( Math.max(3, 5, -10, 0, 1) ); // 5
console.log ( Math.min(1, 2) ); // 1
Math.pow(n, power)

console.log ( Math.pow(2, 10) ); // 2 ^ 10 = 1024


Il y a plus de fonctions et de constantes dans l' objet Math, y compris la trigonométrie, que vous pouvez
trouver dans la documentation de l' objet Math .

Pour écrire de grands nombres:


 Ajouter "e"avec le nombre de zéros au nombre. Comme: 123e6 est 123 avec 6 zéros.
 Un nombre négatif après "e"entraîne la division du nombre par 1 avec des zéros donnés. C'est pour un
millionième ou tel.
Pour différents systèmes de numération:
 Peut écrire des nombres directement dans les systèmes hex ( 0x), octal ( 0o) et binary ( 0b)
 parseInt(str, base) analyse un nombre entier de tout système numérique avec la base: 2 ≤ base ≤ 16.
 num.toString(base) convertit un nombre en chaîne dans le système numérique avec le donné base.
Pour convertir des valeurs comme 12ptet 100px en un nombre:
 Utilisez cette option parseInt/parseFloat pour la conversion «souple», qui lit un nombre dans une chaîne, puis
renvoie la valeur qu’ils pouvaient lire avant l’erreur.
Pour les fractions:
 Round en utilisant Math.floor, Math.ceil, Math.trunc, Math.round ou num.toFixed(precision).
 N'oubliez pas qu'il y a une perte de précision lorsque vous travaillez avec des fractions.
Plus de fonctions mathématiques:
 Voir l' objet Math quand vous en avez besoin. La bibliothèque est très petite, mais peut couvrir les besoins de
base.

En JavaScript, les données textuelles sont stockées sous forme de chaînes. Il n'y a pas de type séparé pour un
seul caractère. Le format interne des chaînes est toujours UTF-16 , il n'est pas lié au codage de page.

Les chaînes peuvent être placées entre guillemets simples, doubles ou croisés:

let simple_quote = 'simple_quote';


let double_quote = "double_quote";
let quote_croisé = `quote_croisé`;
console.log(simple_quote) ;
console.log(double_quote) ;
console.log(quote_croisé) ;

Les guillemets simples et doubles sont essentiellement les mêmes. Les quotes_croisé, cependant, nous
permettent d’incorporer n’importe quelle expression dans la chaîne, y compris les appels de fonction:

var som=function (a, b) {


return a + b;
}

console.log(`1 + 2 = ${som(1, 2)}.`); // 1 + 2 = 3.


Les quotes_croisé ont également l'avantage de permettre à une chaîne de s'étendre sur plusieurs lignes:

let listePersonne = `Les personnes:


* Alaoui
* Slaoui
* Ibrahimi
`;

console.log(listePersonne);
Si nous essayons d'utiliser des guillemets simples ou doubles de la même manière, il y aura une erreur:

let listePersonne = "Les personnes:


* Alaoui
* Slaoui
* Ibrahimi
";

console.log(listePersonne);

Les guillemets simples et doubles proviennent d'anciens temps de la création linguistique lorsque la nécessité
de chaînes multilignes n'était pas prise en compte. Les quotes_croisé sont apparus beaucoup plus tard et sont
donc plus polyvalents.

Il est encore possible de créer des chaînes multilignes avec des guillemets simples en utilisant un "caractère de
nouvelle ligne", écrit en tant que \n, qui désigne un saut de ligne:
let listePersonne = "Les personnes:\n * Alaoui\n * Slaoui\n * Ibrahimi";
console.log(listePersonne);

Il existe également d'autres caractères «spéciaux» moins courants. Voici la liste:

console.log( "\u00A9" );
console.log( "\u{20331}" );
console.log( "\u{1F60D}" );

Tous les caractères spéciaux commencent par un caractère barre oblique inverse \. On l'appelle aussi un
"caractère d'échappement». Nous l'utilisons également si nous voulons insérer une citation dans la chaîne.

console.log( 'J\'habite à sale' ) ;

Comme vous pouvez le constater, nous devons ajouter la citation intérieure par une barre oblique
inversée \'.Bien sûr, cela ne concerne que les guillemets identiques à ceux qui les entourent. Donc, comme
solution plus élégante, nous pourrions utiliser des quotes double et quotes simple:
console.log( "J'habite à sale" ) ;
Notez que la barre oblique inverse \ sert à la lecture correcte de la chaîne par JavaScript, puis disparaît. La
chaîne en mémoire n'a pas \. Vous pouvez le voir clairement dans les exemples ci-dessus.Mais que faire si
nous devons afficher une barre oblique inverse \dans la chaîne?
C'est possible, mais nous devons le doubler comme suit \\:
console.log( `Anti Slache: \\` );

La propriété length a la longueur de la chaîne:


console.log( `My\n`.length );//=3
Notez que \n c'est un caractère "spécial" unique, donc la longueur est en effet 3.
Pour obtenir un caractère à la position pos, utilisez des crochets [pos]ou appelez la méthode str.charAt
(pos) . Le premier caractère commence à la position zéro:

let str = `Bonjour`;

// le premier caractere
console.log( str[0] ); // B
console.log( str.charAt(0) ); // B

// le dernier caractere
console.log( str[str.length - 1] ); // r

Les crochets sont un moyen moderne d’obtenir un élément, bien qu’ils charAt() existent principalement pour
des raisons historiques.
La seule différence entre eux est que si aucun caractère n'est trouvé, [] retourne undefined et charAt() retourne
une chaîne vide:
let str = `Bonjour`;

console.log( str[1000] ); // undefined


console.log( str.charAt(1000) ); // '' (chaine vide)
console.log( str.charAt(1000).length ); // 0
Nous pouvons également parcourir les caractères en utilisant for..of ou for classique:
for (var val of "Bonjour") {
console.log(val);
}
//ou

for (var i = 0; i < "Bonjour".length; i++)


{
console.log( "Bonjour"[i]);

Les chaînes ne peuvent pas être modifiées en JavaScript. Il est impossible de changer un élément.
Essayons de montrer que ça ne marche pas.
var str = 'Hi';

str[0] = 'k'; // error


console.log( str[0] );//H
Une solution possible est :

var str = 'Hi';


str = 'h' + str[1];
console.log( str ); // hi

Les méthodes toLowerCase () et toUpperCase () changent la casse:


console.log( 'Interface'.toUpperCase() ); // INTERFACE
console.log( 'Interface'.toLowerCase() ); // interface

Ou, si nous voulons un seul caractère majuscule:


console.log( 'interface'[0].toUpperCase()+'nterface' ); // 'Interface'

Il existe plusieurs façons de rechercher une sous-chaîne dans une chaîne.

La première méthode est str.indexOf (substr, pos) .Il recherche le substr dans str, à partir de la position
donnée pos, et renvoie la position où le match a été trouvé ou -1si rien ne peut être trouvé.

let str = 'Widget with id';

console.log( str.indexOf('Widget') ); // 0, car 'Widget' est trouvé au debut


console.log( str.indexOf('widget') ); // -1, non trouvé car la recherche est sensible à la
casse
console.log( str.indexOf("id") ); // 1, "id" est trouvé dans le mot Widget à la position 1)

Le second paramètre optionnel nous permet de rechercher à partir de la position donnée. Par exemple, la
première occurrence de "id"est à la position 1. Pour rechercher l'occurrence suivante, commençons la
recherche à partir de la position 2:
let str = 'Widget with id';
console.log( str.indexOf('id', 2) ) // 12
Il y a un léger inconvénient indexOf() dans le test avec if. Nous ne pouvons pas le mettre dans le if comme
ceci:
var str = "Widget with id";

if (str.indexOf("Widget")) {
console.log("We found it"); // erreur
}

Le console0.log() dans l'exemple ci-dessus ne marche pas car str.indexOf("Widget") retourne 0 (ce qui
signifie qu'il a trouvé la correspondance à la position de départ). Oui, mais if considère 0 comme false.
Nous devrions donc vérifier -1, comme ceci:
var str = "Widget with id";

if (str.indexOf("Widget") != -1) {
console.log("We found it"); // ça marche
}

Les plus modernes méthode str.includes (substr, pos) qui retourne true/false selon que str contient la
chaine substr à l’intérieur. C’est le bon choix si nous devons tester le match, mais nous n'avons pas besoin de
sa position:

console.log( "Widget with id".includes("Widget") ); // true


console.log( "Hello".includes("Bye") ); // false
Le second argument est optionnel de str.includes() càd la position :
console.log( "Midget".includes("id") ); // true
console.log( "Midget".includes("id", 3) ); // false

Les méthodes str.startsWith() et str.endsWith() font exactement ce qu'elles disent:


console.log( "Widget".startsWith("Wid") ); // true, "Widget" starts with "Wid"
console.log( "Widget".endsWith("get") ); // true, "Widget" ends with "get"
Il y a 3 méthodes JavaScript pour obtenir une sous - chaîne: substring(), substr() et slice().
str.slice(start [, end]). Renvoie la partie de la chaîne de start à end.

var str = "stringify";


console.log( str.slice(0, 5) ); // 'strin', the substring from 0 to 5 (not including 5)
console.log( str.slice(0, 1) ); // 's', from 0 to 1, but not including 1, so only character
at 0

S'il n'y a pas de second argument, slice() va jusqu'à la fin de la chaîne:


var str = "Bonjour";
console.log( str.slice(3) ); // (jour)

Des valeurs négatives pour start/end sont également possibles. Ils veulent dire que la position est comptée à
partir de la fin de la chaîne:
var str = "Bonjour";
console.log( str.slice(-4, -1) ); //jou

str.substring(start [, end]). Renvoie la partie de la chaîne entre start et end.C'est presque la même chose
que slice(), mais ça permet start d'être plus grand que end.

var str = "stringify";

console.log( str.substring(2, 6) );
console.log( str.substring(6, 2) );

console.log( str.slice(2, 6) );
console.log( str.slice(6, 2) );

Les arguments négatifs ne sont pas supportés (contrairement à slice()), ils sont traités comme 0.
str.substr(start [, length]). Retourne la partie de la chaîne de start, avec le donné length.

Contrairement aux méthodes précédentes, celle-ci nous permet de spécifier la longueur de la chaine finale au
lieu de la position:
var str = "stringify";
console.log( str.substr(2, 4) );
Le premier argument peut être négatif, compter à partir de la fin:
var str = "stringify";
console.log( str.substr(-4, 2) );
Comme nous l'avons vu dans le chapitre des opérateurs conditionnels. Les chaînes sont comparées caractère
par caractère dans l'ordre alphabétique.
1. Une lettre minuscule est toujours supérieure à la majuscule:
//''<0..9<[A-Z]<[a-z]
console.log( ''<'0' ); // true
console.log( '0'<'A' ); // true
console.log( 'A'<'a' ); // true

 Il existe 3 types de citations. Les quotes croisés permettent à une chaîne de s'étendre sur plusieurs lignes et
d'intégrer des expressions.
 Les chaînes en JavaScript sont codées en UTF-16.
 Nous pouvons utiliser des caractères spéciaux tels que \n et insérer des lettres en utilisant leur unicode \uxxxx.
 Pour obtenir un caractère, utilisez: [].
 Pour obtenir une sous-chaîne, utilisez: slice() , subString() ou subStr()
 Pour en minuscules / majuscules une chaîne, utilisez: toLowerCase()/toUpperCase().
 Pour rechercher une sous-chaîne, utilisez:, indexOf() ou includes()/startsWith()/endsWith() pour de simples
vérifications.
Il existe plusieurs autres méthodes utiles dans les chaînes:
 str.trim() - supprime les espaces du début et de la fin de la chaîne.
 str.repeat(n) - répète les n fois la chaîne dans str.
 …et plus. Voir le manuel pour plus de détails.
Les chaînes ont aussi des méthodes pour rechercher / remplacer avec des expressions régulières. Mais ce
sujet mérite un chapitre séparé, nous y reviendrons plus tard.

Les objets vous permettent de stocker des collections de valeurs à clé. C'est très bien. Mais assez souvent, nous
trouvons qu'il nous faut une collection ordonnée , où nous avons un 1er, un 2ème, un 3ème élément, etc. Par
exemple, nous avons besoin de cela pour stocker une liste de quelque chose: utilisateurs, biens, éléments
HTML, etc.
Il n'est pas pratique d'utiliser un objet, car il ne fournit aucune méthode pour gérer l'ordre des éléments. Nous
ne pouvons pas insérer une nouvelle propriété "entre" celles existantes. Les objets ne sont tout simplement pas
destinés à un tel usage.
Il existe une structure de données spéciale nommée Array pour stocker les collections ordonnées.
Il existe deux syntaxes pour créer un tableau vide:
var arr = new Array();
var arr = [];
Presque tout le temps, la deuxième syntaxe est utilisée. Nous pouvons fournir les éléments initiaux entre
parenthèses:

var fruits = ["Apple", "Orange", "Plum"];


Les éléments de tableau sont numérotés, en commençant par zéro.On peut obtenir un élément par son numéro
entre crochets:

var fruits = ["Apple", "Orange", "Plum"];


console.log( fruits[0] ); // Apple
console.log( fruits[1] ); // Orange
console.log( fruits[2] ); // Plum
console.log(fruits);
console.table(fruits);

Nous pouvons remplacer un élément:


var fruits = ["Apple", "Orange", "Plum"];
console.log(fruits);
fruits[2] = 'Pear'; // now ["Apple", "Orange", "Pear"]
console.log(fruits);

… Ou en ajouter un nouveau au tableau:


var fruits = ["Apple", "Orange", "Plum"];
console.log(fruits);
fruits[3] = 'Lemon';
console.log(fruits);
Le nombre total d'éléments dans le tableau est le suivant length:

var fruits = ["Apple", "Orange", "Plum"];


console.log(fruits.length);//3
Un tableau peut stocker des éléments de tout type.

var arr = [ 'Apple', { nom: 'John' }, true, function() { console.log('Bonjour'); } ];


console.log( arr );
console.log( arr[1].name ); // John
arr[3](); // Bonjour

Un tableau, comme un objet, peut se terminer par une virgule:

var fruits = [
"Apple",
"Orange",
"Plum",
];
Le style «virgule finale» facilite l'insertion / la suppression d'éléments, car toutes les lignes se ressemblent.

Une file d'attente est l'une des utilisations les plus courantes d'un tableau. En informatique, cela signifie une
collection ordonnée d’éléments qui supporte deux opérations:
 push ajoute un élément à la fin.
 shift obtenir un élément depuis le début, en faisant avancer la file d'attente, de sorte que le deuxième élément
devienne le premier.
Les tableaux prennent en charge les deux opérations. En pratique, nous le rencontrons très souvent. Par
exemple, une file d'attente de messages devant être affichés à l'écran. Il existe un autre cas d'utilisation pour
les tableaux: la structure de données nommée stack .
Il supporte deux opérations:
 push ajoute un élément à la fin.
 pop prend un élément de la fin.
Ainsi, de nouveaux éléments sont ajoutés ou pris toujours à la "fin".
Une pile est généralement illustrée par un jeu de cartes: de nouvelles cartes sont ajoutées en haut ou prises en
haut:

Pour les piles, le dernier élément envoyé est reçu en premier, c'est le principe LIFO (dernier entré, premier
sorti). Pour les files d'attente, nous avons FIFO (First-In-First-Out).
Les tableaux en JavaScript peuvent fonctionner à la fois en file d'attente et en pile. Ils vous permettent
d'ajouter / supprimer des éléments à la fois du début ou de la fin.
En informatique, la structure de données qui le permet s'appelle deque .
Méthodes qui fonctionnent avec la fin du tableau:

Pop()

Extrait le dernier élément du tableau et le renvoie:


var fruits = ["Apple", "Orange", "Pear"];
console.log( fruits );
console.log( fruits.pop() );
console.log( fruits );

Push()

Ajoutez l'élément à la fin du tableau:


var fruits = ["Apple", "Orange"];
console.log( fruits );
fruits.push("Pear");
console.log( fruits );

L'appel fruits.push(...) est égal à fruits[fruits.length] = ....

Méthodes qui fonctionnent avec le début du tableau:

Shift()
Extrait le premier élément du tableau et le renvoie:
var fruits = ["Apple", "Orange", "Pear"];
console.log( fruits );
console.log( fruits.shift() );
console.log( fruits );

Unshift()
Ajoutez l'élément au début du tableau:
var fruits = ["Orange", "Pear"];
console.log( fruits );
fruits.unshift('Apple');
console.log( fruits );

Méthodes push() et unshift() peuvent ajouter plusieurs éléments à la fois:

var fruits = ["Apple"];


console.log( fruits );
fruits.push("Orange", "Peach");
fruits.unshift("Pineapple", "Lemon");
console.log( fruits );
Un tableau est un type d'objet spécial. Les crochets utilisés pour accéder à une propriété arr[0] proviennent en
réalité de la syntaxe de l'objet. Les chiffres sont utilisés comme clés.
Ils étendent des objets en fournissant des méthodes spéciales pour travailler avec des collections ordonnées de
données et également la propriété length. Mais au fond c'est toujours un objet.
N'oubliez pas qu'il n'y a que 7 types de base en JavaScript. Un tableau est un objet et se comporte donc comme
un objet.
Par exemple, il est copié par référence:
var fruits = ["Banana"];
console.log( fruits );
var arr = fruits;
console.log( arr === fruits ); // true
arr.push("Pear");
console.log( fruits );

… Mais ce qui rend les tableaux vraiment spéciaux, c'est leur représentation interne. Le moteur tente de
stocker ses éléments dans la zone de mémoire contiguë, l'un après l'autre, comme indiqué sur les illustrations
de ce chapitre. Il existe également d'autres optimisations permettant de faire fonctionner les tableaux très
rapidement.
Mais ils se cassent tous si nous cessons de travailler avec un tableau comme avec une «collection ordonnée»
et commençons à le travailler comme s'il s'agissait d'un objet normal.
Par exemple, techniquement, nous pouvons le faire:
var fruits = [];
console.log( fruits );
fruits[99999] = 5;
console.log( fruits );
fruits.age = 25;
console.log( fruits );

C'est possible, car les tableaux sont des objets à leur base. Nous pouvons leur ajouter des propriétés.
Mais le moteur verra que nous travaillons avec le tableau comme avec un objet normal. Les optimisations
spécifiques aux tableaux ne sont pas adaptées à ce type de situation et seront désactivées. Leurs avantages
disparaissent.
Les moyens d'abuser d'un tableau:
 Ajouter une propriété non numérique comme arr.test = 5.
 Faites des trous, comme: ajoutez arr[0] puis arr[1000] (et rien entre eux).
 Remplissez le tableau dans l'ordre inverse, comme arr[1000], arr[999] etc.
Veuillez considérer les tableaux comme des structures spéciales pour travailler avec les données
ordonnées . Ils fournissent des méthodes spéciales pour cela. Les tableaux sont soigneusement réglés dans les
moteurs JavaScript pour fonctionner avec des données ordonnées contiguës, veuillez les utiliser de cette
manière. Et si vous avez besoin de clés arbitraires, il y a de fortes chances que vous ayez besoin d'un objet
régulier {}.

Les méthodes push()/pop() fonctionnent vite, alors shift()/unshift() sont lentes.

Pourquoi est-il plus rapide de travailler avec la fin d'un tableau qu'avec son début? Voyons ce qui se passe
pendant l'exécution:
fruits.shift();

Il ne suffit pas de prendre et de supprimer l'élément avec le numéro 0. D'autres éléments doivent également
être renumérotés.
L’opération shift() doit faire 3 choses:
1. Supprimez l'élément avec l'index 0.
2. Déplacez tous les éléments à gauche, renumérotez-les de l'index 1à 0, de 2à 1 et ainsi de suite.
3. Mettre à jour la propriété length.
Plus il y a d'éléments dans le tableau, plus il y a de temps pour les déplacer, plus il y a d'opérations en
mémoire.

La même chose se produit avec unshift(): pour ajouter un élément au début du tableau, nous devons d’abord
déplacer les éléments existants vers la droite, en augmentant leur index.
Et avec push()/pop()? Ils n'ont pas besoin de déplacer quoi que ce soit. Pour extraire un élément de la fin, la
méthode pop() nettoie l'index et le raccourcit length.
Les actions pour l'opération pop():
fruits.pop();

La méthode pop() n'a pas besoin de déplacer quoi que ce soit, car les autres éléments conservent leurs
index. C'est pourquoi c'est extrêmement rapide.

La même chose avec la méthode push().

L'une des méthodes les plus anciennes de cycle des éléments de tableau est la boucle for sur les index:
var arr = ["Apple", "Orange", "Pear"];
console.log(arr);
for (var i = 0; i < arr.length; i++) {
console.log( arr[i] );
}
Mais pour les tableaux, il existe une autre forme de boucle for..of:
var fruits = ["Apple", "Orange", "Plum"];
console.log(arr);
for (var fruit of fruits) {
console.log( fruit );
}

Le for..of ne donne pas accès au numéro de l'élément actuel, mais à sa valeur, mais dans la plupart des cas,
cela suffit. Et c'est plus court.
Techniquement, les tableaux étant des objets, il est également possible d'utiliser for..in:
var arr = ["Apple", "Orange", "Pear"];
console.log(arr);
for (var key in arr) {
console.log( arr[key] );
}

Mais c'est en fait une mauvaise idée. Il y a des problèmes potentiels avec cela:
1. La boucle for..in parcourt toutes les propriétés , pas seulement les propriétés numériques.
Dans le navigateur et dans d'autres environnements, il existe des objets dits «de type tableau» qui ressemblent
à des tableaux . Autrement dit, ils ont des propriétés length et des propriétés d'index, mais ils peuvent
également avoir d'autres propriétés et méthodes non numériques, dont nous n'avons généralement pas
besoin. La boucle for..in les listera cependant. Donc, si nous devons travailler avec des objets de type
tableau, ces propriétés «supplémentaires» peuvent devenir un problème.
2. La boucle for..in est optimisée pour les objets génériques, pas les tableaux, et est donc 10 à 100 fois plus
lente. Bien sûr, c'est encore très rapide.
Généralement, nous ne devrions pas utiliser for..in pour les tableaux.

La propriété length est automatiquement mise à jour lorsque nous modifions le tableau. Pour être précis, il ne
s'agit pas du nombre de valeurs du tableau, mais du plus grand index numérique plus un.
Par exemple, un seul élément avec un grand index donne une grande longueur:
var fruits = [];
fruits[25] = "Apple";
console.log( fruits );
console.log( fruits.length ); // 126

Notez que nous n'utilisons généralement pas de tableaux de ce type. Une autre chose intéressante à propos de
la propriété length est qu'il est accessible en écriture.
Si nous l'augmentons manuellement, rien d'intéressant ne se produit. Mais si nous le diminuons, le tableau est
tronqué. Le processus est irréversible, voici l'exemple:
let arr = [1, 2, 3, 4, 5];
console.log( arr );
arr.length = 2;
console.log( arr );

arr.length = 5;
console.log( arr[3] );
console.log( arr );

Ainsi, la façon la plus simple pour effacer le tableau est le suivant : arr.length = 0;

Il y a une syntaxe supplémentaire pour créer un tableau:


var arr = new Array("Apple", "Pear", "etc");
console.log( arr );
Il est rarement utilisé car les crochets [] sont plus courts. En outre, il comporte une caractéristique délicate.
Si new Array() est appelé avec un seul argument qui est un nombre, il crée un tableau sans éléments, mais
avec la longueur donnée .
var arr = new Array(2);
console.log( arr );
console.log( arr[0] );
console.log( arr.length );

Dans le code ci-dessus, new Array(number) a tous les éléments undefined.


Pour éviter de telles surprises, nous utilisons généralement des crochets, sauf si nous savons vraiment ce que
nous faisons.

Les tableaux peuvent avoir des éléments qui sont aussi des tableaux. On peut l'utiliser pour des tableaux
multidimensionnels, pour stocker des matrices:
var matrice = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
console.log( matrice );
console.log( matrice[1][1] );

Les tableaux ont leur propre implémentation de la méthode String() qui renvoie une liste d'éléments séparés
par des virgules.
Par exemple:
var arr = [1, 2, 3];

console.log( arr ); // 1,2,3


console.log( String(arr) === '1,2,3' ); // true
Array est un type d’objet spécial, adapté au stockage et à la gestion des données ordonnées.

 La déclaration:
var arr = [item1, item2...];
var arr = new Array(item1, item2...);

 L'appel à new Array(number) crée un tableau de longueur donnée, mais sans éléments.
 La propriété length est la longueur du tableau ou, plus précisément, son dernier index numérique plus un. Il
est auto-ajusté par les méthodes de tableau.
 Si nous raccourcissons manuellement length, le tableau est tronqué.
Nous pouvons utiliser un tableau comme un deque avec les opérations suivantes:
 push(...items)ajoute itemsà la fin.
 pop() supprime l'élément de la fin et le renvoie.
 shift() supprime l'élément du début et le retourne.
 unshift(...items) ajoute des éléments au début.
Pour boucler sur les éléments du tableau:
 for (let i=0; i<arr.length; i++) - fonctionne le plus rapidement, compatible ancien navigateur.
 for (let item of arr) - la syntaxe moderne pour les éléments uniquement,
 for (let i in arr) - ne jamais utiliser.
Nous reviendrons sur les tableaux et étudierons davantage de méthodes pour ajouter, supprimer, extraire des
éléments et trier des tableaux dans le chapitre Méthodes de tableaux.

Les tableaux fournissent beaucoup de méthodes. Pour faciliter les choses, dans ce chapitre, ils sont divisés en
groupes.

Ajouter / supprimer des éléments


Nous connaissons déjà des méthodes qui ajoutent et suppriment des éléments du début ou de la fin:
arr.push(...items) - ajoute des articles à la fin,
arr.pop() - extrait un objet de la fin,
arr.shift() - extrait un élément du début,
arr.unshift(...items) - ajoute des éléments au début.
Voici quelques autres.
Comment supprimer un élément du tableau? Les tableaux sont des objets, nous pouvons donc essayer
d'utiliser delete:
var arr = ["I", "go", "home"];
console.log( arr );
delete arr[1]; // supprime "go"
console.log( arr[1] ); // undefined
// Mauntenant arr = ["I", , "home"];
console.log( arr );
console.log( arr.length ); // 3

L'élément a été supprimé, mais le tableau a toujours 3 éléments, nous pouvons le voir arr.length == 3.
C'est naturel, car delete obj.key supprime une valeur par le key. C'est tout ce que ça fait. Parfait pour les
objets. Mais pour les tableaux, nous voulons généralement que le reste des éléments se déplace et occupe la
place libérée. Nous nous attendons à avoir un tableau plus court maintenant.
Donc, des méthodes spéciales doivent être utilisées.
La méthode arr.splice (str) est un couteau suisse pour les tableaux. Il peut tout faire: ajouter, supprimer et
insérer des éléments.

La syntaxe est la suivante:


arr.splice(index[, deleteCount, elem1, ..., elemN])
Il commence à partir de la position index: supprime les éléments deleteCount puis les insère elem1, ...,
elemN à leur place. Renvoie le tableau des éléments supprimés.
Cette méthode est facile à comprendre par des exemples.
Commençons par la suppression:
var arr = ["I", "study", "JavaScript"];
console.log( arr );
arr.splice(0, 2);
console.log( arr );

Dans l'exemple suivant, nous supprimons 3 éléments et les remplaçons par les deux autres:
var arr = ["I", "study", "JavaScript", "right", "now"];
console.log( arr ) ;
arr.splice(0, 3, "Let's", "dance");
console.table( arr ) ;

Nous pouvons voir ici que splice() renvoie le tableau des éléments supprimés:
var arr = ["I", "study", "JavaScript", "right", "now"];
console.log( arr );
var eleSup = arr.splice(0, 2);
console.log( eleSup );

La méthode splice() est également capable d'insérer les éléments sans aucune suppression. Pour cela, nous
devons mettre deleteCount à 0:
var arr = ["I", "study", "JavaScript"];
console.log( arr );
arr.splice(2, 0, "complex", "language");
console.log( arr );

Ici et dans d'autres méthodes de tableau, les index négatifs sont autorisés. Ils spécifient la position à partir de
la fin du tableau, comme ici:

var arr = [1, 2, 5];


console.log( arr );
arr.splice(-1, 0, "3", "4");
console.log( arr );
La méthode arr.slice() est beaucoup plus simple que son similaire arr.splice().La syntaxe est la suivante:
arr.slice(start, end)

Elle retourne un nouveau tableau où il copie tous les éléments index commencent "start"à "end"(non
compris "end"). Les deux start et end peuvent être négatifs, dans ce cas, la position à partir de la fin du
tableau est supposée.
Cela fonctionne comme str.slice(), mais crée des sous-tableaux au lieu de sous-chaînes.
Par exemple:
var str = "test";
var arr = ["t", "e", "s", "t"];

console.log( str.slice(1, 3) );
console.log( arr.slice(1, 3) );

console.log( str.slice(-2) );
console.log( arr.slice(-2) );

La méthode arr.concat() joint le tableau à d'autres tableaux et / ou éléments.


La syntaxe est la suivante:

arr.concat(arg1, arg2...) ;
Il accepte n'importe quel nombre d'arguments - des tableaux ou des valeurs. Le résultat est un nouveau tableau
contenant les éléments de arr, puis arg1, arg2 etc
.Si un argument est un tableau ou une propriété Symbol.isConcatSpreadable, tous ses éléments sont
copiés. Sinon, l'argument lui-même est copié.
Par exemple:
var arr = [1, 2];
console.log(arr);

arr=arr.concat([3, 4])
console.log(arr);
arr=arr.concat([3, 4], [5, 6]);
console.log(arr);

arr=arr.concat([3, 4], 5, 6);


console.log(arr);

Normalement, il ne copie que les éléments des tableaux (les «étale»). Autres objets, même s'ils ressemblent à
des tableaux, ajoutés dans leur ensemble:
var arr = [1, 2];

var arrayObj = {
0: "something",
length: 1
};

console.log( arr.concat(arrayObj) );

… Mais si un objet de type tableau a une propriété Symbol.isConcatSpreadable, ses éléments sont ajoutés à la
place:
var arr = [1, 2];

var arrayObj = {
0: "something",
1: "else",
[Symbol.isConcatSpreadable]: true,
length: 2
};

console.log( arr.concat(arrayObj) );
Ce sont des méthodes pour rechercher quelque chose dans un tableau.

indexOf() / lastIndexOf() et include()


Les méthodes arr.indexOf() , arr.lastIndexOf() et arr.includes() ont la même syntaxe et utilisent
essentiellement la même chose que leurs équivalents de chaîne, mais fonctionnent sur des éléments au lieu de
caractères:
arr.indexOf(item, from) recherche un item à partir de l'index from et renvoie l'index où il a été trouvé, sinon -
1.
arr.lastIndexOf(item, from) - idem, mais regarde de droite à gauche.
arr.includes(item, from)- cherche un item à partir de l'index from, retourne true si trouvé.
Par exemple:

var arr = [1, 0, false];

console.log( arr.indexOf(0) );
console.log( arr.indexOf(false) );
console.log( arr.indexOf(null) );
console.log( arr.includes(1) );

Notez que les méthodes utilisent la comparaison ===. Donc, si nous cherchons false, il trouve
exactement false et non le zéro.Si nous voulons vérifier l'inclusion et ne voulons pas connaître l'index exact,
nous préférons arr.includes().
En outre, une différence très mineure includes est qu'il gère correctement NaN, contrairement
à indexOf()/lastIndexOf():
const arr = [NaN];
console.log( arr.indexOf(NaN) );
console.log( arr.includes(NaN) );

find() and findIndex()


Imaginez que nous avons un tableau d'objets. Comment pouvons-nous trouver un objet avec la condition
spécifique? . Ici, la méthode arr.find() est très pratique.
La syntaxe est la suivante:
var result = arr.find(function(item, index, array) {

});

La fonction est appelée de manière répétitive pour chaque élément du tableau:


 item est l'élément.
 index est son index.
 array est le tableau lui-même.
Si elle revient true, la recherche est arrêtée, le item est retournée. Si rien trouvé, undefined est retourné.
Par exemple, nous avons un tableau d’utilisateurs, chacun avec les champs id et name. Trouvons celui avec id
== 1:
var users = [
{id: 1, name: "John"},
{id: 2, name: "Pete"},
{id: 3, name: "Mary"}
];

var user = users.find(item => item.id == 1);

console.log(user.name); // John

Dans la vie réelle, les tableaux d'objets sont une chose courante, donc la méthode find() est très utile.Notez
que dans l'exemple, nous fournissons find() une fonction à un seul argument item => item.id == 1. D'autres
paramètres de find() sont rarement utilisés.
La méthode arr.findIndex() est essentiellement la même, mais elle retourne l'index où l'élément a été trouvé à
la place de l'élément lui-même.

filter
La méthode find() recherche un seul (premier) élément qui renvoie la fonction true.
S'il peut y en avoir beaucoup, nous pouvons utiliser arr.filter (fn) .
La syntaxe est à peu près la même que find(), mais elle renvoie un tableau d'éléments correspondants:
let results = arr.filter(function(item, index, array) {

});

Par exemple:

var users = [
{id: 1, name: "John"},
{id: 2, name: "Pete"},
{id: 3, name: "Mary"}
];

let someUsers = users.filter(item => item.id < 3);

console.log(someUsers.length); // 2

Cette section concerne les méthodes de transformation ou de réorganisation du tableau.

map()

La méthode arr.map est l’une des plus utiles et des plus utilisées.
La syntaxe est la suivante:
var result = arr.map(function(item, index, array) {

})

Il appelle la fonction pour chaque élément du tableau et renvoie le tableau de résultats. Par exemple, ici nous
transformons chaque élément dans sa longueur:
var lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length)
console.log(lengths);
sort(fn)
La méthode arr.sort() trie le tableau en place .
Par exemple:
var arr = [ 1, 2, 15 ];
console.log("Avant le tri :"+ arr );
arr=arr.sort();
console.log("Apres le tri :"+ arr );

Avez-vous remarqué quelque chose d'étrange dans le résultat?


L'ordre est devenu 1, 15, 2. Incorrect. Mais pourquoi?
Les éléments sont triés en tant que chaînes par défaut.
Littéralement, tous les éléments sont convertis en chaînes, puis comparés. Ainsi, l'ordre lexicographique est
appliqué et en effet "2" > "15".
Pour utiliser notre propre ordre de tri, nous devons fournir une fonction de deux arguments comme argument
de arr.sort().
La fonction devrait fonctionner comme ceci:
function compare(a, b) {
if (a > b) return 1;
if (a == b) return 0;
if (a < b) return -1;
}

Par exemple:
function compareNumeric(a, b) {
if (a > b) return 1;
if (a == b) return 0;
if (a < b) return -1;
}

let arr = [ 1, 15, 2 ];


console.log("Avant le tri :"+arr);
arr.sort(compareNumeric);
console.log("Apres le tri :"+arr);

Maintenant, cela fonctionne comme prévu.


Laissons de côté et pensons ce qui se passe. Le arr peut être un tableau de n'importe quoi, non? Il peut
contenir des nombres ou des chaînes ou des éléments HTML ou autre. Nous avons un ensemble de quelque
chose . Pour le trier, nous avons besoin d’une fonction d’ordre qui sache comparer ses éléments. La valeur par
défaut est un ordre de chaîne.
La méthode arr.sort(fn) a une implémentation intégrée de l'algorithme de tri. Nous n'avons pas besoin de nous
préoccuper de la façon dont cela fonctionne exactement (un tri rapide optimisé la plupart du temps). Il va
parcourir le tableau, comparer ses éléments à l'aide de la fonction fournie et les réorganiser. Tout ce dont nous
avons besoin est de fournir le fn qui effectue la comparaison.
À propos, si nous voulons savoir quels éléments sont comparés, rien n’empêche de les alerter:
[1, -2, 15, 2, 0, 8].sort(function(a, b) {
console.log( a + " <> " + b );
});

L'algorithme peut comparer un élément plusieurs fois dans le processus, mais il essaie de faire le moins de
comparaisons possible.

var arr = [ 1, 2, 15 ];
arr.sort(function(a, b) { return a - b; });
console.log(arr); // 1, 2, 15

arr.sort( (a, b) => a - b );

Cela fonctionne exactement comme l'autre, plus longue, version ci-dessus.

reverse()
La méthode arr.reverse() inverse l'ordre des éléments dans arr.
Par exemple:
var arr = [1, 2, 3, 4, 5];
console.log( arr );
arr.reverse();
console.log( arr );

Il retourne également le tableau arr après l'inversion.

split() and join()

Voici la situation de la vraie vie. Nous écrivons une application de messagerie, et la personne qui entre dans la
liste délimitée par des virgules de récepteurs: John, Pete, Mary. Mais pour nous, un tableau de noms serait
beaucoup plus confortable qu'une simple chaîne. Comment l'obtenir?
La méthode str.split (delim) fait exactement cela. Il divise la chaîne en un tableau par le délimiteur
donné delim.
Dans l'exemple ci-dessous, nous nous séparons par une virgule suivie d'un espace:
var names = 'Bilbo, Gandalf, Nazgul';

var arr = names.split(', ');

for (var name of arr) {


console.log( `Un message à ${name}.` );
};

La méthode split() a un deuxième argument numérique facultatif - une limite sur la longueur du tableau. S'il
est fourni, les éléments supplémentaires sont ignorés. En pratique, il est rarement utilisé cependant:
var arr = 'Bilbo, Gandalf, Nazgul, Saruman'.split(', ', 2);
console.log(arr);

Split() en lettres

L'appel à split(s) avec s vide diviserait la chaîne en un tableau de lettres:


var str = "test";
console.log( str.split('') );
L'appel arr.join (str) fait l'inverse de split. Il crée une chaîne d' éléments arr et str collés entre eux.
Par exemple:
var arr = ['Bilbo', 'Gandalf', 'Nazgul'];
console.log( str );
var str = arr.join(';');
console.log( str );

reduce()/reduceRight()

Lorsque nous devons parcourir un tableau, nous pouvons utiliser forEach.Lorsque nous devons itérer et
renvoyer les données pour chaque élément, nous pouvons utiliser map.
Les méthodes arr.reduce() et arr.reduceRight() appartiennent également à cette race, mais sont un peu plus
complexes. Ils sont utilisés pour calculer une valeur unique basée sur le tableau.
La syntaxe est la suivante:
var value = arr.reduce(function(previousValue, item, index, arr) {
// ...
}, initial);
La fonction est appliquée aux éléments. Vous remarquerez peut-être les arguments familiers, à partir du 2e:
 item - est l'élément actuel du tableau.
 index - est sa position.
 arr - est le tableau.
Jusqu'ici, comme forEach/map. Mais il y a un autre argument:
 previousValue- est le résultat de l'appel de fonction précédent, initial pour le premier appel.
Le moyen le plus simple à comprendre est l'exemple.Ici nous obtenons une somme de tableau sur une ligne:
var arr = [1, 2, 3, 4, 5];
var result = arr.reduce((sum, current) => sum + current, 0);
console.log(result);

Ici, nous avons utilisé la variante la plus commune reduce() qui utilise seulement 2 arguments.
Voyons les détails de ce qui se passe.
1. Lors de la première exécution, sum la valeur initiale (le dernier argument de reduce) est égale à 0et current le
premier élément du tableau est égal à 1. Donc, le résultat est 1.
2. Lors de la deuxième exécution, sum = 1nous y ajoutons le deuxième élément de tableau ( 2) et renvoyons-le.
3. À la 3ème manche, sum = 3nous y ajoutons encore un élément, et ainsi de suite…
Le flux de calcul:

Ou sous la forme d'une table, où chaque ligne représente un appel de fonction sur l'élément de tableau suivant:

Comme on peut le constater, le résultat de l'appel précédent devient le premier argument du suivant.Nous
pouvons également omettre la valeur initiale:
var arr = [1, 2, 3, 4, 5];
var result = arr.reduce((sum, current) => sum + current);
console.log( result );

Le résultat est le même. En effet, s'il n'y a pas d'initiale, reduceprend le premier élément du tableau comme
valeur initiale et lance l'itération à partir du deuxième élément.
Le tableau de calcul est le même que ci-dessus, moins la première ligne.Mais une telle utilisation nécessite un
soin extrême. Si le tableau est vide, alors reduceappeler sans valeur initiale génère une erreur.
Voici un exemple
var arr = [];
// Error: Reduce of empty array with no initial value
// if the initial value existed, reduce would return it for the empty arr.
arr.reduce((sum, current) => sum + current);

Il est donc conseillé de toujours spécifier la valeur initiale.La méthode arr.reduceRight fait la même chose,
mais va de droite à gauche.

Iteration: forEach()

La méthode arr.forEach() permet d'exécuter une fonction pour chaque élément du tableau.
La syntaxe :
arr.forEach(function(item, index, array) {

});

Par exemple, cela montre chaque élément du tableau:


["Bilbo", "Gandalf", "Nazgul"].forEach(console.log);

Et ce code est plus élaboré sur leurs positions dans le tableau cible:
["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => {
console.log(`${item} is at index ${index} in ${array}`);
});

Le résultat de la fonction (s'il en renvoie) est jeté et ignoré.

Array.isArray
Les tableaux ne forment pas un type de langue distinct. Ils sont basés sur des objets.Cela typeof ne vous
aide donc pas à distinguer un objet simple d'un tableau:
console.log(typeof {});
console.log(typeof []);

Mais les tableaux sont utilisés si souvent qu'il existe une méthode spéciale pour cela: Array.isArray
(valeur) . Il retourne true si le value est un tableau, et false sinon.

console.log(Array.isArray({}));
console.log(Array.isArray([]));
La plupart des méthodes supportent “thisArg”

Presque toutes les méthodes de tableau qui appellent des fonctions - comme find(), filter(), map(), à
l'exception notable de sort(), acceptent un paramètre supplémentaire en option thisArg.
Ce paramètre n'est pas expliqué dans les sections ci-dessus, car il est rarement utilisé. Mais pour être complet,
nous devons le couvrir.
Voici la syntaxe complète de ces méthodes:
arr.find(func, thisArg);
arr.filter(func, thisArg);
arr.map(func, thisArg);

La valeur du paramètre thisArg devient this pour func.Par exemple, nous utilisons ici une méthode d'objet en
tant que filtre et thisArg est très pratique:
var user = {
age: 18,
younger(otherUser) {
return otherUser.age < this.age;
}
};

var users = [
{age: 12},
{age: 16},
{age: 32}
];
var youngerUsers = users.filter(user.younger, user);

console.log(youngerUsers.length); // 2

Dans l'appel ci-dessus, nous utilisons user.younger comme filtre et fournissons également le contexte
user. Si nous ne fournissions pas le contexte, users.filter(user.younger) nous appellerions user.younger une
fonction autonome avec this=undefined. Cela signifierait une erreur instantanée.

Ce qu’il faut retenir :

Un tableau de bord des méthodes de tableau:


 Pour ajouter / supprimer des éléments:
o push(...items) - ajoute des articles à la fin,
o pop() - extrait un objet de la fin,
o shift() - extrait un élément du début,
o unshift(...items) - ajoute des éléments au début.
o splice(pos, deleteCount, ...items)- à l'index possupprimer des deleteCountéléments et insérer items.
o slice(start, end)- crée un nouveau tableau, copie les éléments de la position startjusqu'à end(non inclus) dans
celui-ci.
o concat(...items)- renvoie un nouveau tableau: copie tous les membres du groupe actuel et y ajoute des
éléments items. Si l'un de ces éléments itemsest un tableau, ses éléments sont pris.

 Pour rechercher parmi des éléments:


o indexOf/lastIndexOf(item, pos)- cherche à itempartir de la position pos, retourne l'index ou -1s'il n'est pas
trouvé.
o includes(value)- retourne truesi le tableau a value, sinon false.
o find/filter(func)- filtrer les éléments à travers la fonction, retourne en premier / toutes les valeurs qui la font
revenir true.
o findIndex est comme find, mais retourne l'index au lieu d'une valeur.
 Pour transformer le tableau:
o map(func)- crée un nouveau tableau à partir des résultats de l'appel funcde chaque élément.
o sort(func) - trie le tableau sur place, puis le renvoie.
o reverse() - inverse le tableau sur place, puis le renvoie.
o split/join - convertir une chaîne en tableau et en revenir.
o reduce(func, initial)- calculer une valeur unique sur le tableau en appelant funcpour chaque élément et en
transmettant un résultat intermédiaire entre les appels.
 Pour parcourir des éléments:
o forEach(func)- appelle funcpour chaque élément, ne retourne rien.
 Aditionellement:
o Array.isArray(arr) vérifie arr d'être un tableau.
S'il vous plaît noter que les méthodes sort, reverse et splice modifier le tableau lui - même.
Ces méthodes sont les plus utilisées, elles couvrent 99% des cas d'utilisation. Mais il y en a peu d'autres:
 arr.some (fn) / arr.every (fn) vérifie le tableau.
La fonction fnest appelée sur chaque élément du tableau similaire à map. Si tout / tous les résultats sont true,
renvoie true, sinon false.
 arr.fill (valeur, début, fin) - remplit le tableau en répétant valuede index startà end.
 arr.copyWithin (target, start, end) - copie ses éléments de la position startjusqu'à la position enddans elle -
même , à la position target(écrase les éléments existants).
Pour la liste complète, voir le manuel .
.

Vous aimerez peut-être aussi