Je recherche des alternatives à la ci-dessous pour créer un tableau JavaScript contenant 1 à N où N n'est connu qu'au moment de l'exécution.

var foo = [];

for (var i = 1; i <= N; i++) {
   foo.push(i);
}

Pour moi, il semble qu'il devrait y avoir un moyen de le faire sans la boucle.

Si j'obtiens ce que vous recherchez, vous voulez un tableau de chiffres 1..nque vous pourrez ensuite parcourir.

Si c'est tout ce dont vous avez besoin, pouvez-vous le faire à la place?

var foo = new Array(45); // create an empty array with length 45

puis quand vous voulez l'utiliser ... (non optimisé, juste par exemple)

for(var i = 0; i < foo.length; i++){
  document.write('Item: ' + (i + 1) + ' of ' + foo.length + '<br/>'); 
}

Par exemple, si vous n'avez pas besoin de stocker quoi que ce soit dans le tableau, vous avez juste besoin d'un conteneur de la bonne longueur sur lequel vous pouvez itérer ... cela pourrait être plus facile.

Voyez-le en action ici: http://jsfiddle.net/3kcvm/

Dans ES6, utilisez les méthodes Array from () et keys () .

Array.from(Array(10).keys())
//=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Version plus courte utilisant l' opérateur d'étalement .

[...Array(10).keys()]
//=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Vous pouvez le faire:

var N = 10; 
Array.apply(null, {length: N}).map(Number.call, Number)

résultat: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

ou avec des valeurs aléatoires:

Array.apply(null, {length: N}).map(Function.call, Math.random)

