Wie initialisiere ich die Länge eines Arrays in JavaScript?

Die meisten Tutorials, die ich über Arrays in JavaScript gelesen habe (einschließlich w3schools und devguru ), schlagen vor, dass Sie ein Array mit einer bestimmten Länge initialisieren können, indem Sie dem Array-Konstruktor mithilfe der var test = new Array(4);Syntax eine Ganzzahl übergeben .

Nachdem ich diese Syntax in meinen js-Dateien großzügig verwendet hatte, führte ich eine der Dateien über jsLint aus und es flippte aus:

Fehler: Problem in Zeile 1 Zeichen 22: Erwartet ')' und stattdessen '4' gesehen.
var test = neues Array (4);
Problem in Zeile 1, Zeichen 23: Erwartetes ';' und sah stattdessen ')'.
var test = neues Array (4);
Problem in Zeile 1, Zeichen 23: Erwartete eine Kennung und sah stattdessen ')'.

Nach dem Lesen der Erklärung des Verhaltens von jsLint sieht es so aus, als ob jsLint die new Array()Syntax nicht wirklich mag und stattdessen []beim Deklarieren von Arrays bevorzugt .

Ich habe also ein paar Fragen:

Erstens, warum? Gehe ich ein Risiko ein, wenn ich new Array()stattdessen die Syntax verwende? Gibt es Browser-Inkompatibilitäten, die ich beachten sollte?

Und zweitens, wenn ich zur Syntax in eckigen Klammern wechsle, gibt es eine Möglichkeit, ein Array zu deklarieren und seine Länge in einer Zeile festzulegen, oder muss ich so etwas tun:

var test = [];
test.length = 4;

1. Warum möchten Sie die Länge initialisieren? Theoretisch besteht hierfür keine Notwendigkeit. Dies kann sogar zu verwirrendem Verhalten führen, da alle Tests, lengthbei denen ermittelt wird, ob ein Array leer ist oder nicht, melden, dass das Array nicht leer ist.
   Einige Tests zeigen , dass die anfängliche Länge von großen Arrays Einstellung kann effizienter sein , wenn das Array danach gefüllt, aber der Performance - Gewinn (falls vorhanden) scheint von Browser zu Browser unterscheiden.

2. jsLint gefällt nicht, new Array()weil der Konstruktor nicht eindeutig ist.

   new Array(4);

   erstellt ein leeres Array der Länge 4. Aber

   new Array('4');

   Erstellt ein Array mit dem Wert '4' .

Zu Ihrem Kommentar: In JS müssen Sie die Länge des Arrays nicht initialisieren. Es wächst dynamisch. Sie können die Länge einfach in einer Variablen speichern, z

var data = [];
var length = 5; // user defined length

for(var i = 0; i < length; i++) {
    data.push(createSomeObject());
}

• Array(5) gibt Ihnen ein Array mit der Länge 5, aber ohne Werte, daher können Sie nicht darüber iterieren.

• Array.apply(null, Array(5)).map(function () {}) gibt Ihnen ein Array mit der Länge 5 und undefiniert als Werte, jetzt kann es wiederholt werden.

• Array.apply(null, Array(5)).map(function (x, i) { return i; }) gibt Ihnen ein Array mit der Länge 5 und den Werten 0,1,2,3,4.

• Array(5).forEach(alert)tut nichts, Array.apply(null, Array(5)).forEach(alert)gibt Ihnen 5 Warnungen

• ES6gibt uns Array.fromalso jetzt kannst du auch nutzenArray.from(Array(5)).forEach(alert)

• Wenn Sie mit einem bestimmten Wert initialisiert werden sollen, ist diese gut kennt ...
  Array.from('abcde'), Array.from('x'.repeat(5))
  oderArray.from({length: 5}, (v, i) => i) // gives [0, 1, 2, 3, 4]

Mit ES2015 können.fill() Sie jetzt einfach Folgendes tun:

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

