Jaki jest najskuteczniejszy sposób na utworzenie dowolnej liczby pól wypełnionych zerami w JavaScript?

ES6 wprowadza Array.prototype.fill. Można go użyć w następujący sposób:

new Array(len).fill(0);

Nie jestem pewien, czy jest szybki, ale podoba mi się, ponieważ jest krótki i samoopisujący się.

Nadal nie ma go w IE ( sprawdź kompatybilność ), ale dostępny jest polypełniacz .

Chociaż jest to stary wątek, chciałem dodać do niego moje 2 centy. Nie jestem pewien, jak wolno / szybko to jest, ale jest to szybki jeden linijka. Oto co robię:

Jeśli chcę wstępnie wypełnić liczbą:

Array.apply(null, Array(5)).map(Number.prototype.valueOf,0);
// [0, 0, 0, 0, 0]

Jeśli chcę wstępnie wypełnić ciąg:

Array.apply(null, Array(3)).map(String.prototype.valueOf,"hi")
// ["hi", "hi", "hi"]

Inne odpowiedzi sugerują:

new Array(5+1).join('0').split('')
// ["0", "0", "0", "0", "0"]

ale jeśli chcesz 0 (liczbę), a nie „0” (zero w ciągu), możesz:

new Array(5+1).join('0').split('').map(parseFloat)
// [0, 0, 0, 0, 0]

Elegancki sposób na wypełnienie tablicy wstępnie obliczonymi wartościami

Oto inny sposób, aby to zrobić za pomocą ES6, o którym nikt dotąd nie wspominał:

> Array.from(Array(3), () => 0)
< [0, 0, 0]

Działa, przekazując funkcję mapy jako drugi parametr parametru Array.from.

W powyższym przykładzie pierwszy parametr przydziela tablicę 3 pozycji wypełnionych wartością, undefineda następnie funkcja lambda odwzorowuje każdą z nich na wartość 0.

Chociaż Array(len).fill(0)jest krótszy, nie działa, jeśli musisz najpierw wypełnić tablicę, wykonując obliczenia (wiem, że pytanie nie wymagało tego, ale wiele osób kończy tutaj, szukając tego) .

Na przykład, jeśli potrzebujesz tablicy z 10 liczbami losowymi:

> Array.from(Array(10), () => Math.floor(10 * Math.random()))
< [3, 6, 8, 1, 9, 3, 0, 6, 7, 1]

Jest bardziej zwięzły (i elegancki) niż odpowiednik:

const numbers = Array(10);
for (let i = 0; i < numbers.length; i++) {
    numbers[i] = Math.round(10 * Math.random());
}

Tej metody można również użyć do wygenerowania sekwencji liczb, korzystając z parametru indeksu podanego w wywołaniu zwrotnym:

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

Dodatkowa odpowiedź: wypełnij tablicę używając String repeat()

Ponieważ ta odpowiedź cieszy się dużym zainteresowaniem, chciałem też pokazać tę fajną sztuczkę. Chociaż nie tak przydatna jak moja główna odpowiedź, wprowadzę wciąż mało znaną, ale bardzo przydatną repeat()metodę String . Oto sztuczka:

> "?".repeat(10).split("").map(() => Math.floor(10 * Math.random()))
< [5, 6, 3, 5, 0, 8, 2, 7, 4, 1]

Fajne hę? repeat()to bardzo przydatna metoda tworzenia ciągu znaków, który jest powtórzeniem ciągu oryginalnego kilka razy. Następnie split()tworzy dla nas tablicę, która następnie map()dostosowuje się do pożądanych wartości. Podział na etapy:

> "?".repeat(10)
< "??????????"

> "?".repeat(10).split("")
< ["?", "?", "?", "?", "?", "?", "?", "?", "?", "?"]

> "?".repeat(10).split("").map(() => Math.floor(10 * Math.random()))
< [5, 6, 3, 5, 0, 8, 2, 7, 4, 1]

W skrócie

Najszybsze rozwiązanie

let a = new Array(n); for (let i=0; i<n; ++i) a[i] = 0;

Najkrótsze (przydatne) rozwiązanie (3x wolniejsze dla małych tablic, nieco wolniejsze dla dużych (najwolniejsze w Firefox))

Array(n).fill(0)

Detale

