วิธีที่มีประสิทธิภาพที่สุดในการสร้างอาร์เรย์ที่เติมเต็มความยาวเป็นศูนย์ใน JavaScript คืออะไร?

Array.prototype.fillแนะนำ ES6 มันสามารถใช้เช่นนี้:

new Array(len).fill(0);

ไม่แน่ใจว่ามันเร็ว แต่ฉันชอบเพราะสั้นและอธิบายตัวเองได้

ก็ยังคงไม่ได้อยู่ใน IE ( เข้ากันได้ตรวจสอบ ) แต่มีpolyfill ใช้ได้

แม้ว่านี่จะเป็นเธรดเก่า แต่ฉันต้องการเพิ่ม 2 เซนต์ของฉันลงไป ไม่แน่ใจว่านี่ช้า / เร็วแค่ไหน แต่มันก็เป็นซับรวดเร็ว นี่คือสิ่งที่ฉันทำ:

หากฉันต้องการกรอกหมายเลขล่วงหน้า:

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

หากฉันต้องการเติมสตริงล่วงหน้า:

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

คำตอบอื่น ๆ ได้แนะนำ:

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

แต่ถ้าคุณต้องการ 0 (ตัวเลข) และไม่ใช่ "0" (ศูนย์ภายในสตริง) คุณสามารถทำได้:

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

วิธีที่สวยงามในการเติมอาร์เรย์ด้วยค่าที่คำนวณล่วงหน้า

นี่เป็นอีกวิธีในการใช้ ES6 ที่ไม่มีใครพูดถึง:

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

มันทำงานได้โดยผ่านฟังก์ชั่นแผนที่เป็นพารามิเตอร์ที่สองของ Array.fromมันทำงานโดยผ่านฟังก์ชั่นแผนที่เป็นพารามิเตอร์ที่สองของ

ในตัวอย่างข้างต้นพารามิเตอร์แรกจัดสรรอาร์เรย์ 3 ตำแหน่งที่เติมด้วยค่าundefinedจากนั้นฟังก์ชัน lambda จะจับคู่แต่ละค่ากับค่า0แล้วฟังก์ชั่นแลมบ์ดาแผนที่หนึ่งของพวกเขาแต่ละค่า

แม้ว่าArray(len).fill(0)จะสั้นกว่า แต่ก็ไม่ได้ผลถ้าคุณต้องการเติมอาร์เรย์ด้วยการคำนวณบางอย่างก่อน(ฉันรู้ว่าคำถามไม่ได้ถาม แต่มีคนมากมายที่มาหาที่นี่)แต่คนจำนวนมากจะจบลงที่นี่มองหานี้)

ตัวอย่างเช่นหากคุณต้องการอาร์เรย์ที่มีตัวเลขสุ่ม 10 ตัว:

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

มันกระชับมากขึ้น (และสง่างาม) มากกว่าสิ่งที่เทียบเท่า:

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

วิธีนี้ยังสามารถใช้เพื่อสร้างลำดับของตัวเลขโดยใช้ประโยชน์จากพารามิเตอร์ดัชนีที่มีให้ในการเรียกกลับ:

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

คำตอบโบนัส: เติมอาร์เรย์โดยใช้ String repeat()

เนื่องจากคำตอบนี้ได้รับความสนใจเป็นอย่างมากฉันจึงต้องการแสดงกลเม็ดเด็ดพรายนี้ แม้ว่าจะไม่ได้มีประโยชน์เท่าคำตอบหลักของฉัน แต่จะแนะนำrepeat()วิธีการสตริงที่ยังไม่ค่อยมีใครรู้จัก แต่มีประโยชน์มาก นี่คือเคล็ดลับ:

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

เจ๋งใช่มั้ย repeat()เป็นวิธีที่มีประโยชน์มากในการสร้างสตริงที่มีการทำซ้ำของสายอักขระในจำนวนครั้งที่แน่นอน หลังจากนั้นsplit()สร้างอาร์เรย์ให้เราซึ่งจากนั้นmap()ไปที่ค่าที่เราต้องการ ทำลายมันลงในขั้นตอน:

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

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

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

