在JavaScript中创建任意长度的零填充数组最有效的方法是什么?


使用对象表示法

var x = [];

零填充?喜欢

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

填充了“undefined”。。。

var x = new Array(7);

带零的obj符号

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

作为补充说明,如果修改Array的原型

var x = new Array();

and

var y = [];

将对原型进行修改

无论如何,我不会过分关注这个操作的效率或速度,你可能会做很多其他事情,这些事情比安装一个包含零的任意长度数组更浪费和昂贵。


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通常比in、forEach等更有效。


2013年8月添加的注释,2015年2月更新:以下2009年的答案与JavaScript的通用数组类型有关。它与ES2015中定义的较新类型数组(现在在许多浏览器中都可用)无关,如Int32Array等。还要注意,ES2015为数组和类型化数组都添加了填充方法,这可能是填充它们的最有效方法。。。

此外,它可以对某些实现的创建数组的方式产生很大的影响。特别是Chrome的V8引擎,如果它认为可以的话,它会尝试使用一个高效的、连续的内存数组,只有在必要的时候才转向基于对象的数组。


对于大多数语言,它将是预分配的,然后是零填充,如下所示:

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

但是,JavaScript数组并不是真正的数组,它们是键/值映射,就像所有其他JavaScript对象一样,所以没有“预分配”(设置长度不会分配那么多槽来填充),也没有任何理由相信倒计时到零的好处(这只是为了使循环中的比较更快)不会被按相反顺序添加键所抵消,因为实现可能已经优化了它们对与数组相关的键的处理,理论上你通常会按顺序进行。

事实上,Matthew Crumley指出,在Firefox上,向下计数比向上计数要慢得多,我可以证实这一点——这是数组的一部分(向下循环到零仍然比向上循环到var中的一个极限更快)。显然,在Firefox上,以相反的顺序将元素添加到数组是一个缓慢的操作。事实上,结果因JavaScript实现而异(这并不奇怪)。下面是一个针对浏览器实现的快速而肮脏的测试页面(非常脏,在测试过程中不会产生结果,因此提供的反馈最少,并且会违反脚本时间限制)。我建议在测试之间刷新;如果你不这样做,FF(至少)会在重复测试中减速。

使用Array#concat的相当复杂的版本比FF上的直接初始化快,大约在1000到2000个元素数组之间。不过,在Chrome的V8引擎上,每次都是直接初始化获胜。。。

这里有一个测试:

