如何在 JavaScript 中初始化数组的长度？

Question

我读过的大多数关于 JavaScript 数组的教程（包括 w3schools 和 devguru）建议您可以通过使用 var test = new Array(4); 将整数传递给 Array 构造函数来初始化具有特定长度的数组语法。

在我的 js 文件中大量使用此语法后，我通过jsLint 运行其中一个文件，结果吓坏了：

错误：第 1 行字符 22 处出现问题：预期为 ')' 而看到的是 '4'。
var test = new Array(4);
第 1 行字符 23 处的问题：预期为 ';'而是看到了')'。
var test = new Array(4);
第 1 行字符 23 处的问题：需要一个标识符，但看到的是 ')'。

读完jsLint's explanation of its behavior后，看起来jsLint并不是很喜欢new Array()的语法，而是在声明数组时更喜欢[]。

所以我有几个问题：

首先，为什么？改用new Array() 语法是否会带来任何风险？是否存在我应该注意的浏览器不兼容问题？

其次，如果我切换到方括号语法，有没有办法声明一个数组并将其长度全部设置在一行上，或者我必须这样做：

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

Answer 1

稀疏数组来了！ ? [2021]

在现代 JS 引擎中，完全支持稀疏数组。您可以以任何您喜欢的方式使用[] 或new Array(len)，即使是随机访问。字典模式似乎已成为过去。

在当前的 Chrome 中（我猜是任何 V8 环境），数组的长度可以达到 2^32-1 并且分配是稀疏的（意味着空块不会占用任何内存）：

但是，有一个问题

一方面，for 循环按预期工作，然而，Array 的内置高阶函数（例如 map、filter、find、some 等）忽略未分配的元素。他们首先需要fill（或其他一些填充方法）：

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

a.forEach(x => console.log(x)); // does nothing
b.forEach(x => console.log(x)); // works as intended

旧版本

（我删除了大部分旧版本。）要点是使用new Array(largeNumber) 创建一个大数组或在尚未分配的地方随机访问一个数组会使它陷入“字典模式”。这意味着您正在使用带有索引的数组，但在引擎盖下它会使用字典来存储值，因此会影响性能以及迭代行为。幸运的是，这已成为过去。

Answer 2

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

或

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

注意：你不能循环空槽，即Array(4).forEach(() => …)

---

或

(打字安全)

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

---

或

使用函数的经典方法（适用于任何浏览器）

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]

---

创建嵌套数组

当使用fill 创建一个2D 数组时，直观地应该创建新实例。但实际上会发生的是同一个数组将被存储为引用。

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

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

解决方案

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

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

所以一个 3x2 数组看起来像这样：

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

---

N维数组

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

---

初始化棋盘

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

---

数学填充值

使用数学时方便的小方法重载

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 3

最短的：

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

Answer 4

在大多数答案中，建议fill 数组，否则“你不能迭代它”，但事实并非如此。您可以迭代一个空数组，但不能使用 forEach。 While 循环、for of 循环和 for i 循环工作正常。

const count = Array(5);

不起作用。

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

这些工作：

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

检查 this fiddle 与上述示例。

angulars *ngFor 也适用于空数组：

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

Answer 5

假设 Array 的长度是恒定的。在 Javascript 中，这就是我们所做的：

const intialArray = new Array(specify the value);

Answer 6

请人们暂时不要放弃你的旧习惯。 在分配内存一次然后使用该数组中的条目（与旧的一样）与随着数组的增长多次分配内存之间存在很大的速度差异（这不可避免地是系统在使用其他建议的方法时所做的） .

当然，这些都不重要，除非你想用更大的数组做一些很酷的事情。然后就可以了。

鉴于目前 JS 中似乎仍然没有设置数组初始容量的选项，所以我使用以下...

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

需要权衡取舍：

• 此方法第一次调用函数所需的时间与其他方法一样长，但后续调用的时间非常短（除非要求更大的数组）。
• standard 数组会永久保留与您请求的最大数组一样多的空间。

但是，如果它与您正在做的事情相吻合，就会有回报。 非正式的时间安排

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

非常快（考虑到 n=1000000 大约需要 5 秒，10000 大约需要 50 毫秒），并且

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

一分钟多一点（10000 在同一个 chrome 控制台上大约需要 90 秒，或者慢大约 2000 倍）。 这不仅仅是分配，还有 10000 次推送、for 循环等。

