在JavaScript中声明数组时应遵循的最佳实践是什么?


175

当我需要声明一个新数组时,我使用此表示法

var arr = new Array();

但是在进行在线测试时(例如在jsbin上),警告提示我“使用数组文字符号[]”。

我没有找到避免使用构造函数的理由。在某种程度上是否比使用效率低[]?还是不好的做法?

是否有充分的理由var arr = [];代替使用var arr = new Array();


5
两者都很好。您只需在传输中保存一些字节。
西尔科(Sirko)2012年

13
确实存在差异。看到这个帖子:stackoverflow.com/q/2280285/921204
techfoobar

注意:如果覆盖Array,则存在差异。
crdx

@apkd在某些浏览器上存在显着的性能差异
Alnitak

很公平。在链接的问题上我没有看到。
crdx 2012年

Answers:


259

,人们使用var a = [],因为道格拉斯·克罗克福德是这么说的

他的原因包括以下行为的非直觉和不一致的行为new Array()

var a = new Array(5);     // an array pre-sized to 5 elements long
var b = new Array(5, 10); // an array with two elements in it

请注意,无法new Array()创建仅包含一个预先指定的number元素的数组!

使用[]实际上更有效,也更安全!可以覆盖Array构造函数并使它做一些奇怪的事情,但是您不能覆盖的行为[]

就个人而言,我始终使用[]语法,并且类似地,始终使用{}语法代替new Object()


5
“您不能覆盖[]的行为。” 你确定吗?我认为至少在某些实现上,您可以覆盖Array构造函数来影响[],而Object构造函数来影响{}。
Random832

11
@ Random832可能是在较旧的浏览器中,但在与ES5兼容的实现中却没有,在规范中它说[]调用一个内部构造函数,而不是Array.constructor当时具有的任何值。
Alnitak

5
奖励:数组文字比使用Array构造函数创建新数组要快得多:jsperf.com/new-array
Mathias Bynens 2012年

@MathiasBynens仅在某些时候。
OrangeDog 2012年

Ew @ []的工作方式有所不同,因为内部构造函数有所不同。不一致将导致更多的混乱。编辑:啊,安全方面的考虑。我知道了。
埃里克·雷彭

48

一个重要的区别是,[]它将始终实例化一个新的Array,而new Array可能被劫持以创建一个不同的object

(function () {
    "use strict";
    var foo,
        bar;
    //don't do this, it's a bad idea
    function Array() {
        alert('foo');
    }
    foo = new Array();
    bar = [];
}());​

在我的示例代码中,我将Array函数隐藏在文档范围的其余部分中,但是,如果您遇到此类问题,很有可能代码不会被很好地关闭,并且会可能很难找到。

免责声明:劫持Array构造函数不是一个好主意。


7
IIRC,在较旧的浏览器中,重写Array构造函数也会导致文字解释不正确。不久前,有一个GMail CSRF 漏洞,涉及重写数组构造函数,并且新浏览器出于这个确切原因而忽略了字面量的重载。
hugomg

反声明:然而,多年来增强Array构造函数非常有用和有用。
埃里克·雷彭

26

为了可维护性,使用 []

数组文字更容易预测,因为大多数开发人员都在使用它。大部分的数组用法将使用原义,并且使您的代码与其他开发人员使用的代码匹配是有价值的。

对于空数组,使用 []

var ns = [];
var names = [ 'john', 'brian' ];

如所示在这里,使用空的字面和几个已知元素的是fatster比Array构造。

对于已知大小的数组,请使用 new Array(size)

如果知道大小,则使用Array构造函数可显着提高性能。但是,这也意味着您必须处理一个数组,该数组已经“未定义”填充了所有值。

如图所示这里

// fill an array with 100 numbers
var ns = new Array( 100 );
for ( var i = 0; i < 100; i++ ) {
    ns[i] = i;
}

这也适用于非常小的阵列


12

不,对于空数组,实际上没有理由使用另一种表示法。

但是,大多数浏览器在使用时表现出x = [];比调用Constructor更好的性能。

如果需要创建具有特定大小的数组,则需要使用x = new Array(10);例如创建具有10 undefined个插槽的数组。


@Alnitak:您已经提到过,它不是很直观和简洁。
jAndy 2012年

7
我整理了一个jsperf来比较性能:jsperf.com/array-constructor-versus-literal。至少对于我在Ubuntu 20上的Chrome 20而言,其文字速度是构造函数的两倍。
史蒂文


jAndy,为什么要在JavaScript中使用带有“ 10个空插槽”的数组?实际上,您可以执行以下操作:var arr = []; arr [9] =“ omega”; 1. JS中的数组是完全动态的,您可以引用任何您想要的索引,并且它只是“未定义的”。就像您说的一样:var arr = new Array(10); arr [23]; 2.数组的长度将设置为其中包含任何内容的最大值,而不管两者之间有多少个未定义的插槽。或者您可以自己设置。[]可能无法治愈癌症,但略有改善。
Norguard

7
  • var arr = []使用数组/对象文字
  • var arr = new Array()使用数组/对象构造函数

定义数组或对象的最快方法是文字方法,因为您无需调用构造函数

var arr1 = new Array(1, 2, 3, 4);
var arr2 = [1, 2, 3, 4];

alert(arr1[0]); // 1
alert(arr2[0]); // 1

var arr3 = new Array(200);
var arr4 = [200];

alert(arr3[0]); // 'undefined'
alert(arr4[0]); // 200

2
供参考,在var arr = [];逻辑上也使用构造函数。它始终是内置的数组构造函数,而不是name现在正在使用的任何函数Array
cHao 2012年

6

两者都是正确的。但是大多数人使用var a = []

在JavaScript中声明数组的三种方法。

方法1:我们可以使用JavaScript“ new”关键字显式声明一个数组,以在内存中实例化该数组(即创建它并使其可用)。

// Declare an array (using the array constructor)
var arlene1 = new Array();
var arlene2 = new Array("First element", "Second", "Last");

方法2:我们使用另一种方法声明数组。

// Declare an array (using literal notation)
var arlene1 = [];
var arlene2 = ["First element", "Second", "Last"];

方法3:JavaScript还允许您通过调用特定方法间接创建数组。

// Create an array from a method's return value
var carter = "I-learn-JavaScript";
var arlene3 = carter.split("-");

4

构造函数可以作为参数有一个限制。

在大多数系统上,我限制为2 ^ 16(2个字节):

var myFreshArr = new Array(0,1,2,3 ..... 65536);

这将导致错误(参数过多...。)

使用文字[]时,您不会遇到此类问题。

如果您不关心这么大的数组,我想您可以使用任何喜欢的方法。


2
您能否举一个例子,说明一个人可能在哪里想要创建一个预先填充有70,000个值的数组?不过,它确实可以解释一些我见过的糟糕网站,这些网站似乎从未完成加载...
John O

2
John O,我看到了一些SCARY JSON实现,涉及2D / 3D数组的数组,这些数组具有IATA(机场)代码,航空公司,旅行社,度假村等……所有这些东西分成一个阵列 ... 1MB以上的JSON下载让我想哭了。
Norguard


3

这是因为new Array()模棱两可。这些是正确的构造函数:

// Using brackets
[element0, element1, ..., elementN]

// Using new AND a list of elements
new Array(element0, element1, ..., elementN)

// Using new AND an integer specifying the array length
new Array(arrayLength)
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.