常量测试=[{name:“倾盆大雨”,总计:0,desc:“倒计数,预减量”,函数:makeWithCountDownPre},{name:“downpost”,总计:0,desc:“倒数,递减后”,函数:makeWithCountDownPost},{name:“up”,总计:0,desc:“向上计数(正常)”,func:makeWithCountUp},{name:“向下和向上”,总计:0,desc:“向下计数(循环)和向上计数(填充)”,func:makeWithCountDownArrayUp},{name:“concat”,总计:0,desc:“凹形”,函数:makeWithConcat}];const q=sel=>document.querySelector(sel);let markup=“”;for(测试的常量{name,desc}){标记+=`<div><input type=“checkbox”id=“chk_${name}”checked><label for=“chk_${name}”>${desc}</label></div>`;}q(“#checkbox”).innerHTML=标记;q(“#btnTest”).addEventListener(“单击”,btnTestClick);函数btnTestClick(){//清除日志q(“#log”).innerHTML=“测试…”;//显示正在运行q(“#btnTest”).disabled=true;//在浏览器更新显示时暂停后运行setTimeout(btnTestClickPart2,0);}函数btnTestClickPart2(){尝试{运行测试();}捕获(e){日志(`异常:${e.message}`);}//重新启用按钮q(“#btnTest”).disabled=false;}函数getNumField(名称){const val=q(“#”+名称).value.trim();常量num=/^\d+$/.test(val)?parseInt(val):NaN;如果(isNaN(num)||num<=0){抛出新错误(`无效的${name}值${JSON.stringify(val)}`);}返回num;}函数runTests(){尝试{//清除日志q(“#log”).innerHTML=“”;const runCount=getNumField(“loops”);const length=getNumField(“长度”);//做它(我们运行runCount+1次,第一次是热身)for(让counter=0;counter<=runCount;++counter){for(测试的常量测试){如果(q(“#chk_”+测试名称)已选中){const start=Date.now();const a=测试函数(长度);const time=Date.now()-开始;如果(计数器==0){//不要计算(预热),但要检查算法是否有效常量无效=validateResult(a,长度);if(无效){日志(`<span class=error>FAILURE</span>,测试${test.name}:${invalid}`);回来}}其他{//数数这个日志(“#${counter}:${test.desc}:${time}毫秒”);test.total+=时间;}}}}for(测试的常量测试){如果(q(“#chk_”+测试名称)已选中){test.avg=测试总数/运行计数;if(typeof lowest!=“number”||最低>测试.avg){最低=测试平均值;}}}let结果=“<p>结果:”+“<br>长度:”+长度+“<br>循环:”+runCount+“</p>”;for(测试的常量测试){如果(q(“#chk_”+测试名称)已选中){结果+=`<p${最低==test.avg?“class=winner”:“”}>${test.desc},平均时间:${test.avg}毫秒</p>`;}}结果+=“<hr>”;q(“#log”).insertAdjacentHTML(“afterbegin”,结果);}捕获(e){日志(e.message);回来}}函数validateResult(a,长度){如果(a.length!=长度){return“长度错误”;}for(设n=长度-1;n>=0;--n){如果(a[n]!=0){return“索引”+n+“不为零”;}}返回未定义;}函数makeWithCountDownPre(len){const a=新数组(len);而(--len>=0){a[len]=0;}返回a;}函数makeWithCountDownPost(len){const a=新数组(len);而(len-->0){a[len]=0;}返回a;}函数makeWithCountUp(len){const a=新数组(len);for(设i=0;i<len;++i){a[i]=0;}返回a;}函数makeWithCountDownArrayUp(len){const a=新数组(len);设i=0;而(--len>=0){a[i++]=0;}返回a;}函数makeWithConcat(len){如果(长度==0){返回[];}设a=[0];设currlen=1;while(currlen<len){常量rem=长度-电流;如果(rem<currlen){a=a.oncat(a.slice(0,rem));}其他{a=混凝土(a);}currlen=a.length;}返回a;}函数日志(msg){const p=document.createElement(“p”);p.text内容=消息;q(“#log”).appendChild(p);}正文{字体系列:无衬线;}#对数p{边距:0;填充:0;}.错误{颜色:红色;}.获胜者{颜色:绿色;}<div><label for='textLength'>长度:</label><input type='text'id='Length'value='1000'><br><label for='xtLoops'>循环:</label><input type='text'id='Loops'value='100000'><div id='checkboxs'></div><br><input-type='button'id='btnTest'value='Test'><小时><div id='log'></div></div>


var str = "0000000...0000";
var arr = str.split("");

表达式中的用法:arr[i]*1;

编辑:如果arr应该在整数表达式中使用,那么请不要介意字符值“0”。您只需按如下方式使用它:a=a*arr[i](假设a具有整数值)。


我知道我在某个地方有这个原型:)

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

编辑:测试

作为对Joshua和其他方法的回应,我运行了自己的基准测试,我看到了与报告完全不同的结果。

以下是我测试的内容:

//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中表现更差,这只是总体上很糟糕(quel surprise)。


我已经测试了IE 6/7/8、Firefox 3.5、Chrome和Opera中预分配/不预分配、向上/向下计数和for/while循环的所有组合。

下面的功能在Firefox、Chrome和IE8中始终是最快的或非常接近的,并且不比Opera和IE6中最快的慢太多。在我看来,这也是最简单明了的。我发现了几个while循环版本稍快的浏览器,所以我也将其包括在内以供参考。

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

or

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

我最快的功能是:

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

使用本机push和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

我很想知道T.J.Crowder对此有何看法?:-)


最快的方法是使用forEach=)

(我们保持IE<9的向后兼容性)

var fillArray = Array.prototype.forEach
    ? function(arr, n) {
         arr.forEach(function(_, index) { arr[index] = n; });
         return arr;
      }
    : function(arr, n) {
         var len = arr.length;
         arr.length = 0;
         while(len--) arr.push(n);
         return arr;
      };