ในระยะสั้น

ทางออกที่เร็วที่สุด

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

ทางออกที่สั้นที่สุด (มีประโยชน์) (ช้าลง 3 เท่าสำหรับอาร์เรย์ขนาดเล็ก, ช้าลงเล็กน้อยสำหรับใหญ่ (ช้าที่สุดบน Firefox))

Array(n).fill(0)

รายละเอียด

วันนี้ 2020.06.09 ฉันทำการทดสอบบน macOS High Sierra 10.13.6 บนเบราว์เซอร์ Chrome 83.0, Firefox 77.0 และ Safari 13.1 ฉันทดสอบโซลูชันที่เลือกสำหรับกรณีทดสอบสองกรณี

• อาร์เรย์ขนาดเล็ก - มี 10 องค์ประกอบ - คุณสามารถทำการทดสอบ นี่
• อาร์เรย์ขนาดใหญ่ - พร้อมองค์ประกอบ 1M - คุณสามารถทำการทดสอบได้ที่นี่

สรุปผลการวิจัย

• วิธีการแก้ปัญหาขึ้นอยู่กับ new Array(n)+for (N) เป็นวิธีแก้ปัญหาที่เร็วที่สุดสำหรับอาร์เรย์ขนาดเล็กและอาร์เรย์ขนาดใหญ่ (ยกเว้น Chrome แต่ยังเร็วมาก) และแนะนำให้ใช้เป็นโซลูชันข้ามเบราว์เซอร์ที่รวดเร็ว
• วิธีการแก้ปัญหาตามnew Float32Array(n)(I) ส่งกลับไม่ใช่อาร์เรย์ทั่วไป (เช่นคุณไม่สามารถโทรpush(..)ได้) ดังนั้นฉันจึงไม่เปรียบเทียบผลลัพธ์กับโซลูชันอื่น ๆ - อย่างไรก็ตามโซลูชันนี้เร็วกว่าประมาณ 10-20 เท่าเมื่อเทียบกับโซลูชันอื่น ๆ สำหรับเบราว์เซอร์ขนาดใหญ่
• โซลูชั่นบนพื้นฐานของ for (L, M, N, O) นั้นรวดเร็วสำหรับอาร์เรย์ขนาดเล็ก
• โซลูชั่นบนพื้นฐานของ fill (B, C) นั้นรวดเร็วบน Chrome และ Safari แต่ช้าที่สุดใน Firefox สำหรับอาร์เรย์ขนาดใหญ่ มีขนาดกลางเร็วสำหรับอาร์เรย์ขนาดเล็ก
• วิธีการแก้ปัญหาตามArray.apply(P) พ่นข้อผิดพลาดสำหรับอาร์เรย์ขนาดใหญ่

  แสดงตัวอย่างโค้ด

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

  เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์

  ขยายตัวอย่างข้อมูล

รหัสและตัวอย่าง

โค้ดด้านล่างแสดงโซลูชันที่ใช้ในการวัด

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

[A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R].forEach(f => {
  let a = f(10); 
  console.log(`${f.name} length=${a.length}, arr[0]=${a[0]}, arr[9]=${a[9]}`)
});

This snippets only present used codes

ตัวอย่างผลลัพธ์สำหรับ Chrome

วิธีการเติม ES 6 ที่กล่าวถึงแล้วจะดูแลเรื่องนี้เป็นอย่างดี เบราว์เซอร์เดสก์ท็อปที่ทันสมัยส่วนใหญ่สนับสนุนวิธีแบบ Array ต้นที่ต้องการแล้วในปัจจุบัน (Chromium, FF, Edge และ Safari) [ 1 ] คุณสามารถดูรายละเอียดเกี่ยวกับMDN ตัวอย่างการใช้งานที่เรียบง่ายคือ

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

