使用{}或new Object()在JavaScript中创建一个空对象?


370

在JavaScript中有两种不同的创建空对象的方法:

var objectA = {}
var objectB = new Object()

脚本引擎处理它们的方式有何不同?有什么理由要使用另一个?

同样,也可以使用不同的语法创建一个空数组:

var arrayA = []
var arrayB = new Array()

6
警告:两者之间的细微差别可能会引起非常令人讨厌的错误!在Object原型中创建一个将其分配给“ {}”的空对象将是由“ new”运算符创建的每个Object实例中的同一个Object实例。当您使用“ new Object({})”时,您将拥有不同的实例。
peterh-恢复莫妮卡2015年

值得一提的是,除了 var objectA = {} var objectB = new Object()第三种结构,它还会产生相同的结果:var objectC = Object.create(Object.prototype);
kalitsov

{}[] 使用{}代替new Object()。使用[]代替new Array()。当成员名称为连续整数时,请使用数组。成员名称是任意字符串或名称时,请使用对象。 来源
ilgaar

new Object()并且{}不是很空的对象,它们是具有Object.prototype的对象。您可以使用Object.create(null)真正的空对象(至少根据mozilla docs:developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Answers:


459

对象

使用new Object();- 没有任何好处-却{};可以使您的代码更紧凑,更易读。

对于定义空对象,它们在技术上是相同的。该{}语法是短,整齐(不以Java-ISH),并让你瞬间填充对象内联-就像这样:

var myObject = {
        title:  'Frog',
        url:    '/img/picture.jpg',
        width:  300,
        height: 200
      };

数组

对于数组,使用new Array();over 几乎没有任何好处[];-一个小例外:

var emptyArray = new Array(100);

创建一个长度为100的数组,其中所有插槽均包含undefined-在某些情况下(例如(new Array(9)).join('Na-Na ') + 'Batman!')可能很好/有用。

我的建议

  1. 永远不要使用new Object();-它比现在笨重,{};而且看起来很傻。
  2. 始终使用[];-除非需要快速创建具有预定义长度的“空”数组。

22
即使您使用Array(100)语法,在第101个位置的同一数组也没有定义。数字真正唯一要做的就是更改length属性的值。
詹森·邦廷

6
@Pablo没有什么不对的new Array(100)。阅读文献:developer.mozilla.org/en/JavaScript/Reference/Global_Objects/...
三月Örlygsson

9
@Pablo我不知道您的论点是什么。与Douglas Crockford一样,我建议使用[]。那里没有争论。但是,您认为这new Array(100)某种程度上是“无效的”,这是不正确的。
2011年

10
另外,请注意会new Array(1,2,3)导致[1,2,3],但new Array(1)不会导致[1]; 因此,的语义Array不一致且不必要地造成混淆。
Dancrumb 2014年

3
我要补充一点,这Object.create(null)对于创建空白对象很有用,而{ }继承自Object原型。
喵喵

90

是的,有区别,它们不一样。的确,您将获得相同的结果,但引擎对两者的工作方式却不同。其中一种是对象文字,另一种是构造函数,这是在javascript中创建对象的两种不同方式。

var objectA = {} //This is an object literal

var objectB = new Object() //This is the object constructor

在JS中,所有内容都是一个对象,但是您应该通过new Object()注意以下几点:它可以接收一个参数,并且根据该参数,它将创建一个字符串,一个数字或一个空对象。

例如:new Object(1),将返回一个数字。new Object("hello")将返回一个字符串,这意味着对象构造函数可以根据参数将对象创建委托给其他构造函数(例如字符串,数字等)。在管理动态数据时,记住这一点非常重要创建对象..

许多作者建议当可以使用某种文字符号来代替时,不要使用对象构造函数,因为这样可以确保所创建的内容正是您期望的代码内容。

我建议您进一步阅读javascript上的文字表示法和构造方法之间的区别,以找到更多详细信息。


实际上,字面符号更易于阅读和创建动态数据对象。
2017年

12

它们具有相同的最终结果,但我只是补充一下,使用文字语法可以帮助人们习惯JSON的语法(JavaScript文字对象语法的字符串化子集),因此进入它可能是一个好习惯。

另一件事:如果您忘记使用new运算符,则可能会有细微的错误。因此,使用文字将帮助您避免该问题。

最终,它将取决于情况以及偏好。


8

对象和数组文字语法{} / []是在JavaScript 1.2中引入的,因此在4.0之前的Netscape Navigator版本中不可用(并且会产生语法错误)。

我的手指仍然默认使用new Array(),但是我是一个非常老的人。幸运的是,Netscape 3并不是当今许多人不得不考虑的浏览器...


11
Netscape 3?伙计,那是在上个世纪!:-D
Tomalak

8
var objectA = {}

速度更快,以我的经验,更常用,因此最好采用“标准”并保存一些键入内容。


1
运行起来更快还是打字更快?
hippietrail 2012年

好吧,诚然,我的意思是“打字”,但是鉴于额外的解析时间,执行起来也可能会稍微快一点:-)
Bobby Jack