Dzisiaj 2020.06.09 Przeprowadzam testy na macOS High Sierra 10.13.6 w przeglądarkach Chrome 83.0, Firefox 77.0 i Safari 13.1. Testuję wybrane rozwiązania dla dwóch przypadków testowych

• mała tablica - z 10 elementami - możesz wykonać test TUTAJ
• duże tablice - z elementami 1M - możesz wykonać test TUTAJ

Wnioski

• rozwiązanie oparte na new Array(n)+for (N) jest najszybszym rozwiązaniem dla małych tablic i dużych tablic (oprócz Chrome, ale wciąż tam bardzo szybko) i jest zalecane jako szybkie rozwiązanie dla różnych przeglądarek
• rozwiązanie oparte na new Float32Array(n)(I) zwraca nietypową tablicę (np. nie można wywołać)push(..) ), więc nie porównuję jej wyników z innymi rozwiązaniami - jednak to rozwiązanie jest około 10-20 razy szybsze niż inne rozwiązania dla dużych tablic we wszystkich przeglądarkach
• rozwiązania oparte na for (L, M, N, O) są szybkie dla małych tablic
• rozwiązania oparte na fill (B, C) są szybkie w Chrome i Safari, ale zaskakująco najwolniejsze w Firefox dla dużych tablic. Są średnio szybkie dla małych tablic
• rozwiązanie oparte na Array.apply(P) generuje błąd dla dużych tablic

  Pokaż fragment kodu

  function P(n) {
    return Array.apply(null, Array(n)).map(Number.prototype.valueOf,0);
  }
  
  
  try {
    P(1000000);
  } catch(e) { 
    console.error(e.message);
  }

  Uruchom fragment koduUkryj wyniki

  Rozwiń fragment kodu

Kod i przykład

Poniższy kod przedstawia rozwiązania stosowane w pomiarach

function A(n) {
  return [...new Array(n)].fill(0);
}

function B(n) {
  return new Array(n).fill(0);
}

function C(n) {
  return Array(n).fill(0);
}

function D(n) {
  return Array.from({length: n}, () => 0);
}

function E(n) {
  return [...new Array(n)].map(x => 0);
}

// arrays with type

function F(n) {
  return Array.from(new Int32Array(n));
}

function G(n) {
  return Array.from(new Float32Array(n));
}

function H(n) {
  return Array.from(new Float64Array(n)); // needs 2x more memory than float32
}

function I(n) {
  return new Float32Array(n); // this is not typical array
}

function J(n) {
  return [].slice.apply(new Float32Array(n));
}

// Based on for

function K(n) {
  let a = [];
  a.length = n;
  let i = 0;
  while (i < n) {
    a[i] = 0;
    i++;
  }
  return a;
}

function L(n) {
  let a=[]; for(let i=0; i<n; i++) a[i]=0;
  return a;
}

function M(n) {
  let a=[]; for(let i=0; i<n; i++) a.push(0);
  return a;
}

function N(n) {
  let a = new Array(n); for (let i=0; i<n; ++i) a[i] = 0;
  return a;
}

function O(n) {
  let a = new Array(n); for (let i=n; i--;) a[i] = 0;
  return a;
}

// other

function P(n) {
  return Array.apply(null, Array(n)).map(Number.prototype.valueOf,0);
}

function Q(n) {
  return "0".repeat( n ).split("").map( parseFloat );
}

function R(n) {
  return new Array(n+1).join('0').split('').map(parseFloat)
}


// ---------
// TEST
// ---------

log = f=> { let a=f(10); console.log(`${f.name} length=${a.length}, arr[0]=${a[0]}, arr[9]=${a[9]}`) }

[A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R].forEach(f => log(f));

This snippets only present used codes

Przykładowe wyniki dla Chrome

Wspomniana już metoda napełniania ES 6 ładnie się tym zajmuje. Większość współczesnych przeglądarek stacjonarnych obsługuje obecnie wymagane metody prototypów Array (Chromium, FF, Edge i Safari) [ 1 ]. Możesz sprawdzić szczegóły w MDN . Prostym przykładem użycia jest

a = new Array(10).fill(0);

Biorąc pod uwagę obecne wsparcie przeglądarki, powinieneś być ostrożny z jej użyciem, chyba że masz pewność, że Twoi odbiorcy korzystają z nowoczesnych przeglądarek Desktop.

