Wie initialisiert man die Länge eines Arrays in JavaScript?

Question

Die meisten der Tutorials, die ich über Arrays in JavaScript gelesen habe (einschließlich w3-Schulen y devguru ) legen nahe, dass man ein Array mit einer bestimmten Länge initialisieren kann, indem man eine ganze Zahl an den Array-Konstruktor übergibt und die var test = new Array(4); Syntax.

Nachdem ich diese Syntax großzügig in meinen js-Dateien verwendet habe, habe ich eine der Dateien durch jsLint und er ist ausgeflippt:

Fehler: Problem in Zeile 1 Zeichen 22: Erwartet wurde ')' und stattdessen wurde '4' angezeigt.
var test = new Array(4);
Problem in Zeile 1 Zeichen 23: Erwartet wurde ';' und stattdessen wurde ')' angezeigt.
var test = new Array(4);
Problem in Zeile 1 Zeichen 23: Erwartet wurde ein Bezeichner, stattdessen wurde ')' angezeigt.

Nach dem Durchlesen jsLint's Erklärung für sein Verhalten sieht es so aus, als ob jsLint nicht wirklich die new Array() Syntax, und bevorzugt stattdessen [] bei der Deklaration von Arrays.

Ich habe also ein paar Fragen:

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

Und zweitens, wenn ich auf die eckige Klammer-Syntax wechseln, gibt es eine Möglichkeit, ein Array zu deklarieren und seine Länge alle in einer Zeile, oder muss ich so etwas tun:

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

Answer 1

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

• Array.apply(null, Array(5)).map(function () {}) ergibt ein Array mit der Länge 5 und undefinierten Werten, über das nun iteriert werden kann.

• Array.apply(null, Array(5)).map(function (x, i) { return i; }) ergibt 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

• ES6 gibt uns Array.from Sie können nun auch Array.from(Array(5)).forEach(alert)

• Wenn Sie mit einem bestimmten Wert initialisieren wollen, sind diese gut zu wissen...
  Array.from('abcde') , Array.from('x'.repeat(5))
  ou Array.from({length: 5}, (v, i) => i) // gives [0, 1, 2, 3, 4]

Answer 2

Mit ES2015 .fill() können Sie jetzt einfach 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)

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

Es ist möglich, die 0 en .fill() und ohne Argumente ausführen, was das Array mit undefined . ( Dies wird jedoch in Typescript fehlschlagen )

Answer 3

1. Warum wollen Sie die Länge initialisieren? Theoretisch gibt es dafür keinen Grund. Es kann sogar zu verwirrendem Verhalten führen, da alle Tests, die die length um herauszufinden, ob ein Array leer ist oder nicht, meldet, dass das Array nicht leer ist.
   Einige Tests zeigen, dass die Festlegung der anfänglichen Länge von großen Arrays peut effizienter sein, wenn das Array anschließend gefüllt wird, aber der Leistungsgewinn (wenn überhaupt) scheint sich von Browser zu Browser zu unterscheiden.

2. jsLint mag nicht new Array() weil der Konstrukteur zweideutig ist.

   new Array(4);

   erzeugt ein leeres Array der Länge 4. Aber

   new Array('4');

   erstellt ein Array die den Wert '4' .

Bezüglich Ihres Kommentars: In JS brauchen Sie die Länge des Arrays nicht zu initialisieren. Sie wächst dynamisch. Sie können die Länge einfach in einer Variablen speichern, z.B.

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

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

Answer 4

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

OR

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

Hinweis: Sie können leere Slots nicht in eine Schleife einfügen, d. h. Array(4).forEach(() => …)

---

OR

( satzschriftsicher )

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

---

OR

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

Bei der Erstellung einer 2D Array mit dem fill intuitiv neue Instanzen schaffen sollte. Aber was tatsächlich passieren wird, ist 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 etwa 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]  ]   ]

---

Initialisieren eines Schachbretts

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] ]

---

Mathematisch gefüllte Werte

praktische kleine Methodenüberlastung bei der Arbeit mit Mathematik

function NewArray( size , method, linear )
{
    method = method || ( i => i ); 
    linear = linear || false;
    var x = [];
    for( var i = 0; i < size; ++i )
        x[ i ] = method( linear ? i / (size-1) : i );
    return x;
}

NewArray( 4 ); 
// [ 0, 1, 2, 3 ]

NewArray( 4, Math.sin ); 
// [ 0, 0.841, 0.909, 0.141 ]

NewArray( 4, Math.sin, true );
// [ 0, 0.327, 0.618, 0.841 ]

var pow2 = ( x ) => x * x;

NewArray( 4, pow2 ); 
// [ 0, 1, 4, 9 ]

NewArray( 4, pow2, true ); 
// [ 0, 0.111, 0.444, 1 ]

Answer 5

Die kürzeste:

let arr = [...Array(10)];
console.log(arr);