Jak zainicjować długość tablicy w JavaScript?

Większość samouczków, które przeczytałem o tablicach w JavaScript (w tym w3schools i devguru ) sugerują, że możesz zainicjować tablicę o określonej długości, przekazując liczbę całkowitą do konstruktora Array przy użyciu var test = new Array(4);składni.

Po swobodnym użyciu tej składni w moich plikach js, uruchomiłem jeden z tych plików przez jsLint i to przeraziło :

Błąd: Problem w wierszu 1 znak 22: Oczekiwano „)” i zamiast tego zobaczył „4”.
var test = new Array (4);
Problem w wierszu 1 znak 23: Oczekiwany ';' i zamiast tego zobaczyłem „)”.
var test = new Array (4);
Problem w wierszu 1 znak 23: Oczekiwano identyfikatora i zamiast tego zobaczyłem „)”.

Po przeczytaniu wyjaśnienia jego zachowania przez jsLint , wygląda na to, że jsLint tak naprawdę nie lubi new Array()składni, a zamiast tego woli []przy deklarowaniu tablic.

Mam więc kilka pytań:

Po pierwsze dlaczego? Czy ryzykuję, używając new Array()zamiast tego składni? Czy są jakieś niezgodności przeglądarki, o których powinienem wiedzieć?

Po drugie, jeśli przejdę do składni nawiasu kwadratowego, czy istnieje sposób zadeklarowania tablicy i ustawienia jej długości w jednym wierszu, czy też muszę zrobić coś takiego:

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

1. Dlaczego chcesz zainicjować długość? Teoretycznie nie ma takiej potrzeby. Może to nawet powodować mylące zachowanie, ponieważ wszystkie testy, które używają lengthdo sprawdzenia, czy tablica jest pusta, czy nie, zgłoszą, że tablica nie jest pusta.
   Niektóre testy pokazują, że ustawienie początkowej długości dużych tablic może być bardziej wydajne, jeśli tablica zostanie następnie wypełniona, ale wzrost wydajności (jeśli występuje) wydaje się różnić w zależności od przeglądarki.

2. jsLint nie lubi, new Array()ponieważ konstruktor jest niejednoznaczny.

   new Array(4);

   tworzy pustą tablicę o długości 4. Ale

   new Array('4');

   tworzy tablicę zawierającą wartość '4' .

W odniesieniu do komentarza: w JS nie trzeba inicjować długości tablicy. Rośnie dynamicznie. Możesz po prostu zapisać długość w jakiejś zmiennej, np

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

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

• Array(5) daje tablicę o długości 5, ale bez wartości, dlatego nie można jej iterować.

• Array.apply(null, Array(5)).map(function () {}) daje tablicę o długości 5 i niezdefiniowaną jako wartości, teraz można ją powtarzać.

• Array.apply(null, Array(5)).map(function (x, i) { return i; }) daje tablicę o długości 5 i wartościach 0,1,2,3,4.

• Array(5).forEach(alert)nic nie robi, Array.apply(null, Array(5)).forEach(alert)daje 5 alertów

• ES6daje nam Array.fromwięc teraz możesz także użyćArray.from(Array(5)).forEach(alert)

• Jeśli chcesz zainicjować z pewnej wartości, są dobrze wie ...
  Array.from('abcde'), Array.from('x'.repeat(5))
  lubArray.from({length: 5}, (v, i) => i) // gives [0, 1, 2, 3, 4]

Dzięki ES2015.fill() możesz teraz po prostu zrobić:

// `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)

Co jest o wiele bardziej zwięzłe niż Array.apply(0, new Array(n)).map(i => value)

Jest to możliwe do spadku 0w .fill()i uruchomić bez argumentów, które wypełni tablicę z undefined. ( Jednak nie powiedzie się to w maszynopisie )

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

LUB

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

Uwaga: nie można zapętlać pustych miejsc, tj Array(4).forEach(() => …)

LUB

( bezpieczny dla maszynopisu )

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

LUB

Klasyczna metoda wykorzystująca funkcję (działa w dowolnej przeglądarce)

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]

Tworzenie zagnieżdżonych tablic

Podczas tworzenia tablicy 2Dfill intuicyjnie należy tworzyć nowe wystąpienia. Ale to, co faktycznie się stanie, to ta sama tablica będzie przechowywana jako odniesienie.

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

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

Rozwiązanie

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

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

Tak więc tablica 3x2 będzie wyglądać mniej więcej tak:

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

Tablica N-wymiarowa

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

Zainicjuj szachownicę

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

Najkrótszy:

[...Array(1000)]

ES6 wprowadza, Array.fromktóry pozwala tworzyć Arrayz dowolnych obiektów „podobnych do tablicy” lub iterowalnych :

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

W tym przypadku {length: 10}reprezentuje minimalną definicję obiektu „podobnego do tablicy” : pusty obiekt ze lengthzdefiniowaną tylko właściwością.

Array.from pozwala na odwzorowanie drugiego argumentu na wynikową tablicę.

Spowoduje to zainicjowanie właściwości length na 4:

var x = [,,,,];