Uwaga dodana w sierpniu 2013 r., Zaktualizowana w lutym 2015 r .: Poniższa odpowiedź z 2009 r. Dotyczy ogólnego Arraytypu JavaScript . To nie dotyczy nowszych pisanych tablic zdefiniowanych w ES2015 [a teraz dostępne w wielu przeglądarkach], jak Int32Arrayi takie. Należy również pamiętać, że ES2015 dodaje fillmetodę zarówno do tablic, jak i tablic maszynowych , co może być najbardziej wydajnym sposobem ich wypełnienia ...

Może to mieć duże znaczenie dla niektórych implementacji sposobu tworzenia tablicy. W szczególności silnik V8 Chrome próbuje użyć wysoce wydajnej, ciągłej tablicy pamięci, jeśli uważa, że ​​jest to możliwe, przechodząc na tablicę obiektową tylko w razie potrzeby.

W większości języków byłoby to wstępnie alokować, a następnie wypełniać zerowo, jak poniżej:

function newFilledArray(len, val) {
    var rv = new Array(len);
    while (--len >= 0) {
        rv[len] = val;
    }
    return rv;
}

Ale tablice JavaScript nie są tak naprawdę tablicami , są mapami klucz / wartość, tak jak wszystkie inne obiekty JavaScript, więc nie ma potrzeby „wstępnego przydzielania” (ustawienie długości nie przydziela tylu miejsc do wypełnienia), ani czy istnieje jakikolwiek powód, by sądzić, że korzyść z odliczenia do zera (co jest po prostu szybkie porównanie w pętli) nie jest ważniejsza przez dodanie kluczy w odwrotnej kolejności, gdy implementacja mogła zoptymalizować ich obsługę kluczy związane z tablicami teorii, generalnie wykonasz je w kolejności.

W rzeczywistości Matthew Crumley zwrócił uwagę, że odliczanie w Firefox jest znacznie wolniejsze niż liczenie w górę, co mogę potwierdzić - jest to jego część tablicowa (zapętlanie do zera jest wciąż szybsze niż zapętlenie do limitu w var). Najwyraźniej dodawanie elementów do tablicy w odwrotnej kolejności jest powolnym działaniem przeglądarki Firefox. W rzeczywistości wyniki różnią się nieco w zależności od implementacji JavaScript (co nie jest wcale takie zaskakujące). Oto szybka i brudna strona testowa (poniżej) dla implementacji przeglądarki (bardzo brudna, nie ustępuje podczas testów, więc zapewnia minimalną informację zwrotną i będzie działać z ograniczeniami czasowymi skryptów). Polecam odświeżenie między testami; FF (przynajmniej) spowalnia powtarzane testy, jeśli nie.

Dość skomplikowana wersja, która używa Array # concat, jest szybsza niż prosty init na FF, gdzieś pomiędzy 1000 a 2000 tablic elementów. Jednak w silniku V8 Chrome prosty init wygrywa za każdym razem ...

Oto strona testowa ( kopia na żywo ):

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Zero Init Test Page</title>
<style type='text/css'>
body {
    font-family:    sans-serif;
}
#log p {
    margin:     0;
    padding:    0;
}
.error {
    color:      red;
}
.winner {
    color:      green;
    font-weight:    bold;
}
</style>
<script type='text/javascript' src='prototype-1.6.0.3.js'></script>
<script type='text/javascript'>
var testdefs = {
    'downpre':  {
        total:  0,
        desc:   "Count down, pre-decrement",
        func:   makeWithCountDownPre
    },
    'downpost': {
        total:  0,
        desc:   "Count down, post-decrement",
        func:   makeWithCountDownPost
    },
    'up':       {
        total:  0,
        desc:   "Count up (normal)",
        func:   makeWithCountUp
    },
    'downandup':  {
        total:  0,
        desc:   "Count down (for loop) and up (for filling)",
        func:   makeWithCountDownArrayUp
    },
    'concat':   {
        total:  0,
        desc:   "Concat",
        func:   makeWithConcat
    }
};

document.observe('dom:loaded', function() {
    var markup, defname;

    markup = "";
    for (defname in testdefs) {
        markup +=
            "<div><input type='checkbox' id='chk_" + defname + "' checked>" +
            "<label for='chk_" + defname + "'>" + testdefs[defname].desc + "</label></div>";
    }
    $('checkboxes').update(markup);
    $('btnTest').observe('click', btnTestClick);
});

