Javascript – Types

Échapper aux guillemets littéraux dans les chaînes

Lorsque vous définissez une chaîne, vous devez commencer et terminer par un guillemet simple ou double. Que se passe-t-il lorsque vous avez besoin d’un guillemet littéral : "ou 'à l’intérieur de votre chaîne ?

En JavaScript, vous pouvez empêcher un guillemet de le considérer comme un guillemet de fin de chaîne en plaçant une barre oblique inverse ( \) devant le guillemet.

const sampleStr = "Alan said, \"Peter is learning JavaScript\".";

Cela signale à JavaScript que la citation suivante n’est pas la fin de la chaîne, mais doit plutôt apparaître à l’intérieur de la chaîne. Donc, si vous deviez imprimer ceci sur la console, vous obtiendriez :

Alan said, "Peter is learning JavaScript".

Utilisez des barres obliques inverses pour attribuer une chaîne à la myStrvariable afin que si vous deviez l’imprimer sur la console, vous verriez :

I am a "double quoted" string inside "double quotes".

 

Portée globale et fonctions

En JavaScript, la portée fait référence à la visibilité des variables. Les variables définies en dehors d’un bloc fonctionnel ont une portée globale . Cela signifie qu’ils peuvent être vus partout dans votre code JavaScript.

Les variables déclarées sans les mots clés letou constsont automatiquement créées dans la globalportée. Cela peut créer des conséquences inattendues ailleurs dans votre code ou lors de la réexécution d’une fonction. Vous devez toujours déclarer vos variables avec letou const.


À l’ aide letde ou const, déclarez une variable globale nommée myGlobalen dehors de toute fonction. Initialisez-le avec une valeur de 10.

À l’intérieur de la fonction fun1, affectez 5à oopsGlobal sans utiliser les mots-clés letou const.

Portée et fonctions locales

Les variables déclarées dans une fonction, ainsi que les paramètres de la fonction, ont une portée locale . Cela signifie qu’ils ne sont visibles que dans cette fonction.

Voici une fonction myTestavec une variable locale appelée loc.

function myTest() {
  const loc = "foo";
  console.log(loc);
}

myTest();
console.log(loc);

L’ myTest()appel de fonction affichera la chaîne foodans la console. La console.log(loc)ligne (en dehors de la myTestfonction) générera une erreur, car elle locn’est pas définie en dehors de la fonction.


L’éditeur a deux console.logs pour vous aider à voir ce qui se passe. Vérifiez la console pendant que vous codez pour voir comment cela change. Déclarez une variable locale à l’ myVarintérieur myLocalScopeet exécutez les tests.

Remarque : La console affichera toujours ReferenceError: myVar is not defined, mais cela n’entraînera pas l’échec des tests.

Portée globale ou locale dans les fonctions

Il est possible d’avoir des variables locales et globales avec le même nom. Lorsque vous faites cela, la variable locale a priorité sur la variable globale.

Dans cet exemple :

const someVar = "Hat";

function myFun() {
  const someVar = "Head";
  return someVar;
}

La fonction myFunrenverra la chaîne Headcar la version locale de la variable est présente.


Ajoutez une variable locale à la myOutfitfonction pour remplacer la valeur de outerWearpar la chaîne sweater.

Affectation avec une valeur renvoyée

Si vous vous souvenez de notre discussion sur le stockage des valeurs avec l’opérateur d’affectation , tout ce qui se trouve à droite du signe égal est résolu avant que la valeur ne soit affectée. Cela signifie que nous pouvons prendre la valeur de retour d’une fonction et l’affecter à une variable.

Supposons que nous ayons prédéfini une fonction sumqui additionne deux nombres, alors :

ourSum = sum(5, 12);

appellera la sumfonction, qui renvoie une valeur de 17et l’affecte à la ourSumvariable.


Appelez la processArgfonction avec un argument de 7et affectez sa valeur de retour à la variabl

// Setup
let processed = 0;
function processArg(num) {
return (num + 3) / 5;
}
// 

Faire la queue

En informatique, une file d’attente est une structure de données abstraite dans laquelle les éléments sont conservés dans l’ordre. De nouveaux éléments peuvent être ajoutés à l’arrière de la file d’attente et les anciens éléments sont retirés du début de la file d’attente.


