JavaScript是否保证对象属性顺序?

JavaScript

伊芙妮

2020-03-11

如果我创建这样的对象:

var obj = {};
obj.prop1 = "Foo";
obj.prop2 = "Bar";

生成的对象会总是这样吗?

{ prop1 : "Foo", prop2 : "Bar" }

也就是说,属性的顺序是否与我添加它们的顺序相同?

第819篇《JavaScript是否保证对象属性顺序?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

8个回答
宝儿DavaidL 2020.03.11

从ES2015开始,某些迭代属性的方法将保证属性顺序。但是没有其他人不幸的是,不能保证有顺序的方法通常是最常用的:

  • Object.keysObject.valuesObject.entries
  • for..in 循环
  • JSON.stringify

但是,由于第4阶段的提议:按枚举顺序,不久(可能在ES2020中),规范保证以与其他方法相同的确定性方式来迭代这些以前不可信任的方法的属性顺序

就像具有保证迭代顺序的方法(如Reflect.ownKeysObject.getOwnPropertyNames)一样,先前未指定的方法也将按以下顺序进行迭代:

  • 数字数组键,按升序排列
  • 所有其他非符号键,按插入顺序
  • 符号键,按插入顺序

这几乎是每个实现都已经做的,但是新提议将使它成为正式的。

尽管当前规范以迭代顺序“ 几乎完全未指定,但实际引擎趋向于更加一致:”

ECMA-262中缺乏特异性并不能反映现实。在过去的讨论中,实现者观察到for-for的行为存在一些限制,任何想要在网络上运行代码的人都必须遵循。

因为每个实现都已经可以预测地遍历属性,所以可以将其放入规范中而不会破坏向后兼容性。


当前有几种奇怪的情况,实现尚无法达成共识,在这种情况下,结果顺序将继续不确定。为了保证财产顺序

被迭代的对象或其原​​型链中的任何内容都不是代理,类型化数组,模块名称空间对象或宿主外来对象。

在迭代过程中,对象及其原型链中的任何内容都没有原型更改。

在迭代过程中,对象及其原型链中的任何内容均未删除任何属性。

对象的原型链中没有任何内容在迭代过程中添加。

在迭代过程中,对象或其原​​型链中的任何属性都没有可枚举性更改。

没有任何不可枚举的属性会掩盖不可枚举的属性。

蛋蛋L 2020.03.11

刚刚发现这很难。

使用React with Redux,每次更改存储时都会刷新我想遍历的状态容器的键以生成子代(根据Redux的不变性概念)。

因此,为了使用Object.keys(valueFromStore)I Object.keys(valueFromStore).sort(),我至少现在对这些键具有字母顺序。

伽罗前端 2020.03.11

根据JSON标准

对象是零个或多个名称/值对无序集合,其中名称是字符串,值是字符串,数字,布尔值,null,对象或数组。

(强调我的)。

因此,不,您不能保证订单。

Near神奇 2020.03.11

在ES2015中,它可以,但不是您可能认为的

直到ES2015才保证对象中键的顺序。它是实现定义的。

但是,在ES2015中指定。像JavaScript中的许多事情一样,这样做是出于兼容性目的,并且通常反映了大多数JS引擎中的现有非官方标准(您知道-谁是例外)。

该顺序在规范中的抽​​象操作OrdinaryOwnPropertyKeys下定义,该操作支持对对象自己的键进行迭代的所有方法。释义,顺序如下:

  1. 所有整数索引键(这样的东西"1123""55"等),在上升的数字顺序。

  2. 所有不是整数索引的字符串键(按创建顺序(最早的优先顺序))。

  3. 所有符号键,按创建顺序(最早的顺序)。

说这个命令不可靠是很愚蠢的-它是可靠的,可能不是您想要的,现代浏览器正确地实现了这个命令。

一些例外情况包括枚举继承的键的方法,例如for .. in循环。for .. in根据规范循环不保证秩序。

LEY老丝 2020.03.11

在现代浏览器中,您可以使用Map数据结构代替对象。

开发人员mozilla>地图

Map对象可以按插入顺序迭代其元素。

逆天理查德 2020.03.11

是(用于非整数键)。

大多数浏览器将对象属性迭代为:

  1. 以升序排列的整数键(以及像“ 1”这样的字符串解析为整数)
  2. 字符串键,按插入顺序排列(ES2015保证这样做,并且所有浏览器都遵守)
  3. 符号名称,按插入顺序排列(ES2015保证此名称,并且所有浏览器都遵守)

一些较旧的浏览器将类别#1和#2组合在一起,以插入顺序迭代所有键。如果您的键可能解析为整数,则最好不要依赖任何特定的迭代顺序。

保留当前语言规范(自ES2015起)的插入顺序,但键解析为整数(例如“ 7”或“ 99”)的情况除外,在这种情况下浏览器的行为会有所不同。例如,当键解析为数字时,Chrome / V8不遵守插入顺序。

旧语言规范(ES2015之前):迭代顺序在技术上未定义,但所有主流浏览器均符合ES2015行为。

请注意,ES2015行为是语言规范受现有行为驱动的一个很好的例子,而不是相反。要更深入地了解这种向后兼容的心态,请参阅http://code.google.com/p/v8/issues/detail?id=164,这是一个Chrome错误,其中详细介绍了Chrome迭代顺序行为背后的设计决策。在该错误报告中,每(有一些自以为是)评论:

标准始终遵循实现,这就是XHR的来历,而Google则通过实现Gears然后采用等效的HTML5功能来做同样的事情。正确的解决方法是让ECMA将事实上的标准行为正式纳入规范的下一个修订版。

Stafan卡卡西 2020.03.11

在撰写本文时,大多数浏览器确实以插入时返回的顺序返回属性,但是明确地不能保证其行为,因此不应该依赖它。

ECMAScript规范常说的:

未指定枚举属性...的机制和顺序。

但是,在ES2015及更高版本中,非整数密钥将按插入顺序返回。

Eva理查德阳光 2020.03.11

The iteration order for objects follows a certain set of rules since ES2015, but it does not (always) follow the insertion order. Simply put, the iteration order is a combination of the insertion order for strings keys, and ascending order for number-like keys:

// key order: 1, foo, bar
const obj = { "foo": "foo", "1": "1", "bar": "bar" }

Using an array or a Map object can be a better way to achieve this. Map shares some similarities with Object and guarantees the keys to be iterated in order of insertion, without exception:

Map中的键是有序的,而添加到对象中的键则没有顺序。因此,在对其进行迭代时,Map对象将按插入顺序返回键。(请注意,在ECMAScript 2015规范中,对象确实保留了字符串和符号键的创建顺序,因此仅使用字符串键遍历对象即会按插入顺序产生键)

请注意,在ES2015之前根本无法保证对象中的属性顺序。ECMAScript第三版(pdf)中对象的定义

4.3.3对象

对象是对象类型的成员。它是属性的无序集合,每个属性都包含原始值,对象或函数。存储在对象属性中的函数称为方法。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android