function epoch() {
    return (new Date()).getTime();
}

function btnTestClick() {

    // Clear log
    $('log').update('Testing...');

    // Show running
    $('btnTest').disabled = true;

    // Run after a pause while the browser updates display
    btnTestClickPart2.defer();
}
function btnTestClickPart2() {

    try {
        runTests();
    }
    catch (e) {
        log("Exception: " + e);
    }

    // Re-enable the button; we don't yheidl
    $('btnTest').disabled = false;
}

function runTests() {
    var start, time, counter, length, defname, def, results, a, invalid, lowest, s;

    // Get loops and length
    s = $F('txtLoops');
    runcount = parseInt(s);
    if (isNaN(runcount) || runcount <= 0) {
        log("Invalid loops value '" + s + "'");
        return;
    }
    s = $F('txtLength');
    length = parseInt(s);
    if (isNaN(length) || length <= 0) {
        log("Invalid length value '" + s + "'");
        return;
    }

    // Clear log
    $('log').update('');

    // Do it
    for (counter = 0; counter <= runcount; ++counter) {

        for (defname in testdefs) {
            def = testdefs[defname];
            if ($('chk_' + defname).checked) {
                start = epoch();
                a = def.func(length);
                time = epoch() - start;
                if (counter == 0) {
                    // Don't count (warm up), but do check the algorithm works
                    invalid = validateResult(a, length);
                    if (invalid) {
                        log("<span class='error'>FAILURE</span> with def " + defname + ": " + invalid);
                        return;
                    }
                }
                else {
                    // Count this one
                    log("#" + counter + ": " + def.desc + ": " + time + "ms");
                    def.total += time;
                }
            }
        }
    }

    for (defname in testdefs) {
        def = testdefs[defname];
        if ($('chk_' + defname).checked) {
            def.avg = def.total / runcount;
            if (typeof lowest != 'number' || lowest > def.avg) {
                lowest = def.avg;
            }
        }
    }

    results =
        "<p>Results:" +
        "<br>Length: " + length +
        "<br>Loops: " + runcount +
        "</p>";
    for (defname in testdefs) {
        def = testdefs[defname];
        if ($('chk_' + defname).checked) {
            results += "<p" + (lowest == def.avg ? " class='winner'" : "") + ">" + def.desc + ", average time: " + def.avg + "ms</p>";
        }
    }
    results += "<hr>";
    $('log').insert({top: results});
}

function validateResult(a, length) {
    var n;

    if (a.length != length) {
        return "Length is wrong";
    }
    for (n = length - 1; n >= 0; --n) {
        if (a[n] != 0) {
            return "Index " + n + " is not zero";
        }
    }
    return undefined;
}

function makeWithCountDownPre(len) {
    var a;

    a = new Array(len);
    while (--len >= 0) {
        a[len] = 0;
    }
    return a;
}

function makeWithCountDownPost(len) {
    var a;

    a = new Array(len);
    while (len-- > 0) {
        a[len] = 0;
    }
    return a;
}

function makeWithCountUp(len) {
    var a, i;

    a = new Array(len);
    for (i = 0; i < len; ++i) {
        a[i] = 0;
    }
    return a;
}

function makeWithCountDownArrayUp(len) {
    var a, i;

    a = new Array(len);
    i = 0;
    while (--len >= 0) {
        a[i++] = 0;
    }
    return a;
}

function makeWithConcat(len) {
    var a, rem, currlen;

    if (len == 0) {
        return [];
    }
    a = [0];
    currlen = 1;
    while (currlen < len) {
        rem = len - currlen;
        if (rem < currlen) {
            a = a.concat(a.slice(0, rem));
        }
        else {
            a = a.concat(a);
        }
        currlen = a.length;
    }
    return a;
}

function log(msg) {
    $('log').appendChild(new Element('p').update(msg));
}
</script>
</head>
<body><div>
<label for='txtLength'>Length:</label><input type='text' id='txtLength' value='10000'>
<br><label for='txtLoops'>Loops:</label><input type='text' id='txtLoops' value='10'>
<div id='checkboxes'></div>
<br><input type='button' id='btnTest' value='Test'>
<hr>
<div id='log'></div>
</div></body>
</html>