Welches ist viel prägnanter als Array.apply(0, new Array(n)).map(i => value)

Es ist möglich, das 0In zu löschen .fill()und ohne Argumente auszuführen, wodurch das Array gefüllt wird undefined. ( Dies schlägt jedoch in Typescript fehl. )

[...Array(6)].map(x => 0);
// [0, 0, 0, 0, 0, 0]

ODER

Array(6).fill(0);
// [0, 0, 0, 0, 0, 0]

Hinweis: Sie können keine leeren Slots schleifen, z Array(4).forEach(() => …)

ODER

( Typoskript sicher )

Array(6).fill(null).map((_, i) => i);
// [0, 1, 2, 3, 4, 5]

ODER

Klassische Methode mit einer Funktion (funktioniert in jedem Browser)

function NewArray(size) {
    var x = [];
    for (var i = 0; i < size; ++i) {
        x[i] = i;
        return x;
    }
}

var a = NewArray(10);
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Verschachtelte Arrays erstellen

Beim Erstellen eines 2D- Arrays mit dem fillsollte intuitiv neue Instanzen erstellt werden. Was aber tatsächlich passieren wird, ist, dass dasselbe Array als Referenz gespeichert wird.

var a = Array(3).fill([6]);
// [  [6], [6], [6]  ]

a[0].push(9);
// [  [6, 9], [6, 9], [6, 9]  ]

Lösung

var a = [...Array(3)].map(x => []);

a[0].push(4, 2);
// [  [4, 2], [], []  ]

Ein 3x2-Array sieht also ungefähr so ​​aus:

[...Array(3)].map(x => Array(2).fill(0));
// [  [0, 0], [0, 0], [0, 0]  ]

N-dimensionales Array

function NArray(...dimensions) {
    var index = 0;
    function NArrayRec(dims) {
        var first = dims[0], next = dims.slice().splice(1); 
        if(dims.length > 1) 
            return Array(dims[0]).fill(null).map((x, i) => NArrayRec(next ));
        return Array(dims[0]).fill(null).map((x, i) => (index++));
    }
    return NArrayRec(dimensions);
}

var arr = NArray(3, 2, 4);
// [   [  [ 0,  1,  2,  3 ] , [  4,  5,  6,  7]  ],
//     [  [ 8,  9,  10, 11] , [ 12, 13, 14, 15]  ],
//     [  [ 16, 17, 18, 19] , [ 20, 21, 22, 23]  ]   ]

Initialisiere ein Schachbrett

var Chessboard = [...Array(8)].map((x, j) => {
    return Array(8).fill(null).map((y, i) => {
        return `${String.fromCharCode(65 + i)}${8 - j}`;
    });
});

// [ [A8, B8, C8, D8, E8, F8, G8, H8],
//   [A7, B7, C7, D7, E7, F7, G7, H7],
//   [A6, B6, C6, D6, E6, F6, G6, H6],
//   [A5, B5, C5, D5, E5, F5, G5, H5],
//   [A4, B4, C4, D4, E4, F4, G4, H4],
//   [A3, B3, C3, D3, E3, F3, G3, H3],
//   [A2, B2, C2, D2, E2, F2, G2, H2],
//   [A1, B1, C1, D1, E1, F1, G1, H1] ]

Der kürzeste:

[...Array(1000)]

ES6 führt ein, mit Array.fromdem Sie Arrayaus beliebigen "Array-ähnlichen" oder iterierbaren Objekten ein Objekt erstellen können:

Array.from({length: 10}, (x, i) => i);
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

In diesem Fall handelt es sich {length: 10}um die minimale Definition eines "Array-ähnlichen" Objekts: ein leeres Objekt mit nur einer lengthdefinierten Eigenschaft.

Array.from Ermöglicht die Zuordnung eines zweiten Arguments zum resultierenden Array.

Dadurch wird die Eigenschaft length auf 4 initialisiert:

var x = [,,,,];