// test
fillArray([1,2,3], 'X'); // => ['X', 'X', 'X']

如果您需要在代码执行期间创建许多不同长度的零填充数组,我发现实现这一点的最快方法是使用本主题中提到的方法之一创建一次零数组,其长度永远不会超过,然后根据需要分割该数组。

例如(使用上面所选答案中的函数初始化数组),创建长度为maxLength的零填充数组,作为需要零数组的代码可见的变量:

var zero = newFilledArray(maxLength, 0);

现在,每当您需要长度为requiredLength<maxLength:

zero.slice(0, requiredLength);

在执行代码期间,我创建了数千次零填充数组,这大大加快了这个过程。


新的Array(51).join(“0”).split(“”)怎么样?


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

虽然这是一个旧线程,但我想添加我的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]

这个concat版本在我的Chrome测试中要快得多(2013-03-21)。10000000个元素约200ms,而直接初始化为675。

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

我正在测试T.J.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)调用该方法。


我只使用:

var arr = [10];
for (var i=0; i<=arr.length;arr[i] = i, i++);

您可以检查索引是否存在,以便向其追加+1。

这样你就不需要一个填零的数组了。

例子:

var current_year = new Date().getFullYear();
var ages_array = new Array();

for (var i in data) {
    if(data[i]['BirthDate'] != null && data[i]['BirthDate'] != '0000-00-00'){

        var birth = new Date(data[i]['BirthDate']);
        var birth_year = birth.getFullYear();
        var age = current_year - birth_year;

        if(ages_array[age] == null){
            ages_array[age] = 1;
        }else{
            ages_array[age] += 1;
        }

    }
}

console.log(ages_array);

我通常使用Uint8Array(速度惊人)。例如,创建1M个元素的零填充矢量:

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

我是一个Linux用户,一直为我工作,但有一次,一个朋友使用Mac时有一些非零元素。我以为他的机器出故障了,但我们找到了最安全的方法来修复它:

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

已编辑

铬25.0.1364.160

弗雷德里克·戈特利布-6.43萨姆·巴纳姆-4.83伊莱-3.68约书亚2.91马修·克鲁姆利-2.67硼-2.55艾伦·赖斯-2.11康纳斯-0.68推压器温度-0.67zertosh-错误

Firefox 20.0

艾伦·赖斯-1.85约书亚-1.82马修·克鲁姆利-1.79硼-137弗雷德里克·戈特利布-0.67萨姆·巴纳姆-0.63伊莱-0.59kagax-0.13推压器温度-0.13zertosh-错误

错过了最重要的测试(至少对我来说):Node.js测试。我怀疑它接近Chrome基准。


默认情况下,Uint8Array、Uint16Array和Uint32Array类的值保持为零,因此不需要任何复杂的填充技术,只需执行以下操作:

var ary = new Uint8Array(10);

默认情况下,数组ary的所有元素都将为零。


使用lodash或下划线

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

或者,如果您已有一个数组,并且需要一个相同长度的数组

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

ES6引入了Array.prototype.fill。它可以这样使用:

new Array(len).fill(0);

不确定它是否很快,但我喜欢它,因为它很短,很自我描述。

它仍然不在IE中(检查兼容性),但有一个polyfill可用。


值得指出的是,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;
  };
}

这里还有一个不错的选择http://www.2ality.com/2013/11/initializing-arrays.html

function fillArrayWithNumbers(n) {
  var arr = Array.apply(null, Array(n));
  return arr.map(function (x, i) { return i });
}

匿名函数:

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

用for循环稍微短一点:

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

适用于任何对象,只需更改this.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


其他人似乎缺少的是预先设置数组的长度,这样解释器就不会不断改变数组的大小。

我的简单一行代码是Array.protocol.slice.apply(newUint8Array(长度))

但是,如果我要创建一个函数来快速执行,而不需要一些复杂的变通方法,我可能会编写一个这样的函数:

var filledArray = function(value, l) {
    var i = 0, a = []; a.length = l;
    while(i<l) a[i++] = value;
    return a;
    }

我没有反对:

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