Domyślnie Uint8Array, Uint16Arrayoraz Uint32Arrayzajęcia zachować jej wartości jako zera, więc nie potrzeba żadnych skomplikowanych technik napełniania, po prostu zrobić:

var ary = new Uint8Array(10);

wszystkie elementy tablicy arybędą domyślnie zerami.

Jeśli używasz ES6, możesz użyć Array.from () w następujący sposób:

Array.from({ length: 3 }, () => 0);
//[0, 0, 0]

Ma taki sam wynik jak

Array.from({ length: 3 }).map(() => 0)
//[0, 0, 0]

Ponieważ

Array.from({ length: 3 })
//[undefined, undefined, undefined]

function makeArrayOf(value, length) {
  var arr = [], i = length;
  while (i--) {
    arr[i] = value;
  }
  return arr;
}

makeArrayOf(0, 5); // [0, 0, 0, 0, 0]

makeArrayOf('x', 3); // ['x', 'x', 'x']

Należy pamiętać, że whilejest zwykle bardziej wydajne niż for-in, forEachitp

za pomocą notacji obiektowej

var x = [];

zero wypełnione? lubić...

var x = [0,0,0,0,0,0];

wypełnione „niezdefiniowanym” ...

var x = new Array(7);

notacja obj z zerami

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

Na marginesie, jeśli zmodyfikujesz prototyp Array, oba

var x = new Array();

i

var y = [];

będą miały te prototypowe modyfikacje

W każdym razie nie przejmowałbym się zbytnio wydajnością ani szybkością tej operacji, istnieje wiele innych rzeczy, które prawdopodobnie będziesz robić, które są o wiele bardziej marnotrawne i kosztowne niż wprowadzanie tablicy o dowolnej długości zawierającej zera.

Testowałem wszystkie kombinacje wstępnego przydzielania / nieprzydzielania wstępnego, liczenia w górę / w dół oraz pętli for / while w IE 6/7/8, Firefox 3.5, Chrome i Opera.

Poniższe funkcje były konsekwentnie najszybsze lub bardzo zbliżone w Firefoksie, Chrome i IE8 i niewiele wolniejsze niż najszybsze w Operze i IE 6. Jest to również najprostsze i najczystsze moim zdaniem. Znalazłem kilka przeglądarek, w których wersja pętli while jest nieco szybsza, więc dołączam ją również w celach informacyjnych.

function newFilledArray(length, val) {
    var array = [];
    for (var i = 0; i < length; i++) {
        array[i] = val;
    }
    return array;
}

lub

function newFilledArray(length, val) {
    var array = [];
    var i = 0;
    while (i < length) {
        array[i++] = val;
    }
    return array;
}

Jeśli podczas wykonywania kodu musisz utworzyć wiele wypełnionych zerami tablic o różnych długościach, najszybszym sposobem, jaki udało mi się to osiągnąć, jest utworzenie tablicy zerowej jeden raz , przy użyciu jednej z metod wymienionych w tym temacie, o długości które, jak wiesz, nigdy nie zostanie przekroczone, a następnie pokrój tę tablicę w razie potrzeby.

Na przykład (używając funkcji z wybranej powyżej odpowiedzi do zainicjowania tablicy), utwórz tablicę wypełnioną zerami o długości maxLength , jako zmienną widoczną dla kodu, który potrzebuje tablic zerowych:

var zero = newFilledArray(maxLength, 0);

Teraz pokrój tę tablicę za każdym razem, gdy potrzebujesz wymaganej zerowej tablicy o wymaganej długości Długość < max Długość :

zero.slice(0, requiredLength);

Podczas wykonywania mojego kodu tysiące razy tworzyłem tablice wypełnione zerami, co ogromnie przyspieszyło ten proces.

function zeroFilledArray(size) {
    return new Array(size + 1).join('0').split('');
}

Nie mam nic przeciwko:

Array.apply(null, Array(5)).map(Number.prototype.valueOf,0);
new Array(5+1).join('0').split('').map(parseFloat);

sugerowane przez Zertosha, ale w nowych rozszerzeniach macierzy ES6 pozwala to robić natywnie za pomocą fillmetody. Teraz IE edge, Chrome i FF obsługuje to, ale sprawdź tabelę kompatybilności