Écrivez une fonction nextInLinequi prend un tableau ( arr) et un nombre ( item) comme arguments.

Ajoutez le nombre à la fin du tableau, puis supprimez le premier élément du tableau.

La nextInLinefonction doit alors retourner l’élément qui a été supprimé.

function nextInLine(arr, item) {
// Only change code below this line
 
returnitem;
// Only change code above this line
}
// Setup
const testArr = [1, 2, 3, 4, 5];
// Display code
console.log(“Before: ” + JSON.stringify(testArr));
console.log(nextInLine(testArr, 6));
console.log(“After: ” + JSON.stringify(testArr));

Comparaisons avec l’opérateur logique And

Parfois, vous devrez tester plus d’une chose à la fois. L’ opérateur logique et&& ( ) renvoie truesi et seulement si les opérandes à gauche et à droite sont vrais.

Le même effet pourrait être obtenu en imbriquant une instruction if dans une autre if :

if (num > 5) {
  if (num < 10) {
    return "Yes";
  }
}
return "No";

ne retournera que Yessi numest supérieur à 5et inférieur à 10. La même logique peut s’écrire :

if (num > 5 && num < 10) {
  return "Yes";
}
return "No";

Remplacez les deux instructions if par une seule instruction, à l’aide de l’ &&opérateur, qui renverra la chaîne Yesif valest inférieur ou égal à 50et supérieur ou égal à 25. Sinon, renverra la chaîne No.

function testLogicalAnd(val) {
// Only change code below this line
if (val) {
if (val) {
return”Yes”;
}
}
// Only change code above this line
return”No”;
}
testLogicalAnd(10);

Comparaisons avec l’opérateur logique OU

L’ opérateur logique ou|| ( ) renvoie truesi l’un des opérandes est true. Sinon, ça revient false.

L’ opérateur logique or est composé de deux symboles pipe : ( ||). Cela se trouve généralement entre vos touches Retour arrière et Entrée.

Le modèle ci-dessous devrait vous sembler familier des waypoints précédents :

if (num > 10) {
  return "No";
}
if (num < 5) {
  return "No";
}
return "Yes";

ne retournera Yesque si numest compris entre 5et 10(5 et 10 inclus). La même logique peut s’écrire :

if (num > 10 || num < 5) {
  return "No";
}
return "Yes";

Combinez les deux ifinstructions en une seule instruction qui renvoie la chaîne Outsidesi valn’est pas comprise entre 10et 20, inclus. Sinon, retournez la chaîne Inside.


function testLogicalOr(val) {
// Only change code below this line
if (val) {
return”Outside”;
}
if (val) {
return”Outside”;
}
// Only change code above this line
return”Inside”;
}
testLogicalOr(15);

Data Structures 101 : un tutoriel sur les tableaux en JavaScript

Les structures de données sont une partie importante de la programmation et du codage des entretiens.

Ces compétences démontrent votre capacité à résoudre des problèmes ambigus, à penser de manière complexe et à identifier des modèles dans le code. Les structures de données sont utiles pour organiser les données. Vos programmes seront meilleurs s’ils incluent des structures de données plus propres et plus efficaces .

Les tableaux sont une structure de données importante pour tout développeur de logiciel. Cette façon d’organiser les données nous permet de stocker des éléments à l’aide d’index ou de clés.

Aujourd’hui, nous allons plonger profondément dans les tableaux. À la fin, vous saurez comment créer et utiliser des tableaux dans divers langages de programmation.

Nous couvrirons :

  • Que sont les tableaux ?
  • Comment créer un tableau
  • Utiliser et modifier des tableaux
  • Questions d’entretien courantes pour les tableaux
  • Conclusion et ressources
 

Que sont les tableaux ?

Une structure de données est un moyen d’organiser les données dans un ordinateur, afin qu’elles puissent être utilisées efficacement dans un programme. Un tableau est un type de structure de données que vous pouvez utiliser pour stocker certaines données que vous souhaitez utiliser dans votre programme.