Zertosh建议,但在一个新的ES6阵列扩展中,您可以使用fill方法在本地执行此操作。现在IE edge、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]


已经提到的ES6填充方法很好地解决了这个问题。截至目前,大多数现代桌面浏览器已经支持所需的Array原型方法(Chromium、FF、Edge和Safari)[1]。您可以在MDN上查找详细信息。一个简单的用法示例是

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

考虑到当前的浏览器支持,除非您确定您的受众使用的是现代桌面浏览器,否则您应该谨慎使用。


循环代码最短

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;

用预先计算的值填充数组的优雅方式

这里有另一种使用ES6的方法,到目前为止没有人提到:

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

它通过传递一个map函数作为Array.from的第二个参数来工作。

在上面的示例中,第一个参数分配一个由3个位置组成的数组,其中填充了未定义的值,然后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()填充数组

由于这个答案受到了很多关注,我也想展示一下这个很酷的技巧。虽然不如我的主要答案有用,但将介绍一个仍然不是很有名,但非常有用的Stringrepeat()方法。诀窍如下:

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

酷吧?repeat()是创建字符串的一种非常有用的方法,该字符串将原始字符串重复一定次数。之后,split()为我们创建一个数组,然后将其映射()到所需的值。按步骤分解:

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

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

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

return Array(数量).fill(1).map(n=>return n*Math.abs(~~(Math.random()*(1000-1+1))+1));

一行。


如果使用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]

在答案中没有看到这种方法,所以这里是:

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

结果,您将得到长度为200的零值数组:

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

我不确定这段代码的性能,但如果您将它用于相对较小的阵列,这应该不是问题。


截至ECMAScript2016,大型阵列有一个明确的选择。

由于这一答案在谷歌搜索中仍然排名靠前,所以这里有一个2017年的答案。

这里有一个当前的jsbench,其中有几十种流行的方法,包括迄今为止提出的许多方法。如果你找到更好的方法,请添加、分叉和分享。

我想指出,没有真正最有效的方法来创建任意长度的零填充数组。您可以优化速度,也可以优化清晰度和可维护性——根据项目的需要,两者都可以被视为更有效的选择。

在优化速度时,您需要:使用文字语法创建数组;设置长度,初始化迭代变量,并使用while循环遍历数组。这里有一个例子。

常量arr=[];arr.length=120000;设i=0;而(i<120000){arr[i]=0;i++;}

另一种可能的实施方式是:

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

但我强烈反对在实践中使用第二次植入,因为它不太清楚,也不允许在数组变量上保持块范围。

这比用for循环填充要快得多,比标准方法快90%左右

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

但这种填充方法由于其清晰、简洁和可维护性,对于较小的阵列来说仍然是最有效的选择。除非您制作了大量长度为数千或更多的阵列,否则性能差异可能不会让您丧命。

其他一些重要的注意事项。大多数风格指南都建议您在使用ES6或更高版本时,如果没有非常特殊的原因,不要再使用var。对于不会被重新定义的变量使用const,对于会被重新定义变量使用let。MDN和Airbnb的风格指南是获取更多最佳实践信息的好地方。这些问题并不涉及语法,但重要的是,在搜索大量新旧答案时,熟悉JS的人必须了解这些新标准。


洛达什:

_.fill(array, value)

是一种干净且跨浏览器安全的填充数组的方法。


递归解决方案

正如其他人所指出的,利用.contat()通常提供快速解决方案。下面是一个简单的递归解决方案:

函数zeroFill(len,a){return len<=(a||(a=[0])).长度?a.切片(0,len):zeroFill(长度,a.concat(a))}console.log(zeroFill(5));

以及一个通用递归数组填充函数:

函数填充(len,v){返回长度<=(v=[].contat(v,v)).length?v.slice(0,len):填充(len,v)}console.log(fill(5,'abc'));


ES6溶液:

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

简言之

最快的解决方案:

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

最短(方便)的解决方案(小阵列慢3倍,大阵列慢一点(Firefox上最慢))

Array(n).fill(0)

细节

今天2020.06.09我在浏览器Chrome 83.0、Firefox 77.0和Safari 13.1上对macOS High Sierra 10.13.6进行测试。我测试了两个测试用例的所选解决方案