Dziwi mnie, że nie zaproponowano funkcjonalnego rozwiązania, które pozwala ustawić długość w jednej linii. Poniższe informacje oparte są na UnderscoreJS:

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

Z powodów wymienionych powyżej unikałbym tego, chyba że chciałbym zainicjować tablicę do określonej wartości. Warto zauważyć, że istnieją inne biblioteki, które implementują zakres, w tym Lo-dash i Lazy, które mogą mieć różne charakterystyki wydajności.

Proszę, ludzie jeszcze nie rezygnują z twoich starych nawyków. Istnieje duża różnica w szybkości między alokowaniem pamięci raz, a następnie pracą z wpisami w tej tablicy (jak na starym), i alokowaniem jej wiele razy w miarę wzrostu tablicy (co jest nieuchronnie tym, co system robi pod maską za pomocą innych sugerowanych metod) .

Nie ma to oczywiście znaczenia, dopóki nie chcesz zrobić czegoś fajnego z większymi tablicami. To robi.

Ponieważ w JS wciąż nie ma opcji ustawienia początkowej pojemności macierzy, używam następujących ...

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);
}

W grę wchodzą kompromisy:

• Ta metoda trwa tak długo, jak inne dla pierwszego wywołania funkcji, ale bardzo mało czasu dla późniejszych wywołań (chyba że poprosi się o większą tablicę).
• standardTablica ma stałe zarezerwować tyle miejsca, co do wielkości tablicy ty prosić.

Ale jeśli pasuje to do tego, co robisz, może być to opłacalne. Nieformalny czas stawia

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

przy dość szybkim czasie (około 50 ms dla 10000, biorąc pod uwagę, że przy n = 1000000 zajęło to około 5 sekund), i

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

znacznie ponad minutę (około 90 sekund dla 10000 na tej samej konsoli chromowanej lub około 2000 razy wolniej). To nie będzie tylko alokacja, ale także 10000 wypychań dla pętli itp.

(prawdopodobnie było to lepsze jako komentarz, ale stało się za długie)

Po przeczytaniu tego zastanawiałem się, czy wstępne przydzielanie było faktycznie szybsze, ponieważ teoretycznie powinno być. Jednak ten blog zawiera kilka wskazówek odradzających go http://www.html5rocks.com/en/tutorials/speed/v8/ .

Wciąż będąc niepewnym, wystawiam to na próbę. I jak się okazuje, w rzeczywistości wydaje się być wolniejszy.

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); 

Ten kod daje następujące wyniki po kilku przypadkowych uruchomieniach:

$ 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

Oto inne rozwiązanie

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

Pierwszym argumentem apply()jest powiązanie tego obiektu, na którym nam nie zależy, więc ustawiliśmy to na null.

Array.apply(..)wywołuje Array(..)funkcję i rozkłada { length: 3 }wartość obiektu jako argumenty.

Konstruktor tablic ma niejednoznaczną składnię , a JSLint po prostu rani twoje uczucia.

Ponadto twój przykładowy kod jest uszkodzony, druga varinstrukcja podniesie a SyntaxError. Ustawiasz właściwość lengthtablicy test, więc nie ma potrzeby kolejnej var.

Jeśli chodzi o opcje, array.lengthjest to jedyna „czysta”. Pytanie brzmi: dlaczego musisz najpierw ustawić rozmiar? Spróbuj zmodyfikować kod, aby pozbyć się tej zależności.

Zakładając, że długość tablicy jest stała. W JavaScript robimy to:

const intialArray = new Array(specify the value);

Jak wyjaśniono powyżej, używanie new Array(size)jest nieco niebezpieczne. Zamiast używać go bezpośrednio, umieść go w „funkcji twórcy tablicy”. Możesz łatwo upewnić się, że ta funkcja jest wolna od błędów i uniknąć niebezpieczeństwa new Array(size)bezpośredniego połączenia . Możesz także nadać mu opcjonalną domyślną wartość początkową. Ta createArrayfunkcja robi dokładnie to:

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;
}

W większości odpowiedzi zaleca się filltablicę, ponieważ w przeciwnym razie „nie można iterować” , ale nie jest to prawdą. Możesz iterować pustą tablicę, ale nie za pomocą forEach. Podczas gdy pętle, pętle for i pętle for działają poprawnie.

const count = Array(5);

Nie działa.

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

Te prace:

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++; 
}

Czek to skrzypce z powyższymi przykładami.

Również kąty *ngFordziałają dobrze z pustą tablicą:

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

Możesz ustawić długość tablicy za pomocą array.length = youValue

Tak by było

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

Powód, dla którego nie należy używać, new Arraywynika z tego kodu:

var Array = function () {};

var x = new Array(4);

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

Może inny kod zadzierać ze zmienną Array. Wiem, że jest trochę daleko posunięte, że ktoś napisałby taki kod, ale nadal ...

Ponadto, jak powiedział Felix King, interfejs jest nieco niespójny i może prowadzić do bardzo trudnych do wyśledzenia błędów.

Jeśli chcesz tablicę o długości = x, wypełnioną niezdefiniowaną (jak new Array(x)by to zrobiło), możesz to zrobić:

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

alert(myArray.length); // 4