เมื่อได้รับการสนับสนุนเบราว์เซอร์ปัจจุบันคุณควรใช้ความระมัดระวังหากคุณไม่แน่ใจว่าผู้ชมของคุณใช้เบราว์เซอร์เดสก์ท็อปที่ทันสมัย

หมายเหตุเพิ่มสิงหาคม 2013, ปรับปรุงกุมภาพันธ์ 2015: คำตอบด้านล่างจาก 2009 เกี่ยวข้องกับArrayประเภททั่วไปของ JavaScript ไม่เกี่ยวข้องกับอาร์เรย์ที่พิมพ์ใหม่กว่าที่กำหนดใน ES2015 [และมีให้ใช้งานในเบราว์เซอร์จำนวนมาก] Int32Arrayเช่นนี้ นอกจากนี้โปรดทราบว่า ES2015 เพิ่มfillวิธีการทั้งอาร์เรย์และอาร์เรย์ที่พิมพ์ซึ่งน่าจะเป็นวิธีที่มีประสิทธิภาพที่สุดในการกรอกข้อมูล ...

นอกจากนี้ยังสามารถสร้างความแตกต่างใหญ่สำหรับการใช้งานบางอย่างว่าคุณสร้างอาร์เรย์ โดยเฉพาะอย่างยิ่งเอ็นจิ้น V8 ของ Chrome พยายามที่จะใช้อาเรย์หน่วยความจำที่ต่อเนื่องและมีประสิทธิภาพสูงหากคิดว่ามันสามารถเปลี่ยนเป็นอาเรย์แบบออบเจ็กต์เมื่อจำเป็นเท่านั้น

ด้วยภาษาส่วนใหญ่จะได้รับการจัดสรรล่วงหน้าจากนั้นเติมศูนย์แบบนี้:

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

แต่อาร์เรย์ของ JavaScript ไม่ได้เป็นอาร์เรย์จริงๆมันเป็นคีย์แผนที่ / ค่าเช่นเดียวกับวัตถุ JavaScript อื่น ๆ ดังนั้นจึงไม่มี "การจัดสรรล่วงหน้า" ที่ต้องทำ (การตั้งค่าความยาวไม่ได้เป็นการจัดสรรช่องที่จะเติม) และ มีเหตุผลใดที่เชื่อได้ว่าประโยชน์ของการนับเป็นศูนย์ (ซึ่งเป็นเพียงเพื่อทำการเปรียบเทียบในลูปอย่างรวดเร็ว) ไม่เกินดุลโดยการเพิ่มคีย์ในลำดับย้อนกลับเมื่อการนำไปปฏิบัติอาจเพิ่มประสิทธิภาพการจัดการคีย์ เกี่ยวข้องกับอาร์เรย์ในทฤษฎีที่คุณมักทำตามลำดับ