résultat: [0.7082694901619107, 0.9572225909214467, 0.8586748542729765, 0.8653848143294454, 0.008339877473190427, 0.9911756622605026, 0.8133423360995948, 0.8377588465809822, 0.5577575915958745, 0.16

Explication

Tout d'abord, notez que Number.call(undefined, N)c'est équivalent à Number(N), qui revient juste N. Nous utiliserons ce fait plus tard.

Array.apply(null, [undefined, undefined, undefined])est équivalent à Array(undefined, undefined, undefined), ce qui produit un tableau à trois éléments et attribue undefinedà chaque élément.

Comment pouvez-vous généraliser cela à N éléments? Considérez comment cela Array()fonctionne, ce qui ressemble à ceci:

function Array() {
    if ( arguments.length == 1 &&
         'number' === typeof arguments[0] &&
         arguments[0] >= 0 && arguments &&
         arguments[0] < 1 << 32 ) {
        return [ … ];  // array of length arguments[0], generated by native code
    }
    var a = [];
    for (var i = 0; i < arguments.length; i++) {
        a.push(arguments[i]);
    }
    return a;
}

Depuis ECMAScript 5 , Function.prototype.apply(thisArg, argsArray)accepte également un objet de type tableau de type canard comme deuxième paramètre. Si nous invoquons Array.apply(null, { length: N }), il s'exécutera

function Array() {
    var a = [];
    for (var i = 0; i < /* arguments.length = */ N; i++) {
        a.push(/* arguments[i] = */ undefined);
    }
    return a;
}

Nous avons maintenant un tableau à N éléments, chaque élément étant défini sur undefined. Lorsque nous l'appellerons .map(callback, thisArg), chaque élément sera mis au résultat de callback.call(thisArg, element, index, array). Par conséquent, [undefined, undefined, …, undefined].map(Number.call, Number)mapperait chaque élément à (Number.call).call(Number, undefined, index, array), ce qui est le même que Number.call(undefined, index, array), qui, comme nous l'avons observé précédemment, est évalué àindex . Cela complète le tableau dont les éléments sont les mêmes que leur index.

Pourquoi passer par la peine de Array.apply(null, {length: N})au lieu de juste Array(N)? Après tout, les deux expressions résulteraient en un tableau d'éléments N non définis. La différence est que dans la première expression, chaque élément est explicitement défini sur indéfini, tandis que dans la seconde, chaque élément n'a jamais été défini. Selon la documentation de .map():

callbackest invoqué uniquement pour les index du tableau auxquels des valeurs ont été attribuées; il n'est pas appelé pour les index qui ont été supprimés ou auxquels aucune valeur n'a été affectée.

Par conséquent, Array(N)est insuffisant; Array(N).map(Number.call, Number)entraînerait un tableau non initialisé de longueur N .

Compatibilité

Étant donné que cette technique repose sur le comportement Function.prototype.apply()spécifié dans ECMAScript 5, elle ne fonctionnera pas dans les navigateurs pré-ECMAScript 5 tels que Chrome 14 et Internet Explorer 9.

Plusieurs façons d'utiliser ES6

Utilisation de l'opérateur d'étalement ( ...) et de la méthode des clés

[ ...Array(N).keys() ].map( i => i+1);

Remplir / mapper

Array(N).fill().map((_, i) => i+1);

Array.from

Array.from(Array(N), (_, i) => i+1)

Array.from et { length: N }pirater

Array.from({ length: N }, (_, i) => i+1)

Remarque sur le formulaire généralisé

Toutes les formes ci - dessus peuvent produire des tableaux initialisés à des valeurs à peu près tous souhaités en changeant i+1l'expression nécessaire (par exemple i*2, -i, 1+i*2, i%2et etc.). Si l'expression peut être exprimée par une fonction, fla première forme devient simplement

[ ...Array(N).keys() ].map(f)

Exemples:

Array.from({length: 5}, (v, k) => k+1); 
// [1,2,3,4,5]

Puisque le tableau est initialisé avec undefinedsur chaque position, la valeur dev seraundefined

Exemple présentant tous les formulaires

let demo= (N) => {
  console.log(
    [ ...Array(N).keys() ].map(( i) => i+1),
    Array(N).fill().map((_, i) => i+1) ,
    Array.from(Array(N), (_, i) => i+1),
    Array.from({ length: N }, (_, i) => i+1)
  )
}

demo(5)

Exemple plus générique avec fonction d'initialisation personnalisée, par fex.

[ ...Array(N).keys() ].map((i) => f(i))

ou encore plus simple

[ ...Array(N).keys() ].map(f)

let demo= (N,f) => {
  console.log(
    [ ...Array(N).keys() ].map(f),
    Array(N).fill().map((_, i) => f(i)) ,
    Array.from(Array(N), (_, i) => f(i)),
    Array.from({ length: N }, (_, i) => f(i))
  )
}

demo(5, i=>2*i+1)

Les tableaux gèrent de manière innée leurs longueurs. Lorsqu'ils sont parcourus, leurs index peuvent être conservés en mémoire et référencés à ce point. Si un indice aléatoire doit être connu, leindexOf méthode peut être utilisée.

Cela dit, pour vos besoins, vous pouvez simplement déclarer un tableau d'une certaine taille:

var foo = new Array(N);   // where N is a positive integer

/* this will create an array of size, N, primarily for memory allocation, 
   but does not create any defined values

   foo.length                                // size of Array
   foo[ Math.floor(foo.length/2) ] = 'value' // places value in the middle of the array
*/

ES6

Propagé

L'utilisation de l'opérateur ...et de la keysméthode spread ( ) vous permet de créer un tableau temporaire de taille N pour produire les index, puis un nouveau tableau qui peut être affecté à votre variable:

var foo = [ ...Array(N).keys() ];

Remplir / mapper

Vous pouvez d'abord créer la taille du tableau dont vous avez besoin, le remplir avec undefined puis créer un nouveau tableau à l'aide de map, qui définit chaque élément sur l'index.

var foo = Array(N).fill().map((v,i)=>i);

Array.from

Cela devrait être l'initialisation à la longueur de taille N et remplir le tableau en un seul passage.

Array.from({ length: N }, (v, i) => i)

Au lieu des commentaires et de la confusion, si vous vouliez vraiment capturer les valeurs de 1..N dans les exemples ci-dessus, il y a quelques options:

1. si l'index est disponible, vous pouvez simplement l'incrémenter d'une unité (par exemple, ++i ).

2. dans les cas où l'index n'est pas utilisé - et peut-être une manière plus efficace - consiste à créer votre tableau mais à faire N représenter N + 1, puis à décaler le front.

   Donc, si vous désirez 100 numéros:

   let arr; (arr=[ ...Array(101).keys() ]).shift()

Dans ES6, vous pouvez faire:

Array(N).fill().map((e,i)=>i+1);

http://jsbin.com/molabiluwa/edit?js,console

Edit: Changé Array(45)pour Array(N)depuis que vous avez mis à jour la question.

console.log(
  Array(45).fill(0).map((e,i)=>i+1)
);

Utilisez la méthode Underscore _.range très populaire

// _.range([start], stop, [step])

_.range(10); // => [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
_.range(1, 11); // => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
_.range(0, 30, 5); // => [0, 5, 10, 15, 20, 25]
_.range(0, -10, -1); //  => [0, -1, -2, -3, -4, -5, -6, -7, -8, -9]
_.range(0); // => []

function range(start, end) {
    var foo = [];
    for (var i = start; i <= end; i++) {
        foo.push(i);
    }
    return foo;
}

Puis appelé par

var foo = range(1, 5);

Il n'y a pas de méthode intégrée pour le faire en Javascript, mais c'est une fonction utilitaire parfaitement valide à créer si vous devez le faire plus d'une fois.

Edit: À mon avis, ce qui suit est une meilleure fonction de gamme. Peut-être juste parce que je suis biaisé par LINQ, mais je pense que c'est plus utile dans plus de cas. Votre kilométrage peut varier.

function range(start, count) {
    if(arguments.length == 1) {
        count = start;
        start = 0;
    }

    var foo = [];
    for (var i = 0; i < count; i++) {
        foo.push(start + i);
    }
    return foo;
}

le moyen le plus rapide de remplir une Arrayv8 est:

[...Array(5)].map((_,i) => i);

le résultat sera: [0, 1, 2, 3, 4]

Cette question a beaucoup de réponses compliquées, mais une simple ligne:

[...Array(255).keys()].map(x => x + 1)

De plus, bien que ce qui précède soit court (et soigné) à écrire, je pense que ce qui suit est un peu plus rapide (pour une longueur maximale de:

127, Int8,

255, Uint8,

32 767, Int16,

65,535, Uint16,

2.147.483.647, Int32,

4 294 967 295, Uint32.

(basé sur les valeurs entières max ), voici aussi plus sur les tableaux typés ):

(new Uint8Array(255)).map(($,i) => i + 1);

Bien que cette solution ne soit pas aussi idéale, car elle crée deux tableaux et utilise la déclaration de variable supplémentaire "$" (je ne sais pas comment contourner cela en utilisant cette méthode). Je pense que la solution suivante est le moyen le plus rapide possible de le faire:

for(var i = 0, arr = new Uint8Array(255); i < arr.length; i++) arr[i] = i + 1;

À tout moment après cette instruction, vous pouvez simplement utiliser la variable "arr" dans la portée actuelle;

Si vous voulez en faire une fonction simple (avec quelques vérifications de base):

function range(min, max) {
    min = min && min.constructor == Number ? min : 0;
    !(max && max.constructor == Number && max > min) && // boolean statements can also be used with void return types, like a one-line if statement.
        ((max = min) & (min = 0));  //if there is a "max" argument specified, then first check if its a number and if its graeter than min: if so, stay the same; if not, then consider it as if there is no "max" in the first place, and "max" becomes "min" (and min becomes 0 by default)

    for(var i = 0, arr = new (
        max < 128 ? Int8Array : 
        max < 256 ? Uint8Array :
        max < 32768 ? Int16Array : 
        max < 65536 ? Uint16Array :
        max < 2147483648 ? Int32Array :
        max < 4294967296 ? Uint32Array : 
        Array
    )(max - min); i < arr.length; i++) arr[i] = i + min;
    return arr;
}



//and you can loop through it easily using array methods if you want
range(1,11).forEach(x => console.log(x));

//or if you're used to pythons `for...in` you can do a similar thing with `for...of` if you want the individual values:
for(i of range(2020,2025)) console.log(i);

//or if you really want to use `for..in`, you can, but then you will only be accessing the keys:

for(k in range(25,30)) console.log(k);

console.log(
    range(1,128).constructor.name,
    range(200).constructor.name,
    range(400,900).constructor.name,
    range(33333).constructor.name,
    range(823, 100000).constructor.name,
    range(10,4) // when the "min" argument is greater than the "max", then it just considers it as if there is no "max", and the new max becomes "min", and "min" becomes 0, as if "max" was never even written
);

ainsi, avec la fonction ci-dessus, le "simple one-liner" super-lent ci-dessus devient le super-rapide, encore plus court:

range(1,14000);

Vous pouvez utiliser ceci:

new Array(/*any number which you want*/)
    .join().split(',')
    .map(function(item, index){ return ++index;})

par exemple

new Array(10)
    .join().split(',')
    .map(function(item, index){ return ++index;})

créera le tableau suivant:

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

ES6, cela fera l'affaire:

[...Array(12).keys()]

Découvrez le résultat:

[...Array(12).keys()].map(number => console.log(number))

Si vous utilisez d3.js dans votre application comme je le suis, D3 fournit une fonction d'assistance qui le fait pour vous.

Donc, pour obtenir un tableau de 0 à 4, c'est aussi simple que:

d3.range(5)
[0, 1, 2, 3, 4]

et pour obtenir un tableau de 1 à 5, comme vous le demandiez:

d3.range(1, 5+1)
[1, 2, 3, 4, 5]

Consultez ce tutoriel pour plus d'informations.

Utilisation de l'opérateur d'étalement ES2015 / ES6

[...Array(10)].map((_, i) => i + 1)

console.log([...Array(10)].map((_, i) => i + 1))

C'est probablement le moyen le plus rapide pour générer un tableau de nombres

Le plus court

var a=[],b=N;while(b--)a[b]=b+1;

En ligne

var arr=(function(a,b){while(a--)b[a]=a;return b})(10,[]);
//arr=[0,1,2,3,4,5,6,7,8,9]

Si vous voulez partir de 1

var arr=(function(a,b){while(a--)b[a]=a+1;return b})(10,[]);
//arr=[1,2,3,4,5,6,7,8,9,10]

Vous voulez une fonction?

function range(a,b,c){c=[];while(a--)c[a]=a+b;return c}; //length,start,placeholder
var arr=range(10,5);
//arr=[5,6,7,8,9,10,11,12,13,14]

POURQUOI?

1. while est la boucle la plus rapide

2. Le réglage direct est plus rapide que push

3. [] est plus rapide que new Array(10)

4. c'est court ... regardez le premier code. puis regardez toutes les autres fonctions ici.

Si vous aimez ne peut pas vivre sans pour

for(var a=[],b=7;b>0;a[--b]=b+1); //a=[1,2,3,4,5,6,7]

ou

for(var a=[],b=7;b--;a[b]=b+1); //a=[1,2,3,4,5,6,7]

Si vous utilisez lodash, vous pouvez utiliser _.range :

_.range([start=0], end, [step=1])

Crée un tableau de nombres (positifs et / ou négatifs) progressant du début à la fin, mais sans les inclure. Une étape de -1 est utilisée si un début négatif est spécifié sans fin ni étape. Si end n'est pas spécifié, il est défini pour commencer par start puis défini sur 0.

Exemples:

_.range(4);
// ➜ [0, 1, 2, 3]

_.range(-4);
// ➜ [0, -1, -2, -3]

_.range(1, 5);
// ➜ [1, 2, 3, 4]

_.range(0, 20, 5);
// ➜ [0, 5, 10, 15]

_.range(0, -4, -1);
// ➜ [0, -1, -2, -3]

_.range(1, 4, 0);
// ➜ [1, 1, 1]

_.range(0);
// ➜ []

la nouvelle façon de remplir Arrayest:

const array = [...Array(5).keys()]
console.log(array)

le résultat sera: [0, 1, 2, 3, 4]

avec ES6 vous pouvez faire:

// `n` is the size you want to initialize your array
// `null` is what the array will be filled with (can be any other value)
Array(n).fill(null)

Rapport de synthèse final .. Drrruummm Rolll -

Il s'agit du code le plus court pour générer un tableau de taille N (ici 10) sans utiliser ES6 . La version ci-dessus de Cocco est proche mais pas la plus courte.

(function(n){for(a=[];n--;a[n]=n+1);return a})(10)

Mais le vainqueur incontesté de ce golf Code (compétition pour résoudre un problème particulier dans le moins d'octets de code source) est Niko Ruotsalainen . Utilisation de Array Constructor et de l' opérateur d'étalement ES6 . (La plupart de la syntaxe ES6 est du typeScript valide, mais ce n'est pas le cas. Soyez donc judicieux lorsque vous l'utilisez)

[...Array(10).keys()]

Il y a une autre façon dans ES6, en utilisant Array.from qui prend 2 arguments, le premier est un arrayLike (dans ce cas un objet avec lengthpropriété), et le second est une fonction de mappage (dans ce cas, nous mappons l'élément à son index)

Array.from({length:10}, (v,i) => i)

c'est plus court et peut être utilisé pour d'autres séquences comme la génération de nombres pairs

Array.from({length:10}, (v,i) => i*2)

Cela a également de meilleures performances que la plupart des autres moyens car il ne boucle qu'une seule fois à travers la baie. Vérifiez l'extrait de code pour quelques comparaisons

// open the dev console to see results

count = 100000

console.time("from object")
for (let i = 0; i<count; i++) {
  range = Array.from({length:10}, (v,i) => i )
}
console.timeEnd("from object")

console.time("from keys")
for (let i =0; i<count; i++) {
  range = Array.from(Array(10).keys())
}
console.timeEnd("from keys")

console.time("apply")
for (let i = 0; i<count; i++) {
  range = Array.apply(null, { length: 10 }).map(function(element, index) { return index; })
}
console.timeEnd("apply")

Utilisation de nouvelles méthodes Array et de la =>syntaxe de fonction du standard ES6 (uniquement Firefox au moment de la rédaction).

En remplissant les trous avec undefined:

Array(N).fill().map((_, i) => i + 1);

Array.fromtransforme les "trous" en undefineddonc Array.mapfonctionne comme prévu:

Array.from(Array(5)).map((_, i) => i + 1)

for(var i,a=[i=0];i<10;a[i++]=i);

a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Dans ES6:

Array.from({length: 1000}, (_, i) => i);

ES5:

Array.apply(0, {length: 1000}).map(function(x,i){return i});

Juste une autre version ES6 .

En utilisant le Array.fromdeuxième argument facultatif:

Array.from (arrayLike [, mapFn [, thisArg]])

Nous pouvons construire le tableau numéroté à partir des Array(10)positions vides :

Array.from(Array(10), (_, i) => i)

var arr = Array.from(Array(10), (_, i) => i);
document.write(arr);

Il semble que la seule saveur qui ne figure pas actuellement dans cette liste de réponses plutôt complète est celle qui comprend un générateur; pour y remédier:

const gen = N => [...(function*(){let i=0;while(i<N)yield i++})()]

qui peut être utilisé ainsi:

gen(4) // [0,1,2,3]

La bonne chose à ce sujet est que vous n'avez pas seulement à incrémenter ... Pour vous inspirer de la réponse donnée par igor-shubin, vous pouvez créer un tableau de randoms très facilement:

const gen = N => [...(function*(){let i=0;
  while(i++<N) yield Math.random()
})()]

Et plutôt que quelque chose de long sur le plan opérationnel comme:

const slow = N => new Array(N).join().split(',').map((e,i)=>i*5)
// [0,5,10,15,...]

vous pourriez plutôt faire:

const fast = N => [...(function*(){let i=0;while(i++<N)yield i*5})()]

Vous pouvez utiliser le remplissage et la carte du tableau à partir d'Es6; tout comme quelques personnes l'ont suggéré dans les réponses qu'elles ont données à cette question. Voici quelques exemples:

Example-One: Array(10).fill(0).map((e,i)=>i+1)

Result-One: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Example-Two: Array(100/10).fill(0).map((e,i)=>(i*10)+10)

Result-Two:[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]

Je préfère cela parce que je le trouve simple et plus facile.

Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step));

Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from

Utilisation d'ES6

const generateArray = n => [...Array(n)].map((_, index) => index + 1);

Object.keys(Array.apply(0, Array(3))).map(Number)

Retours [0, 1, 2]. Très similaire à l'excellente réponse d' Igor Shubin , mais avec un peu moins de ruse (et un personnage de plus).

Explication:

• Array(3) // [undefined × 3]Générez un tableau de longueur n = 3. Malheureusement, ce tableau nous est presque inutile, nous devons donc…
• Array.apply(0,Array(3)) // [undefined, undefined, undefined]rendre le tableau itérable. Remarque: null est plus courant que le premier argument de apply mais 0 est plus court.
• Object.keys(Array.apply(0,Array(3))) // ['0', '1', '2'] puis récupérez les clés du tableau (fonctionne parce que les tableaux sont le type de tableau est un objet avec des index pour les clés.
• Object.keys(Array.apply(0,Array(3))).map(Number) // [0, 1, 2] et mappez les clés, convertissant les chaînes en nombres.