Les tableaux sont une collection de valeurs individuelles séparées par une virgule, chacune avec son propre index/emplacement. Cette collection peut être n’importe quoi : des nombres, des objets, d’autres tableaux, etc. Dans un tableau, les valeurs, appelées éléments , sont stockées dans des emplacements de mémoire contigus.

Cela signifie que tous les éléments sont tous dans une séquence et qu’ils partagent une frontière commune. Le nombre d’éléments stockés dans un tableau est appelé longueur du tableau .

Un tableau est l’un des moyens les plus efficaces de stocker et d’accéder à une séquence de valeurs ou de stocker une collection de données avec des éléments similaires. Les tableaux aident à stocker des données qui seraient autrement difficiles à ranger.

Imaginez que vous avez un magasin de vêtements et que vous devez faire le point sur le nombre d’articles vendus sur dix jours différents. Supposons également que vous ayez besoin d’accéder et de stocker la moyenne et la médiane de ces valeurs. Sans tableaux, vous auriez à créer de nombreuses variables différentes qui prendraient une tonne d’espace et de temps.

Cela pourrait rendre votre code vraiment désordonné à mesure que le nombre de jours augmente. Au lieu de cela, nous pouvons utiliser des tableaux pour stocker et manipuler ces données !

Structure de base des tableaux

L’index d’un élément dans un tableau est utilisé pour identifier son emplacement. Par exemple, si notre tableau contient cinq nombres : 67, 12, 90, 76, 19, 38, 7. L’indice de 67 est 0, et c’est son emplacement dans le tableau.

L’indice de 12 (le deuxième élément) est 1, et ainsi de suite. Les index commencent toujours à zéro et augmentent de un. Prenons un exemple visuel.

L’image ci-dessus montre un tableau des éléments A, B, C et D, et leurs index correspondants. La longueur du tableau serait de quatre puisqu’il y a quatre éléments. Les nombres sous les éléments font référence aux endroits où les lettres existent dans la mémoire de l’ordinateur. Maintenant, regardons un exemple d’un petit tableau de nombres utilisant du code JavaScript.

Ici, vous pouvez voir nos éléments entre parenthèses []. Questionnez-vous : quels seraient les indices de chaque élément ?

var numbers = [67, 12, 90, 76, 19, 28, 7];

Avantages et inconvénients des baies

Chaque structure de données a ses avantages et ses inconvénients en raison de son organisation de base.

Certaines structures de données sont meilleures pour certaines utilisations que d’autres, il est donc important de savoir quels tableaux fonctionnent bien et ce qu’ils ne sont pas les mieux adaptés pour effectuer.

Avantages

  • Stockez des données similaires du même type.
  • Stockez les données lorsque vous connaissez déjà le nombre de tous les éléments
  • Implémentez d’autres structures de données comme des arbres, des listes chaînées , des graphiques , des piles , etc.
  • Stockez les éléments dans différentes dimensions de tableaux : bidimensionnels ou multidimensionnels.
  • Un tableau alloue de la mémoire dans des emplacements de mémoire contigus pour chaque élément. Cela évite les débordements de mémoire.
  • L’itération dans les tableaux s’exécute plus rapidement que dans d’autres structures de données.
  • Un tableau, une fois déclaré, peut être réutilisé plusieurs fois. Cela améliore la lisibilité du code.

Les inconvénients

  • Si vous souhaitez utiliser un tableau, vous devez connaître au préalable le nombre d’éléments que vous souhaitez stocker. Il est impossible d’ajouter de nouvelles valeurs/supplémentaires une fois que vous l’avez déclaré.
  • La mémoire allouée à un tableau lors de la déclaration ne peut pas être augmentée ou diminuée.
  • Allouer plus de mémoire que nécessaire peut gaspiller de l’espace mémoire.
  • Le coût de la suppression et de l’insertion d’éléments est élevé car les éléments d’un tableau sont stockés dans des emplacements de mémoire contigus.
  • Les erreurs s’affichent au moment de l’exécution au lieu de la compilation car un tableau ne vérifie pas les index lors de la compilation.

Utilisations des tableaux