ในความเป็นจริง Matthew Crumley ชี้ให้เห็นว่าการนับถอยหลังช้าลงอย่างเห็นได้ชัดบน Firefox มากกว่าการนับผลลัพธ์ที่ฉันยืนยันได้ - เป็นส่วนของอาร์เรย์ (การวนซ้ำลงไปที่ศูนย์ยังคงเร็วกว่า เห็นได้ชัดว่าการเพิ่มองค์ประกอบให้กับอาร์เรย์ในลำดับย้อนกลับเป็น op ที่ช้าใน Firefox อันที่จริงผลลัพธ์นั้นแตกต่างกันเล็กน้อยโดยการใช้งาน JavaScript (ซึ่งไม่ใช่สิ่งที่น่าแปลกใจ) ต่อไปนี้เป็นหน้าทดสอบที่รวดเร็วและสกปรก (ด้านล่าง) สำหรับการใช้งานเบราว์เซอร์ (สกปรกมากไม่ให้ผลในระหว่างการทดสอบดังนั้นให้ข้อเสนอแนะน้อยที่สุดและจะทำงานโดยไม่ จำกัด เวลาสคริปต์) ฉันขอแนะนำให้รีเฟรชระหว่างการทดสอบ FF (อย่างน้อย) ช้าลงในการทดสอบซ้ำหากคุณไม่ทำ

เวอร์ชันที่ค่อนข้างซับซ้อนที่ใช้ Array # concat นั้นเร็วกว่า init โดยตรงบน FF เนื่องจากอยู่ระหว่าง 1,000 ถึง 2,000 อาร์เรย์ อย่างไรก็ตามในเครื่องมือ V8 ของ Chrome การชนะโดยตรงจะชนะทุกครั้ง ...

นี่คือหน้าทดสอบ ( สำเนาสด ):

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

โดยค่าเริ่มต้นUint8Array, Uint16ArrayและUint32Arrayชั้นเรียนให้ศูนย์เป็นค่าของตนเพื่อให้คุณไม่จำเป็นต้องกรอกข้อมูลใด ๆ เทคนิคที่ซับซ้อนเพียงแค่ทำ:

var ary = new Uint8Array(10);

องค์ประกอบทั้งหมดของอาร์เรย์aryจะเป็นศูนย์โดยค่าเริ่มต้น

ถ้าคุณใช้ ES6 คุณสามารถใช้Array.from ()ดังนี้:

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

มีผลเช่นเดียวกัน

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

เพราะ

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

โปรดทราบว่าwhileจะมีประสิทธิภาพมากกว่ามักจะfor-in, forEachฯลฯ

ใช้สัญกรณ์วัตถุ

var x = [];

เต็มไปด้วยศูนย์? ชอบ...

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

เต็มไปด้วย 'ไม่ได้กำหนด' ...

var x = new Array(7);

สัญกรณ์ obj กับศูนย์

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

ในฐานะที่เป็นบันทึกด้านข้างหากคุณปรับเปลี่ยนต้นแบบของ Array ทั้งคู่

var x = new Array();

และ

var y = [];

จะมีการดัดแปลงต้นแบบเหล่านั้น

ฉันจะไม่กังวลกับประสิทธิภาพหรือความเร็วของการดำเนินการมากเกินไปมีหลายสิ่งหลายอย่างที่คุณน่าจะทำซึ่งมีความสิ้นเปลืองและมีราคาแพงกว่าการติดตั้งความยาวโดยพลการที่มีเลขศูนย์

ฉันได้ทดสอบการรวมกันของการจัดสรรล่วงหน้า / ไม่จัดสรรล่วงหน้านับรวมขึ้น / ลงและ / ในขณะที่ลูปใน IE 6/7/8, Firefox 3.5, Chrome และ Opera

ฟังก์ชั่นด้านล่างนั้นเร็วที่สุดหรือใกล้เคียงที่สุดใน Firefox, Chrome และ IE8 อย่างช้าๆและไม่ช้าไปกว่า Opera และ IE 6 ที่เร็วที่สุดเท่าไหร่มันยังง่ายและชัดเจนที่สุดในความคิดของฉัน ฉันพบเบราว์เซอร์หลายตัวที่ขณะที่รุ่นลูปนั้นเร็วขึ้นเล็กน้อยดังนั้นฉันจึงรวมเอาไว้อ้างอิงด้วย

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

หรือ

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

หากคุณต้องการสร้างอาร์เรย์ที่เติมศูนย์จำนวนมากที่มีความยาวต่างกันระหว่างการประมวลผลโค้ดของคุณวิธีที่เร็วที่สุดที่ฉันพบเพื่อบรรลุเป้าหมายนี้คือการสร้างอาร์เรย์ศูนย์หนึ่งครั้งโดยใช้วิธีใดวิธีหนึ่งที่กล่าวถึงในหัวข้อนี้ ที่คุณรู้ว่าจะไม่มีวันเกินจากนั้นหั่นส่วนนั้นตามความจำเป็น

ตัวอย่างเช่น (ใช้ฟังก์ชั่นจากคำตอบที่เลือกไว้ด้านบนเพื่อเริ่มต้นอาร์เรย์) สร้างอาร์เรย์ที่เต็มไปด้วยความยาวmaxLength แบบศูนย์ซึ่งเป็นตัวแปรที่มองเห็นได้จากโค้ดที่ต้องใช้ศูนย์อาร์เรย์:

var zero = newFilledArray(maxLength, 0);

ตอนนี้ฝานอาร์เรย์นี้ทุกครั้งที่คุณต้องการอาเรย์ที่เต็มไปด้วยความยาวที่ต้องการความยาวความยาว< maxLength :

zero.slice(0, requiredLength);

ฉันกำลังสร้างอาร์เรย์ที่กรอกข้อมูลเป็นศูนย์เป็นพัน ๆ ครั้งในระหว่างการประมวลผลโค้ดของฉันซึ่งทำให้กระบวนการเร็วขึ้นอย่างมาก

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

ฉันไม่มีอะไรกับ:

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

แนะนำโดย Zertosh แต่ในส่วนขยายของอาร์เรย์ES6 ใหม่ช่วยให้คุณสามารถทำสิ่งนี้ได้ด้วยfillวิธีการ ตอนนี้ขอบ IE, Chrome และ FF รองรับ แต่ตรวจสอบตารางความเข้ากันได้

new Array(3).fill(0)[0, 0, 0]จะทำให้คุณ คุณสามารถเติมอาร์เรย์ด้วยค่าใด ๆ เช่นnew Array(5).fill('abc')(แม้วัตถุและอาร์เรย์อื่น ๆ )

ด้านบนของที่คุณสามารถแก้ไขอาร์เรย์ก่อนหน้าด้วยการเติม:

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

ซึ่งให้คุณ: [1, 2, 3, 9, 9, 6]

วิธีที่ฉันมักจะทำมัน (และเป็นไปอย่างรวดเร็วที่น่าตื่นตาตื่นใจ) Uint8Arrayคือการใช้ ตัวอย่างเช่นการสร้างเวกเตอร์ที่เติมศูนย์ขององค์ประกอบ 1M:

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

ฉันเป็นผู้ใช้ Linux และมักจะทำงานให้ฉันได้ แต่เมื่อเพื่อนที่ใช้ Mac มีองค์ประกอบที่ไม่ใช่ศูนย์ ฉันคิดว่าเครื่องของเขาทำงานผิดปกติ แต่ก็ยังเป็นวิธีที่ปลอดภัยที่สุดที่เราพบในการแก้ไข:

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

แก้ไข

Chrome 25.0.1364.160

1. Frederik Gottlieb - 6.43
2. Sam Barnum - 4.83
3. อีไล - 3.68
4. โจชัว 2.91
5. Mathew Crumley - 2.67
6. bduran - 2.55
7. ข้าวอัลเลน - 2.11
8. Kangax - 0.68
9. Tj Crowder - 0.67
10. zertosh - ข้อผิดพลาด

Firefox 20.0

1. ข้าวอัลเลน - 1.85
2. โจชัว - 1.82
3. Mathew Crumley - 1.79
4. bduran - 1.37
5. Frederik Gottlieb - 0.67
6. Sam Barnum - 0.63
7. อีไล - 0.59
8. kagax - 0.13
9. Tj Crowder - 0.13
10. zertosh - ข้อผิดพลาด

พลาดการทดสอบที่สำคัญที่สุด (อย่างน้อยสำหรับฉัน): การทดสอบ Node.js ฉันสงสัยว่าใกล้กับเกณฑ์มาตรฐานของ Chrome

ใช้lodashหรือขีดล่าง

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

หรือถ้าคุณมีอาร์เรย์อยู่แล้วและคุณต้องการอาร์เรย์ที่มีความยาวเท่ากัน

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

โซลูชัน ES6:

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

ในฐานะของECMAScript2016มีตัวเลือกหนึ่งที่ชัดเจนสำหรับอาร์เรย์ขนาดใหญ่

เนื่องจากคำตอบนี้ยังปรากฏใกล้ด้านบนสุดของการค้นหาของ Google นี่คือคำตอบสำหรับปี 2017

ต่อไปนี้เป็นjsbenchปัจจุบันที่มีวิธีการที่ได้รับความนิยมไม่กี่โหล หากคุณพบวิธีที่ดีกว่าโปรดเพิ่มแยกและแบ่งปัน

ฉันต้องการที่จะทราบว่าไม่มีจริงวิธีที่มีประสิทธิภาพที่สุดในการสร้างอาร์เรย์ที่เต็มไปด้วยความยาวเป็นศูนย์โดยพลการ คุณสามารถปรับให้เหมาะสมสำหรับความเร็วหรือเพื่อความชัดเจนและการบำรุงรักษา - สามารถพิจารณาตัวเลือกที่มีประสิทธิภาพมากขึ้นขึ้นอยู่กับความต้องการของโครงการ

เมื่อปรับให้เหมาะสมกับความเร็วคุณต้องการ: สร้างอาร์เรย์โดยใช้ไวยากรณ์ตามตัวอักษร ตั้งค่าความยาวเริ่มต้นการวนซ้ำตัวแปรและวนซ้ำผ่านอาร์เรย์โดยใช้ลูป while นี่คือตัวอย่าง

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

การติดตั้งอื่นที่เป็นไปได้คือ:

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

แต่ฉันไม่แนะนำให้ใช้การฝังครั้งที่สองในทางปฏิบัติเนื่องจากมีความชัดเจนน้อยกว่าและไม่อนุญาตให้คุณรักษาการบล็อกการกำหนดขอบเขตบนตัวแปรอาร์เรย์ของคุณ

สิ่งเหล่านี้เร็วกว่าการเติมด้วยห่วงอย่างมีนัยสำคัญและเร็วกว่าวิธีมาตรฐานประมาณ 90%

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

แต่วิธีการเติมนี้ยังคงเป็นตัวเลือกที่มีประสิทธิภาพมากที่สุดสำหรับอาร์เรย์ขนาดเล็กเนื่องจากความชัดเจนกระชับและบำรุงรักษา ความแตกต่างด้านประสิทธิภาพจะไม่ฆ่าคุณจนกว่าคุณจะสร้างอาร์เรย์จำนวนมากที่มีความยาวตามลำดับเป็นพันหรือมากกว่า

บันทึกย่อที่สำคัญอื่น ๆ คู่มือสไตล์ส่วนใหญ่แนะนำให้คุณไม่ใช้อีกต่อไปvarโดยไม่มีเหตุผลพิเศษเมื่อใช้ ES6 หรือใหม่กว่า ใช้constสำหรับตัวแปรที่จะไม่ถูกนิยามใหม่และletสำหรับตัวแปรที่จะ MDNและคู่มือสไตล์ของ Airbnbเป็นสถานที่ที่ดีที่จะไปสำหรับข้อมูลเพิ่มเติมเกี่ยวกับการปฏิบัติที่ดีที่สุด คำถามไม่ได้เกี่ยวกับไวยากรณ์ แต่สิ่งสำคัญคือผู้คนใหม่ ๆ ที่ JS ต้องรู้เกี่ยวกับมาตรฐานใหม่เหล่านี้เมื่อทำการค้นหารีมคำตอบเก่าและใหม่

เพื่อสร้าง Array ใหม่ทั้งหมด

new Array(arrayLength).fill(0);

เพื่อเพิ่มค่าบางอย่างในตอนท้ายของ Array ที่มีอยู่

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

ตัวอย่าง

//**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)]);

ไม่เห็นวิธีนี้ในคำตอบดังนั้นนี่คือ:

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

ดังนั้นคุณจะได้รับอาร์เรย์ที่มีค่าเป็นศูนย์ความยาว 200:

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

ฉันไม่แน่ใจเกี่ยวกับประสิทธิภาพของรหัสนี้ แต่มันไม่ควรเป็นปัญหาถ้าคุณใช้มันสำหรับอาร์เรย์ที่ค่อนข้างเล็ก

นี้concatรุ่นได้เร็วขึ้นมากในการทดสอบของฉันบน Chrome (2013/03/21) ประมาณ 200ms สำหรับ 10,000,000 องค์ประกอบ vs 675 สำหรับ 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));
}

