Tableau 1…N en JavaScript : secrets de vitesse et de performance

Tableau 1…N en JavaScript : du simple au performant

Bonjour, collègue développeur ! Si tu as déjà été confronté à la tâche « créer un tableau de nombres de 1 à N » — tu n'es pas seul. C'est une question tellement populaire sur Stack Overflow qu'elle a rassemblé des milliers de vues et des dizaines de réponses. Il semblerait que quoi de plus simple ? Mais le diable, comme toujours, se cache dans les détails : performance, lisibilité et universalité du code.

Aujourd'hui, nous allons passer en revue toutes les principales méthodes pour créer un tableau [1, 2, 3, ..., N] en JavaScript, les comparer en termes de vitesse, d'élégance et de domaine d'application. Tu découvriras quelle méthode choisir pour un projet classique, et laquelle utiliser quand chaque milliseconde compte. C'est parti !

Pourquoi est-ce important ? Contexte de la tâche

Imagine : tu écris un algorithme de tri, tu génères des données de test, tu crées une grille pour un jeu ou tu veux simplement obtenir rapidement une séquence de nombres. Dans tous ces cas, tu as besoin d'un tableau de 1 à N. Il semblerait qu'une boucle for suffise. Mais le JavaScript moderne offre tellement de sucre syntaxique qu'il est facile de s'y perdre.

Nous allons examiner 5 approches principales, des classiques aux one-liners modernes, et les tester en conditions réelles. Prépare la console du navigateur et ton éditeur préféré — ça va chauffer !

Méthode 1 : La boucle for classique

Une méthode basique mais fiable que tout débutant connaît :

function createArrayLoop(n) {\n  const arr = [];\n  for (let i = 1; i <= n; i++) {\n    arr.push(i);\n  }\n  return arr;\n}\n\nconsole.log(createArrayLoop(5)); // [1, 2, 3, 4, 5]

Avantages :

\n
• Lisibilité maximale — compréhensible même pour ceux qui commencent tout juste à apprendre JS.
\n
• Pas d'appels cachés ni de magie.
\n
• Fonctionne dans tous les environnements, y compris les très anciens navigateurs.
\n

Inconvénients :

\n
• Plus lent que certaines alternatives (mais pas critique pour les petits N).
\n
• Beaucoup de code pour une tâche simple.
\n

Méthode 2 : Array.from() avec fonction map

Une approche moderne et élégante apparue avec ES6 :

const createArrayFrom = n => Array.from({ length: n }, (_, i) => i + 1);\n\nconsole.log(createArrayFrom(5)); // [1, 2, 3, 4, 5]

Ici, nous créons un tableau avec une longueur donnée et le remplissons immédiatement via une fonction map. Le deuxième argument de Array.from est justement une fonction de mapping qui reçoit l'index courant i et retourne i + 1.

Avantages :

\n
• Très concis et expressif.
\n
• Ne nécessite pas de création préalable d'un tableau vide.
\n
• Bonne performance.
\n

Inconvénients :

\n
• Peut être moins évident pour les débutants.
\n
• Crée un objet intermédiaire { length: n }.
\n

Méthode 3 : Opérateur Spread + keys()

Un des one-liners les plus populaires sur Stack Overflow :

const createArraySpread = n => [...Array(n).keys()].map(i => i + 1);\n\nconsole.log(createArraySpread(5)); // [1, 2, 3, 4, 5]

Comment ça marche ? Array(n) crée un tableau creux de n éléments vides. .keys() retourne un itérateur des index (0, 1, 2...). L'opérateur spread le déplie en un tableau normal, puis map décale les valeurs de +1.

Avantages :

\n
• Très concis (un seul appel).
\n
• Semble « magique » — surprend agréablement les collègues lors des revues de code.
\n

Inconvénients :

\n
• Le plus lent de toutes les méthodes pour les grands N (à cause du double passage et de la création de tableaux intermédiaires).
\n
• Plus difficile à comprendre pour les débutants.
\n
• Consomme plus de mémoire.
\n

Méthode 4 : Array.fill() + map()

Une autre variante populaire :

const createArrayFill = n => Array(n).fill().ma