JavaScript中new Array()与字面量[]的定义区别及性能分析

JavaScript数组定义方式概述

在JavaScript开发中，许多开发者对于使用new Array()构造函数与var arr=[]字面量方式定义数组的区别感到困惑，也不清楚各自的具体应用场景。以下是对这两种定义方式的详细总结与对比。

new Array()与字面量[]的区别

var arr=[]

这种写法被称为数组字面量定义法，是JavaScript中创建数组最直观且常见的方式。

var arr=new Array()

这种方式是通过调用Array构造函数来实例化一个数组对象。

上述两种定义数组的方法在本质和功能上是否存在差异？

目前业界对此有一个大致的共识，下面我们将逐一分析。

传统观点认为，使用new关键字会在内存中开辟一个新的存储地址，因此相对消耗更多资源。

而字面量方式直接在内存中开辟一个存储字段，过程相对简单，被认为不额外消耗资源。

我们首先不急于否定上述结论的正确性，而是通过功能层面进行验证。

从功能实现的角度来看，var arr=[]与var arr=new Array()的效果是完全一致的。

为了验证这一点，我们可以编写一段代码进行性能测试。

var startTime=new Date().getTime();
var test1=[];
var test2=[];
for(var i=0;i<1000000;i++){
  //test1[i]={};
  test2[i]=new Object();
}

var endTime=new Date().getTime();
console.log('输出耗时:',endTime-startTime);

在测试代码test1和test2中，每个元素均为一个对象（注：原文代码注释部分及实际运行对象为Object，此处依原文描述为数组元素概念，实际测试逻辑见下文），我们可以依次注释任意一行代码。经过多次重复测试（超过10次），观察其耗时情况。

测试结果如下：

36** 36**

两次测试的耗时均在3600毫秒左右波动，忽上忽下，两者之间没有任何显著的差距。

本次测试的运行环境为MacBook Air (13-inch, Mid 2013)，处理器配置为1.3 GHz Intel Core i5，内存为4 GB 1600 MHz DDR3，使用的JS Runner工具进行执行。

基于上述测试结果，我们可以暂时认为这两种定义方法在性能上的差异微乎其微。

语法特性与性能对比

[ ]和new Array()在语法层面的唯一显著区别在于：new Array()可以直接接收一个整数参数来预设数组的长度。

new Array()在构造数组时支持以下几种常见的传参方式：

var arr = new Array(); var arr = new Array(8); var arr = new Array("c", "d", “e”); 字面量方式 var d = ["111", "222", "333"]; 可以看出，字面量方式在定义具体元素时更为直接。

综上所述，这两种定义方法在性能上并没有太大差距，选择哪种方式更多取决于个人的编码习惯，而字面量方式因其简洁性更受推崇。

退一步讲，即使使用var arr=['111','222','333'];定义数组，JavaScript引擎在底层是否没有通过构造函数在内存中开辟存放地址呢？实际上，字面量在底层实现上往往也会转化为类似的内部操作，只是封装程度不同。

Array对象常用方法详解

接下来，我们对JavaScript中Array对象的一些常用方法进行总结。

var list = new Array()是JavaScript中常见的代码片段，今天我们将详细梳理Array对象所具备的各种操作方法。

list[0] = 0;

list[1] = 1;

list[2] = 2;

或者采用更简洁的声明方式：var list = [0,1,2]。

1. shift()：删除数组的第一个元素，并返回被删除的值。例如上述数组中返回0。

2. unshift(3,4)：将参数添加到数组的前面，并返回数组的新长度。此时list的内容变为3,4,0,1,2。

3. pop()：删除数组的最后一个元素，并返回被删除的值。例如上述数组中返回2。

4. push(3)：将参数添加到数组的最后，并返回数组的新长度。此时list的内容变为0,1,2,3。

5. concat(3,4)：将两个或多个数组合并成一个新数组。

6. splice(start,deleteCount,val1,val2,...)：从start位置开始删除deleteCount项，并从该位置起插入val1,val2等参数。

reverse：将数组元素顺序反转。 var a = [1,2,3,4,5]; var b = a.reverse(); //a变为[5,4,3,2,1]，b也为[5,4,3,2,1]

sort(orderfunction)：按指定的参数对数组进行排序。 var a = [1,2,3,4,5]; var b = a.sort(); //a变为[1,2,3,4,5]，b也为[1,2,3,4,5]（注：默认按字符串Unicode编码排序，数字数组需注意转换）

slice(start,end)：返回从原数组中指定开始下标到结束下标之间的项组成的新数组，不修改原数组。 var a = [1,2,3,4,5]; var b = a.slice(2,5); //a保持[1,2,3,4,5]，b变为[3,4,5]

join(separator)：将数组的所有元素连接成一个字符串，以separator为分隔符；若省略separator，则默认使用逗号作为分隔符。 var a = [1,2,3,4,5]; var b = a.join("|"); //a保持[1,2,3,4,5]，b变为"1|2|3|4|5"