โบนัส:ถ้าคุณต้องการเติมอาเรย์ของคุณด้วยสตริงนี่เป็นวิธีรัดกุมในการทำ (ไม่เร็วอย่างที่คิดconcat):

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

ฉันกำลังทดสอบคำตอบที่ยอดเยี่ยมโดย TJ Crowder และเกิดการรวมเวียนซ้ำตามโซลูชัน concat ที่มีประสิทธิภาพสูงกว่าการทดสอบของเขาใน Chrome (ฉันไม่ได้ทดสอบเบราว์เซอร์อื่น)

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

makeRec(29)เรียกวิธีการที่มี

เกี่ยวกับnew Array(51).join('0').split('')อะไร

มันอาจจะมีมูลค่าการชี้ให้เห็นว่าArray.prototype.fillได้รับการเพิ่มเป็นส่วนหนึ่งของECMAScript 6 (Harmony) ข้อเสนอ ฉันอยากไปกับ polyfill ที่เขียนด้านล่างก่อนที่จะพิจารณาตัวเลือกอื่น ๆ ที่กล่าวถึงในเธรด

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

สั้นที่สุดสำหรับลูปโค้ด

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;

รุ่น var ที่ปลอดภัย

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

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

ฟังก์ชั่นที่เร็วที่สุดของฉันคือ:

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