Nous savons maintenant à quoi ressemblent les tableaux et leurs avantages, mais que pouvez-vous réellement faire avec un tableau ? Nous allons jeter un coup d’oeil. Un tableau peut :

  • Copier et cloner des éléments
  • Insérer et supprimer des éléments
  • Rechercher et trier des éléments

Les tableaux vous permettent de conserver plusieurs noms de variables et des données volumineuses avec un seul nom. Cela supprime la confusion liée à l’utilisation de plusieurs variables et améliore la lisibilité du code. Vous pouvez également effectuer différentes opérations matricielles à l’aide de tableaux bidimensionnels et multidimensionnels.

Les tableaux peuvent être utilisés pour trier les éléments de données. Différentes techniques de tri comme le tri à bulles, le tri par insertion et le tri par sélection utilisent des tableaux pour stocker et trier facilement les éléments.

Un tableau peut également être utilisé pour la planification du processeur. Il permet à un processus de votre programme d’utiliser le processeur pendant que l’exécution d’un autre processus est en attente.

Premiers pas avec les tableaux

L’écriture ou la déclaration d’un tableau diffère d’un langage à l’autre, mais une chose que toutes ces différentes variations ont en commun est que le tableau contient toujours une collection de données. Dans cette section, nous verrons comment déclarer un tableau en JavaScript, Java, C++ et Python.

Dans chaque exemple, nous utiliserons les résultats des tests d’un élève du secondaire comme cas d’utilisation. Disons que notre élève Tonia a obtenu respectivement 78, 90, 62, 88, 93 et ​​50 dans six matières.

Pour utiliser un tableau dans un programme, vous devez déclarer une variable pour référencer le tableau, puis créer les éléments de ce tableau.

Maintenant, construisons ce tableau dans différentes langues !

Déclarer un tableau en JavaScript

En JavaScript, la syntaxe pour créer un tableau est :

var array_name = [item1, item2, ...];

Si nous voulons créer un tableau contenant les résultats des tests de Tonia, nous pouvons nommer notre tableau, test_scores et mettre tous les éléments entre crochets comme ceci :

var test_scores = [78, 90, 62, 88, 93, 50];
console.log(my_array)
 
 

Utilisation d’un littéral de tableau et d’un constructeur de tableau

Il est important de noter qu’il existe un autre moyen courant de créer un tableau dans les langages populaires. Vous pouvez soit utiliser un littéral de tableau , comme nous l’avons montré ci-dessus avec une déclaration de tableau en JavaScript, mais nous pouvons utiliser un constructeur de tableau .

Le Array()constructeur est utilisé pour créer des Arrayobjets. Un constructeur est une fonction qui crée une instance d’une classe appelée un object. Avec un constructeur de tableau, nous pouvons avoir plusieurs paramètres.

Pour utiliser un constructeur de tableau, vous déclarez le tableau à l’aide d’une classe intégrée et initialisez vos éléments en les passant entre crochets.

En JavaScript, cela ressemble à ceci :

var testScores = new Array(78, 90, 62, 88, 93, 50);
console.log(testScores);

Peu importe la façon dont vous déclarez un tableau en utilisant les méthodes ci-dessus, cela fonctionne. Si vous console.logutilisez les deux morceaux de code séparément, vous obtiendrez le même tableau.

Pour en savoir plus sur les constructeurs en JavaScript, consultez notre shot EdPresso Qu’est-ce qu’un constructeur en JavaScript ?

Continuez l’apprentissage.

Apprenez les structures de données pour les entretiens de codage JavaScript sans parcourir les vidéos ou la documentation. Les cours textuels d’Educative sont faciles à parcourir et proposent des environnements de codage en direct, ce qui rend l’apprentissage rapide et efficace.

Structures de données pour coder les entretiens en JavaScript

Utiliser et modifier un tableau

Maintenant que nous savons comment créer un tableau, nous devons apprendre à appliquer des opérations et des fonctions pour les rendre utiles pour notre programme. Nous avons les données stockées, mais que faisons-nous ensuite ?

Eh bien, jetons un coup d’œil à certaines des utilisations et modifications courantes des tableaux qui sont appliquées à la plupart des programmes informatiques.

Accéder à une valeur dans un tableau