new Array(3).fill(0)da ci [0, 0, 0]. Możesz wypełnić tablicę dowolną wartością, taką jak new Array(5).fill('abc')(nawet obiekty i inne tablice).

Ponadto możesz modyfikować poprzednie tablice za pomocą fill:

arr = [1, 2, 3, 4, 5, 6]
arr.fill(9, 3, 5)  # what to fill, start, end

co daje ci: [1, 2, 3, 9, 9, 6]

Sposób, w jaki zwykle to robię (i jest niesamowicie szybki), to używanie Uint8Array. Na przykład, tworzenie wektora wypełnionego zerami elementów 1M:

  var zeroFilled = [].slice.apply(new Uint8Array(1000000))

Jestem użytkownikiem Linuksa i zawsze dla mnie pracował, ale kiedyś znajomy korzystający z komputera Mac miał pewne niezerowe elementy. Myślałem, że jego maszyna działa nieprawidłowo, ale wciąż jest to najbezpieczniejszy sposób, aby go naprawić:

  var zeroFilled = [].slice.apply(new Uint8Array(new Array(1000000)) 

Edytowane

Chrome 25.0.1364.160

1. Frederik Gottlieb - 6,43
2. Sam Barnum - 4,83
3. Eli - 3,68
4. Jozuego 2.91
5. Mathew Crumley - 2,67
6. bduran - 2,55
7. Ryż Allen - 2.11
8. kangax - 0,68
9. TJ Crowder - 0,67
10. zertosh - BŁĄD

Firefox 20.0

1. Ryż Allen - 1,85
2. Jozuego - 1,82
3. Mathew Crumley - 1,79
4. bduran - 1,37
5. Frederik Gottlieb - 0,67
6. Sam Barnum - 0,63
7. Eli - 0,59
8. kagax - 0,13
9. TJ Crowder - 0,13
10. zertosh - BŁĄD

Brakuje najważniejszego testu (przynajmniej dla mnie): Node.js. Podejrzewam, że jest zbliżony do testu porównawczego Chrome.

Za pomocą lodash lub podkreślenia

_.range(0, length - 1, 0);

Lub jeśli masz tablicę i chcesz tablicę o tej samej długości

array.map(_.constant(0));

Rozwiązanie ES6:

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

Od ECMAScript2016 istnieje jeden jasny wybór dla dużych tablic.

Ponieważ ta odpowiedź wciąż pojawia się u góry w wynikach wyszukiwania Google, oto odpowiedź na rok 2017.

Oto aktualny jsbench z kilkoma popularnymi metodami, w tym wieloma zaproponowanymi do tej pory na to pytanie. Jeśli znajdziesz lepszą metodę, dodaj, rozwidlaj i udostępniaj.

Chcę zauważyć, że nie ma naprawdę najbardziej efektywnego sposobu na utworzenie tablicy o dowolnej długości wypełnionej zerą. Możesz zoptymalizować szybkość, jasność i łatwość konserwacji - albo można uznać, że jest to bardziej wydajny wybór w zależności od potrzeb projektu.

Podczas optymalizacji prędkości chcesz: utworzyć tablicę przy użyciu składni literalnej; ustaw długość, zainicjuj zmienną iteracyjną i iteruj po tablicy za pomocą pętli while. Oto przykład.

const arr = [];
arr.length = 120000;
let i = 0;
while (i < 120000) {
  arr[i] = 0;
  i++;
}

Inną możliwą implementacją byłoby:

(arr = []).length = n;
let i = 0;
while (i < n) {
    arr[i] = 0;
    i++;
}

Ale zdecydowanie odradzam stosowanie tej drugiej implantacji w praktyce, ponieważ jest ona mniej przejrzysta i nie pozwala zachować zakresu bloków w zmiennej tablicowej.

Są one znacznie szybsze niż wypełnianie pętli for i około 90% szybciej niż standardowa metoda

const arr = Array(n).fill(0);

Jednak ta metoda wypełniania jest nadal najbardziej wydajnym wyborem dla mniejszych tablic ze względu na jej przejrzystość, zwięzłość i łatwość konserwacji. Różnica w wydajności prawdopodobnie Cię nie zabije, chyba że wykonasz wiele tablic o długości rzędu tysięcy lub więcej.

Kilka innych ważnych uwag. Większość przewodników po stylu zaleca, aby nie używać już varbez specjalnego powodu podczas używania ES6 lub nowszego. Użyj constdla zmiennych, które nie zostaną ponownie zdefiniowane, i letdla zmiennych, które będą. MDN i Airbnb za Style Guide to wspaniałe miejsca, aby znaleźć więcej informacji na temat najlepszych praktyk. Pytania nie dotyczyły składni, ale ważne jest, aby ludzie nowi w JS wiedzieli o tych nowych standardach podczas przeszukiwania tych rygli starych i nowych odpowiedzi.

Aby utworzyć zupełnie nową macierz

new Array(arrayLength).fill(0);

Aby dodać niektóre wartości na końcu istniejącej tablicy

[...existingArray, ...new Array(numberOfElementsToAdd).fill(0)]

Przykład

//**To create an all new Array**

console.log(new Array(5).fill(0));

//**To add some values at the end of an existing Array**

let existingArray = [1,2,3]

console.log([...existingArray, ...new Array(5).fill(0)]);

Nie widziałem tej metody w odpowiedziach, więc oto ona:

"0".repeat( 200 ).split("").map( parseFloat )

W rezultacie otrzymasz tablicę o wartości zerowej o długości 200:

[ 0, 0, 0, 0, ... 0 ]

Nie jestem pewien wydajności tego kodu, ale nie powinno to stanowić problemu, jeśli używasz go do stosunkowo małych tablic.

Ta concatwersja jest znacznie szybsza w moich testach na Chrome (2013-03-21). Około 200 ms dla 10 000 000 elementów w porównaniu z 675 dla prostego init.

function filledArray(len, value) {
    if (len <= 0) return [];
    var result = [value];
    while (result.length < len/2) {
        result = result.concat(result);
    }
    return result.concat(result.slice(0, len-result.length));
}

Bonus: jeśli chcesz wypełnić tablicę ciągami, jest to zwięzły sposób na zrobienie tego (nie tak szybko, jak concatgdyby):

function filledArrayString(len, value) {
    return new Array(len+1).join(value).split('');
}

Testowałem świetną odpowiedź TJ Crowdera i wymyśliłem rekurencyjne scalanie oparte na rozwiązaniu konkat, które przewyższa wszelkie w swoich testach w Chrome (nie testowałem innych przeglądarek).

function makeRec(len, acc) {
    if (acc == null) acc = [];
    if (len <= 1) return acc;
    var b = makeRec(len >> 1, [0]);
    b = b.concat(b);
    if (len & 1) b = b.concat([0]);
    return b;
},

wywołaj metodę za pomocą makeRec(29).

Co new Array(51).join('0').split('')?

Warto zauważyć, że Array.prototype.fillzostał dodany w ramach propozycji ECMAScript 6 (Harmonia) . Wolę pójść z polifillem napisanym poniżej, zanim rozważę inne opcje wymienione w wątku.

if (!Array.prototype.fill) {
  Array.prototype.fill = function(value) {

    // Steps 1-2.
    if (this == null) {
      throw new TypeError('this is null or not defined');
    }

    var O = Object(this);

    // Steps 3-5.
    var len = O.length >>> 0;

    // Steps 6-7.
    var start = arguments[1];
    var relativeStart = start >> 0;

    // Step 8.
    var k = relativeStart < 0 ?
      Math.max(len + relativeStart, 0) :
      Math.min(relativeStart, len);

    // Steps 9-10.
    var end = arguments[2];
    var relativeEnd = end === undefined ?
      len : end >> 0;

    // Step 11.
    var final = relativeEnd < 0 ?
      Math.max(len + relativeEnd, 0) :
      Math.min(relativeEnd, len);

    // Step 12.
    while (k < final) {
      O[k] = value;
      k++;
    }

    // Step 13.
    return O;
  };
}

Najkrótszy dla kodu pętli

a=i=[];for(;i<100;)a[i++]=0;

edit:
for(a=i=[];i<100;)a[i++]=0;
or
for(a=[],i=100;i--;)a[i]=0;

Bezpieczna wersja var

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

edit:
for(var i=100,a=[];i--;)a[i]=0;

Moją najszybszą funkcją byłoby:

function newFilledArray(len, val) {
    var a = [];
    while(len--){
        a.push(val);
    }
    return a;
}

var st = (new Date()).getTime();
newFilledArray(1000000, 0)
console.log((new Date()).getTime() - st); // returned 63, 65, 62 milliseconds

Używanie natywnego push i shift do dodawania elementów do tablicy jest znacznie szybsze (około 10 razy) niż deklarowanie zakresu tablicy i odwoływanie się do każdego elementu w celu ustawienia jego wartości.

fyi: Konsekwentnie otrzymuję szybsze czasy dzięki pierwszej pętli, która się odlicza, gdy uruchamiam to w firebug (rozszerzenie firefox).

var a = [];
var len = 1000000;
var st = (new Date()).getTime();
while(len){
    a.push(0);
    len -= 1;
}
console.log((new Date()).getTime() - st); // returned 863, 894, 875 milliseconds
st = (new Date()).getTime();
len = 1000000;
a = [];
for(var i = 0; i < len; i++){
    a.push(0);
}
console.log((new Date()).getTime() - st); // returned 1155, 1179, 1163 milliseconds

Chcę wiedzieć, co robi z tego TJ Crowder? :-)