การใช้ Native Push and Shift เพื่อเพิ่มรายการในอาเรย์นั้นเร็วกว่ามาก (ประมาณ 10 เท่า) กว่าการประกาศขอบเขตอาเรย์และอ้างอิงแต่ละไอเท็มเพื่อกำหนดค่าของมัน

fyi: ฉันได้รับเวลาเร็วขึ้นอย่างต่อเนื่องกับลูปแรกซึ่งนับถอยหลังเมื่อใช้งานใน firebug (ส่วนขยาย 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

ฉันสนใจที่จะรู้ว่า TJ Crowder ทำอะไรได้บ้าง? :-)

ฉันรู้ว่าฉันมีโปรโตนี่ที่ไหนสักแห่ง :)

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

แก้ไข: การทดสอบ

ในการตอบสนองต่อโจชัวและวิธีอื่น ๆ ฉันใช้การเปรียบเทียบของตัวเองและฉันเห็นผลลัพธ์ที่แตกต่างอย่างสิ้นเชิงกับที่รายงาน

นี่คือสิ่งที่ฉันทดสอบ:

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

ผล:

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

ดังนั้นโดยการกดการคำนวณของฉันช้าลงโดยทั่วไป แต่ทำงานได้ดีขึ้นด้วยอาร์เรย์ที่ยาวขึ้นใน FF แต่แย่กว่านั้นใน IE ซึ่งแย่ลงโดยทั่วไป

ฟังก์ชั่นไม่ระบุชื่อ:

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

สั้นลงเล็กน้อยด้วย for-loop:

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

ทำงานร่วมกับใด ๆเพียงแค่เปลี่ยนสิ่งที่อยู่ภายในObjectthis.push()

คุณสามารถบันทึกฟังก์ชั่น:

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

เรียกมันว่าใช้:

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

การเพิ่มองค์ประกอบให้กับอาร์เรย์ที่มีอยู่แล้ว:

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

ประสิทธิภาพการทำงาน: http://jsperf.com/zero-filled-array-creation/25