Answer 7

使用ES2015 .fill()，您现在可以简单地执行以下操作：

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

比Array.apply(0, new Array(n)).map(i => value)简洁多了

可以将0 放到.fill() 中并在不带参数的情况下运行，这将用undefined 填充数组。 （然而，这在 Typescript 中会失败）

Answer 8

ES6 引入了Array.from，它允许您从任何“array-like” 或iterables 对象创建Array：

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

在这种情况下，{length: 10} 表示 “类数组” 对象的最小定义：一个只定义了 length 属性的空对象。

Array.from 允许第二个参数映射到结果数组。

Answer 9

• Array(5) 为您提供长度为 5 但没有值的数组，因此您无法对其进行迭代。

• Array.apply(null, Array(5)).map(function () {}) 为您提供一个长度为 5 且未定义为值的数组，现在可以对其进行迭代。

• Array.apply(null, Array(5)).map(function (x, i) { return i; }) 为您提供长度为 5 且值为 0、1、2、3、4 的数组。

• Array(5).forEach(alert) 什么都不做，Array.apply(null, Array(5)).forEach(alert) 给你 5 个警报

• ES6 给了我们Array.from 所以现在你也可以使用Array.from(Array(5)).forEach(alert)

• 如果你想用某个值进行初始化，这些很好知道...
  Array.from('abcde'), Array.from('x'.repeat(5))
  或Array.from({length: 5}, (v, i) => i) // gives [0, 1, 2, 3, 4]

Answer 10

您可以使用array.length = youValue设置数组长度

原来如此

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

Answer 11

这是另一个解决方案

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

apply()的第一个参数是一个this对象绑定，这里我们不关心，所以设置为null。

Array.apply(..) 正在调用Array(..) 函数并将{ length: 3 } 对象值作为其参数展开。

Answer 12

1. 为什么要初始化长度？理论上没有必要这样做。它甚至会导致令人困惑的行为，因为所有使用length 来确定数组是否为空的测试都会报告该数组不为空。
   Sometests 表明设置初始大型数组的长度可以如果之后填充数组会更有效，但性能增益（如果有的话）似乎因浏览器而异。

2. jsLint 不喜欢new Array()，因为构造函数不明确。

   new Array(4);
   

   创建一个长度为4的空数组。但是

   new Array('4');
   

   创建一个数组包含值 '4'。

关于您的评论：在 JS 中您不需要初始化数组的长度。它动态增长。您可以将长度存储在某个变量中，例如

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

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

Answer 13

var arr=[];
arr[5]=0;
alert("length="+arr.length); // gives 6

Answer 14

令我惊讶的是，还没有建议的功能性解决方案允许您在一行中设置长度。以下基于UnderscoreJS：

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

由于上述原因，除非我想将数组初始化为特定值，否则我会避免这样做。有趣的是，还有其他实现 range 的库，包括 Lo-dash 和 Lazy，它们可能具有不同的性能特征。

Answer 15

（这可能是一个更好的评论，但太长了）

所以，读完这篇文章后，我很好奇预分配是否真的更快，因为理论上它应该是。然而，这篇博客给出了一些反对它的建议http://www.html5rocks.com/en/tutorials/speed/v8/。

所以仍然不确定，我对其进行了测试。事实证明，它实际上似乎更慢。

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

此代码在几次随意运行后会产生以下结果：

$ 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

Answer 16

数组构造函数有一个ambiguous syntax，JSLint毕竟只是伤了你的感情。

此外，您的示例代码已损坏，第二个 var 语句将引发 SyntaxError。您正在设置数组test 的属性length，因此不需要另一个var。

就您的选择而言，array.length 是唯一“干净”的选项。问题是，为什么首先需要设置大小？尝试重构您的代码以摆脱这种依赖关系。

Answer 17

这会将长度属性初始化为 4：

var x = [,,,,];

Answer 18

您不应该使用new Array 的原因如下代码所示：

var Array = function () {};

var x = new Array(4);

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

其他一些代码可能与 Array 变量混淆。我知道有人会写这样的代码有点牵强，但仍然......

另外，正如 Felix King 所说，界面有点不一致，可能会导致一些非常难以追踪的错误。

如果你想要一个长度 = x 的数组，填充未定义（就像new Array(x) 会做的那样），你可以这样做：

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

alert(myArray.length); // 4