Ich bin überrascht, dass keine funktionale Lösung vorgeschlagen wurde, mit der Sie die Länge in einer Zeile festlegen können. Folgendes basiert auf UnderscoreJS:

var test = _.map(_.range(4), function () { return undefined; });
console.log(test.length);

Aus den oben genannten Gründen würde ich dies vermeiden, es sei denn, ich wollte das Array mit einem bestimmten Wert initialisieren. Es ist interessant festzustellen, dass es andere Bibliotheken gibt, die einen Bereich implementieren, einschließlich Lo-Dash und Lazy, die möglicherweise unterschiedliche Leistungsmerkmale aufweisen.

Bitte, die Leute geben ihre alten Gewohnheiten noch nicht auf. Es gibt einen großen Geschwindigkeitsunterschied zwischen der einmaligen Zuweisung von Speicher und der Arbeit mit den Einträgen in diesem Array (wie bisher) und der mehrmaligen Zuweisung, wenn ein Array wächst (was das System zwangsläufig unter der Haube mit anderen vorgeschlagenen Methoden tut). .

Nichts davon ist natürlich wichtig, bis Sie mit größeren Arrays etwas Cooles machen möchten. Dann tut es.

Da es in JS derzeit noch keine Option zum Festlegen der Anfangskapazität eines Arrays zu geben scheint, verwende ich Folgendes ...

var newArrayWithSize = function(size) {
  this.standard = this.standard||[];
  for (var add = size-this.standard.length; add>0; add--) {
   this.standard.push(undefined);// or whatever
  }
  return this.standard.slice(0,size);
}

Es gibt Kompromisse:

• Diese Methode dauert so lange wie die anderen für den ersten Aufruf der Funktion, aber sehr wenig Zeit für spätere Aufrufe (es sei denn, Sie fordern ein größeres Array an).
• Das standardArray reserviert permanent so viel Speicherplatz wie das größte Array, nach dem Sie gefragt haben.

Aber wenn es zu dem passt, was Sie tun, kann es eine Auszahlung geben. Informelles Timing setzt

for (var n=10000;n>0;n--) {var b = newArrayWithSize(10000);b[0]=0;}

bei ziemlich hoher Geschwindigkeit (ungefähr 50 ms für die 10000, da es mit n = 1000000 ungefähr 5 Sekunden dauerte) und

for (var n=10000;n>0;n--) {
  var b = [];for (var add=10000;add>0;add--) {
    b.push(undefined);
  }
}

bei weit über einer Minute (ungefähr 90 Sekunden für den 10000 auf derselben Chromkonsole oder ungefähr 2000 Mal langsamer). Das ist nicht nur die Zuordnung, sondern auch die 10000 Pushs, for-Schleife usw.

(Dies war wahrscheinlich besser als Kommentar, wurde aber zu lang)

Nachdem ich dies gelesen hatte, war ich neugierig, ob die Vorzuweisung tatsächlich schneller war, weil es theoretisch so sein sollte. Dieser Blog gab jedoch einige Tipps, die davon abraten . Http://www.html5rocks.com/en/tutorials/speed/v8/ .

Da ich immer noch unsicher bin, habe ich es auf die Probe gestellt. Und wie sich herausstellt, scheint es tatsächlich langsamer zu sein.

var time = Date.now();
var temp = [];
for(var i=0;i<100000;i++){
    temp[i]=i;
}
console.log(Date.now()-time);


var time = Date.now();
var temp2 = new Array(100000);
for(var i=0;i<100000;i++){
    temp2[i] = i;
}
console.log(Date.now()-time); 

Dieser Code liefert nach einigen gelegentlichen Läufen Folgendes:

$ node main.js 
9
16
$ node main.js 
8
14
$ node main.js 
7
20
$ node main.js 
9
14
$ node main.js 
9
19

var arr=[];
arr[5]=0;
alert("length="+arr.length); // gives 6

Hier ist eine andere Lösung