2
此外,文字通常在解析时创建,而new Object必须在运行时执行。
Phrogz

8

我相信{}这里的一种Javascript视频中推荐这样做是一种很好的编码约定。new对于伪古典继承是必需的。这种var obj = {};方式有助于提醒您,这不是经典的面向对象语言,而是原型语言。因此,您真正需要的唯一时间new是使用构造函数时。例如:

var Mammal = function (name) {
  this.name = name;
};

Mammal.prototype.get_name = function () {
  return this.name;
}

Mammal.prototype.says = function() {
  return this.saying || '';
}

然后像这样使用:

var aMammal = new Mammal('Me warm-blooded');
var name = aMammal.get_name();

与之{}相反使用的另一个优点new Object是您可以使用它来执行JSON样式的对象文字。


7

数组实例化性能

如果要创建没有长度的数组:

var arr = [];var arr = new Array();

如果要创建具有一定长度的空数组:

var arr = new Array(x);比...快var arr = []; arr[x-1] = undefined;

对于基准,请单击以下内容:https : //jsfiddle.net/basickarl/ktbbry5b/

但是我不知道两者的内存占用情况,我可以想象这new Array()会占用更多空间。


arr = new Array(x)等效于arr = []; arr.length = x;,而不是用分配x-1索引undefined
Bergi '18

2

本质上是同一件事。使用任何您发现更方便的方式。


也许我在这里对javascript进行了深入研究,但是它们是一样的吗?的{proto}是否不Object为null,而of的{proto} {}为'Object.prototype'?
伊扎基

@Izhaki的原型Object为空,这是正确的。那是因为Object终止原型链。但是对象实例没有原型,只有构造函数有原型。和(new Object()).constructor === ({}).constructor->true
Tomalak,2014年

那么是不正确的吗?
伊扎基

这就是我的观点:new Object()产生一个空白的Object实例。{}产生一个空白的Object实例。这两种情况是绝对无法区分的。您链接到的示例做了其他事情(它修改了原型链),并且在这里并没有真正适用-否则我不理解您的观点。
Tomalak

1

好的,只有两种不同的方法可以做同样的事情!一个被调用object literal,另一个被称为函数constructor

但是请继续阅读,我想分享几件事:

使用{}可以使您的代码更具可读性,同时Object不建议您创建或其他内置函数的实例...

同样,对象函数会像它一样获取参数,就像Object(params)...,但这{}是在JavaScript中启动对象的纯净方法...

使用对象文字可以使您的代码对其他开发人员来说更简洁易读,并且符合JavaScript的最佳做法...

尽管Javascript中的Object几乎可以是任何东西,但{}仅指向javascript对象,要测试其工作方式,请在javascript代码或控制台中执行以下操作:

var n = new Object(1); //Number {[[PrimitiveValue]]: 1}

令人惊讶的是,它正在创建一个数字!

var a = new Object([1,2,3]); //[1, 2, 3]

这正在创建一个数组!

var s = new Object('alireza'); //String {0: "a", 1: "l", 2: "i", 3: "r", 4: "e", 5: "z", 6: "a", length: 7, [[PrimitiveValue]]: "alireza"}

和这个奇怪的结果String

因此,如果要创建对象,建议使用对象文字,以使用标准代码并避免发生上述任何代码事故,{}以我的经验,最好还是使用性能明智的方法!


你是Dezfooli吗?在伊朗?
Ehsan

嗨,埃桑,是的,但我不是住在伊朗伴侣中,您在这里享有很高的知名度!认识你很高兴...
Alireza

我可以保存您的电话号码并获得编程方面的帮助吗?
Ehsan

我看你用电报。
Ehsan

是的,可以肯定,我们可以共享一些电报方面的知识!___
Alireza
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.