Si vous souhaitez accéder à un tableau, vous devez d’abord connaître l’emplacement de ce tableau. C’est pourquoi il est important de savoir comment fonctionnent les index.

Par exemple, si nous devons accéder au score de Tonia en informatique (93, le score le plus élevé) et le stocker dans une variable highestScore, nous devons d’abord connaître son emplacement. Si nous comptons à partir de la gauche, en partant de zéro, l’indice de 93 sera 4. Notre code pour cela ressemblerait à ceci :

 
var testScores = [78, 90, 62, 88, 93, 50] ;
var score le plus élevé = testScores[4]
console.log(score le plus élevé);
 
Courir
 
 

Nous obtenons console.logle highestScoreet obtenons en effet 93, qui est à l’index 4. L’accès aux éléments dans les tableaux revient à connaître l’index.

Modifier un tableau

Et si on voulait changer la valeur d’un score ? Supposons que le dernier score a été mal calculé et que Tonia a en fait obtenu un score de 71.

Pour modifier le dernier élément, nous trouvons l’indice de l’élément que nous voulons modifier et le fixons égal à la nouvelle valeur avec laquelle nous voulons l’échanger.

En JavaScript, cela ressemblerait à ceci :

 
var testScores = [78, 90, 62, 88, 93, 50] ;
console.log(testScores[5]);
testScores[5] = 71 ;
console.log(testScores[5]);
 
Courir
 
 

Ici, nous avons constaté que l’index de l’élément que nous devons modifier est 5. Nous le consolerons pour être sûr, puis le définirons pour qu’il soit équivalent à la nouvelle valeur. Maintenant, si vous êtes à console.logla dernière ligne, vous obtiendrez le résultat correct du test 71.

Insertion et suppression de valeurs

Supposons que Tonia ait suivi un cours de comptabilité supplémentaire et que nous voulions ajouter ce score au testScorestableau. Pour insérer un élément, vous pouvez utiliser plusieurs méthodes.

Si vous souhaitez ajouter un nouvel élément à la fin de votre tableau, vous pouvez utiliser la push()méthode. Ajoutons le score de sa Accountingclasse à la fin du tableau.

Vous pouvez le faire en JavaScript comme ceci :

 
var testScores = [78, 90, 62, 88, 93, 50] ;
testScores.push(82)
console.log(testScores);
 
Courir
 
 

Comme nous pouvons le voir, cela ajoute le nouveau score à la fin du tableau et incrémente l’index de 1.

Vous pouvez également ajouter un nouvel élément au début d’un tableau à l’aide de la unshift()méthode. Disons que Tonia a deux autres classes avec des scores de 74 et 58, et nous les voulons en tête de notre tableau. Voyons comment nous ferions cela ci-dessous.

 
var testScores = [78, 90, 62, 88, 93, 50] ;
testScores.unshift(74, 58)
console.log(testScores);
 
Courir
 
 

Disons que nous voulons ajouter un élément au milieu de notre tableau. Pour insérer un nouvel élément n’importe où dans votre tableau, à l’exception du début ou de la fin, vous pouvez utiliser la splice()méthode. En JavaScript, la syntaxe est la suivante :

array.splice(index, howmany, item1 ..., itemX);

Ici, l’index fait référence à l’emplacement où vous souhaitez ajouter ou supprimer des éléments. howmanyfait référence au nombre d’éléments que vous devez supprimer, et il est facultatif. La dernière partie, item1, ..., itemX, définit les nouveaux éléments à ajouter au tableau. Ils sont également facultatifs.

La suppression d’éléments, en revanche, comporte un certain nombre de méthodes que vous pouvez utiliser. Le premier est la pop()méthode. Cette méthode permet de supprimer le dernier élément d’un tableau. Si vous vouliez supprimer le dernier score de test, vous pouvez l’utiliser comme ça avec JavaScript :

 
var testScores = [78, 90, 62, 88, 93, 50] ;
testScores.pop();
console.log(testScores);
 
Courir
 
 

Cette méthode fonctionne en ajoutant pop();à la variable de tableau. Si vous faites console.logcela, vous remarquerez que le dernier élément a disparu. Contrairement à la unshift()méthode, vous pouvez utiliser la shift()méthode pour supprimer le premier élément d’un tableau.