var arr = Array.apply( null, { length: 4 } );
arr;  // [undefined, undefined, undefined, undefined] (in Chrome)
arr.length; // 4

Das erste Argument von apply()ist eine Objektbindung, die uns hier nicht wichtig ist, also setzen wir sie auf null.

Array.apply(..)ruft die Array(..)Funktion auf und verteilt den { length: 3 }Objektwert als Argumente.

Der Array-Konstruktor hat eine mehrdeutige Syntax , und JSLint verletzt schließlich nur Ihre Gefühle.

Wenn Ihr Beispielcode fehlerhaft ist, löst die zweite varAnweisung a aus SyntaxError. Sie legen die Eigenschaft lengthdes Arrays fest test, sodass keine weitere erforderlich ist var.

Was Ihre Optionen angeht, array.lengthist dies die einzige "saubere". Die Frage ist, warum müssen Sie die Größe überhaupt einstellen? Versuchen Sie, Ihren Code umzugestalten, um diese Abhängigkeit zu beseitigen.

Angenommen, die Länge des Arrays ist konstant. In Javascript tun wir Folgendes:

const intialArray = new Array(specify the value);

Wie oben erläutert, ist die Verwendung new Array(size)etwas gefährlich. Platzieren Sie es nicht direkt, sondern in einer "Array Creator-Funktion". Sie können leicht sicherstellen, dass diese Funktion fehlerfrei ist und Sie vermeiden die Gefahr eines new Array(size)direkten Anrufs . Sie können ihm auch einen optionalen Standardanfangswert geben. Diese createArrayFunktion macht genau das:

function createArray(size, defaultVal) {
    var arr = new Array(size);
    if (arguments.length == 2) {
        // optional default value
        for (int i = 0; i < size; ++i) {
            arr[i] = defaultVal;
        }
    }
    return arr;
}

In den meisten Antworten wird es filldem Array empfohlen, da sonst "Sie nicht darüber iterieren können" , aber dies ist nicht wahr. Sie können ein leeres Array iterieren, nur nicht mit forEach. Während Schleifen, für Schleifen und für i Schleifen funktionieren gut.

const count = Array(5);

Funktioniert nicht.

console.log('---for each loop:---');
count.forEach((empty, index) => {
    console.log(`counting ${index}`);
});

Diese Arbeit:

console.log('---for of loop:---');
for (let [index, empty] of count.entries()) {
  console.log(`counting for of loop ${index}`);
}

console.log('---for i loop:---');
for (let i = 0, il = count.length; i < il; ++i) {
  console.log(`counting for i loop ${i}`);
}

console.log('---while loop:---');
let index = 0;
while (index < count.length) { 
  console.log(`counting while loop ${index}`); 
  index++; 
}

Überprüfen Sie diese Geige anhand der obigen Beispiele.

Auch Winkel *ngForfunktionieren gut mit einem leeren Array:

<li *ngFor="let empty of count; let i = index" [ngClass]="
  <span>Counting with *ngFor {{i}}</span>
</li>

Sie können die Array-Länge mithilfe von festlegen array.length = youValue

So wäre es

var myArray = [];
myArray.length = yourValue;

Der Grund, den Sie nicht verwenden sollten, new Arraywird durch diesen Code demonstriert:

var Array = function () {};

var x = new Array(4);

alert(x.length);  // undefined...

Ein anderer Code könnte mit der Array-Variablen in Konflikt geraten. Ich weiß, es ist ein bisschen weit hergeholt, dass irgendjemand solchen Code schreiben würde, aber trotzdem ...

Wie Felix King sagte, ist die Benutzeroberfläche etwas inkonsistent und kann zu einigen sehr schwer auffindbaren Fehlern führen.

Wenn Sie ein Array mit der Länge = x new Array(x)möchten , das mit undefiniert gefüllt ist (wie dies der Fall wäre), können Sie Folgendes tun:

var x = 4;
var myArray = [];
myArray[x - 1] = undefined;

alert(myArray.length); // 4