Wiedziałem, że mam gdzieś ten proto :)

Array.prototype.init = function(x,n)
{
    if(typeof(n)=='undefined') { n = this.length; }
    while (n--) { this[n] = x; }
    return this;
}

var a = (new Array(5)).init(0);

var b = [].init(0,4);

Edycja: testy

W odpowiedzi na Joshua i inne metody przeprowadziłem własne testy porównawcze i widzę zupełnie inne wyniki niż te zgłoszone.

Oto co przetestowałem:

//my original method
Array.prototype.init = function(x,n)
{
    if(typeof(n)=='undefined') { n = this.length; }
    while (n--) { this[n] = x; }
    return this;
}

//now using push which I had previously thought to be slower than direct assignment
Array.prototype.init2 = function(x,n)
{
    if(typeof(n)=='undefined') { n = this.length; }
    while (n--) { this.push(x); }
    return this;
}

//joshua's method
function newFilledArray(len, val) {
    var a = [];
    while(len--){
        a.push(val);
    }
    return a;
}

//test m1 and m2 with short arrays many times 10K * 10

var a = new Date();
for(var i=0; i<10000; i++)
{
    var t1 = [].init(0,10);
}
var A = new Date();

var b = new Date();
for(var i=0; i<10000; i++)
{
    var t2 = [].init2(0,10);
}
var B = new Date();