小数组-有10个元素-您可以在这里执行测试大阵列-具有1M个元素-您可以在这里执行测试

结论

基于新Array(n)+for(n)的解决方案是小型阵列和大型阵列的最快解决方案(Chrome除外,但仍非常快),建议作为快速跨浏览器解决方案基于新Float32Array(n)(I)的解决方案返回非典型数组(例如,您不能在其上调用push(..)),因此我不会将其结果与其他解决方案进行比较-但是,对于所有浏览器上的大型数组,此解决方案的速度比其他解决方案快10-20倍基于for(L,M,N,O)的解决方案对于小型阵列来说是快速的基于填充(B,C)的解决方案在Chrome和Safari上速度很快,但在Firefox上对于大型阵列的速度却慢得惊人。它们对于小型阵列来说是中速的基于Array.apply(P)的解决方案为大型阵列抛出错误函数P(n){return Array.apply(null,Array(n)).map(Number.pr原型.valueOf,0);}尝试{P(1000000);}捕获(e){console.error(e.message);}

代码和示例

以下代码显示了测量中使用的解决方案

函数A(n){return[…new Array(n)].fill(0);}函数B(n){返回新数组(n).fill(0);}函数C(n){return数组(n).fill(0);}函数D(n){return Array.from({length:n},()=>0);}函数E(n){return[…new Array(n)].map(x=>0);}//类型为的数组函数F(n){return Array.from(新Int32Array(n));}函数G(n){return Array.from(new Float32Array(n));}函数H(n){return Array.from(new Float64Array(n));//需要比float32多2倍的内存}函数I(n){返回新的Float32Array(n);//这不是典型的阵列}函数J(n){return[].slice.apply(new Float32Array(n));}//基于函数K(n){设a=[];a.长度=n;设i=0;而(i<n){a[i]=0;i++;}返回a;}函数L(n){设a=[];对于(设i=0;i<n;i++)a[i]=0;返回a;}函数M(n){设a=[];对于(设i=0;i<n;i++)a.push(0);返回a;}函数N(N){设a=新数组(n);对于(设i=0;i<n;++i)a[i]=0;返回a;}函数O(n){设a=新数组(n);对于(设i=n;i-;)a[i]=0;返回a;}//其他函数P(n){return Array.apply(null,Array(n)).map(Number.pr原型.valueOf,0);}函数Q(n){return“0”.repeat(n).split(“”).map(parseFloat);}函数R(n){返回新数组(n+1).join(“0”).split(“”).map(parseFloat)}// ---------//测试// ---------[A、B、C、D、E、F、G、H、I、J、K、L、M、N、O、P、Q、R]。对于每个(F=>{设a=f(10);console.log(`${f.name}长度=${a.length},arr[0]=${a[0]},arr[9]=${a[9]}`)});此代码段仅显示使用过的代码

Chrome的示例结果:


创建全新阵列

new Array(arrayLength).fill(0);

在现有阵列的末尾添加一些值

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

实例

//**创建全新阵列**console.log(新数组(5).fill(0));//**在现有阵列的末尾添加一些值**让existingArray=[1,2,3]console.log([…existingArray,…new Array(5).fill(0)]);


let filled=[];填充长度=10;fill.fill(0);console.log(已填充);


const arr=数组.from({长度:10}).fill(0);控制台日志(arr)


这里最快的是

(arr = []).length = len; arr.fill(0);

我知道这不是问题的目的,但这里有一个开箱即用的想法。为什么?我的CSci教授指出,用零来“净化”数据并没有什么神奇之处。因此,最有效的方法是根本不做!只有当数据需要为零作为初始条件(如某些求和)时才这样做——这通常不是大多数应用程序的情况。


const item = 0
const arr = Array.from({length: 10}, () => item)

常量项=0constarr=Array.from({length:42},()=>项)控制台日志('arr',arr)


let arr = [...Array(100).fill(0)]

在我的测试中,这是我电脑中最快的

1亿个元素需要大约350毫秒。

"0".repeat(100000000).split('');

对于相同数量的元素,map(()=>0)需要大约7000毫秒,这是一个巨大的差异