Dans notre exemple ci-dessous, nous supprimerons le premier élément, 78, du tableau des résultats des tests et déplacerons tous les éléments restants vers un indice inférieur. Voici comment cela se passe en JavaScript.

 
var testScores = [78, 90, 62, 88, 93, 50] ;
testScores.shift();
console.log(testScores);
 
Courir
 
 

Passer des tableaux à une fonction

Une fonction est comme une commande ou une action qui manipule nos données. Disons que nous voulons appliquer des commandes à la partition de Tonia.

Si vous souhaitez passer un tableau à une fonction de votre programme, vous pouvez utiliser l’opérateur de propagation. Il s’agit d’une nouvelle fonctionnalité JavaScript que vous pouvez utiliser à la place de apply(). L’opérateur de propagation permet d’accéder aux éléments d’un objet itérable.

Étant donné que les tableaux sont un type d’objet qui peut être parcouru de manière séquentielle, c’est un bon choix ici. Si nous voulions écrire une fonction qui prend les scores de Tonia et leur appliquer une action, nous devons passer le testScorestableau à la fonction en tant que paramètre.

Notre syntaxe ressemblerait à ceci :

ourFunction(s1, s2, s3, s4, s5, s6) {
// do something to her scores here
}

let scores = [78, 90, 62, 88, 93, 50];
ourfunction)...scores);

Ici, nous avons écrit une fonction d’espace réservé qui prendra les six partitions de Tonia et en fera quelque chose. Nous créons une nouvelle variable (un tableau) pour contenir les scores et dans la dernière ligne, et nous passons le tableau à notre fonction.

Imprimer un tableau

Pour imprimer un tableau en JavaScript, vous pouvez utiliser la array.values()fonction intégrée. Cela imprime tous les éléments d’un tableau donné.

Si vous vouliez imprimer tous les éléments du testScorestableau avec lequel nous avons travaillé, cela ressemblerait à ceci :

var testScores = [78, 90, 62, 88, 93, 50];
testScores.values();

Nous savons maintenant comment créer un tableau, le modifier, supprimer des valeurs et appliquer des fonctions à nos données. Bien fait!

Questions d’entretien courantes pour les tableaux

Les questions sur les structures de données sont très courantes pour coder les entretiens. Étant donné que les tableaux sont si populaires dans les programmes informatiques, vous rencontrerez probablement des problèmes de codage concernant les tableaux lors de toute interview de codage.

Voici des questions d’entretien JavaScript courantes pour les tableaux qui démontrent votre maîtrise des tableaux.

  • Trouver la longueur d’un tableau
  • Inverser le tableau en place
  • Trouver les nombres les plus petits et les plus grands
  • Supprimer tous les doublons d’un tableau en place
  • Trouver la longueur de la séquence d’éléments consécutifs la plus longue
  • Supprimer les deux premiers éléments à l’aide de la déstructuration de tableau
  • Écrire une fonction qui détermine si un objet est un tableau
  • Étant donné un tableau de coins, écrivez une fonction pour calculer le nombre de façons dont vous pouvez le faire amounten utilisant ces pièces
  • et plus

Conclusion et ressources

Bien fait! Vous avez maintenant terminé votre tour d’horizon des tableaux Structures de données 101 en JavaScript. Vous êtes sur la bonne voie pour maîtriser l’array. Il reste encore beaucoup à apprendre sur les tableaux, alors continuez à lire, à pratiquer et à suivre des cours pour vous aider dans votre apprentissage. L’une des meilleures façons d’apprendre les structures de données consiste à pratiquer sur le tas.

En travaillant avec des questions ou des projets de codage réels, vous apprendrez rapidement comment fonctionnent les tableaux et comment ils s’intègrent à d’autres structures de données.

Le cours Structures de données pour le codage des entretiens en JavaScript d’Educative est un point de départ idéal. Ce cours contient un examen détaillé de toutes les structures de données courantes et fournit des détails au niveau de la mise en œuvre en JavaScript.

Vous serez bien équipé avec toutes les différentes structures de données qu’ils peuvent exploiter pour écrire un meilleur code !