//test m1 and m2 with long array created once 100K

var c = new Date();
var t3 = [].init(0,100000);
var C = new Date();

var d = new Date();
var t4 = [].init2(0,100000);
var D = new Date();

//test m3 with short array many times 10K * 10

var e = new Date();
for(var i=0; i<10000; i++)
{
    var t5 = newFilledArray(10,0);
}
var E = new Date();

//test m3 with long array created once 100K

var f = new Date();
var t6 = newFilledArray(100000, 0)
var F = new Date();

Wyniki:

IE7 deltas:
dA=156
dB=359
dC=125
dD=375
dE=468
dF=412

FF3.5 deltas:
dA=6
dB=13
dC=63
dD=8
dE=12
dF=8

Według mojego obliczenia push jest generalnie wolniejszy, ale działa lepiej z dłuższymi tablicami w FF, ale gorzej w IE, który po prostu jest do kitu (niespodzianka quel).

Funkcja anonimowa:

(function(n) { while(n-- && this.push(0)); return this; }).call([], 5);
// => [0, 0, 0, 0, 0]

Nieco krótszy z pętlą for:

(function(n) { for(;n--;this.push(0)); return this; }).call([], 5);
// => [0, 0, 0, 0, 0]

Działa z każdym Object, wystarczy zmienić to, co jest w środku this.push().

Możesz nawet zapisać funkcję:

function fill(size, content) {
  for(;size--;this.push(content));
  return this;
}

Zadzwoń, używając:

var helloArray = fill.call([], 5, 'hello');
// => ['hello', 'hello', 'hello', 'hello', 'hello']

Dodawanie elementów do już istniejącej tablicy:

var helloWorldArray = fill.call(helloArray, 5, 'world');
// => ['hello', 'hello', 'hello', 'hello', 'hello', 'world', 'world', 'world', 'world', 'world']

Wydajność: http://jsperf.com/zero-filled-array-creation/25