操作对象文字:按特定顺序添加属性 [英] Manipulate Object literal: add property in certain order
问题描述
我正在开发一种工具来在线创建Nassi-Shneiderman图. 每个图的模型只是一个对象文字，它存储着具有无限可能子代的所有内容.
I'm developing a tool to create Nassi-Shneiderman diagrams online. The model for each diagram is simply an object literal, storing everything with unlimited possible children.
这将导致填充如下所示的视图:
this then results in a view populated like the following:
现在，如果我想在第一个序列之后的while循环中添加一个序列，那么我就不得不在现有的两个对象之间添加一个子对象孩子们.不过，默认情况下，对象属性的顺序是不可编辑的，W3C表示，不应依赖于属性的顺序，因为可以区分浏览器. 我知道我可以将对象的顺序存储在数组中，但是然后我必须重写填充视图的递归循环，依此类推.
Now if I want to add let's say a sequence into the while loop after the first sequence, I somehow have to add a child to the object between the two existing children. The order of an object's properties is not editable by default though and W3C says that one should not rely on the order of the properties because the can differentiate between browsers. I know I could store the object's order in an array, but then I'd have to rewrite the recursive loop which populates the view and so on..
我可以以某种方式操纵对象属性的顺序吗? 我不介意使用第三方库.
Can I somehow manipulate the order of an object's properties? I don't mind using 3rd party libraries.
顺序"是指使用for(prop in obj)循环遍历对象属性的顺序.
By "order" I mean the order an object's properties get iterated over using a for(prop in obj) loop.
这是我的数据结构/对象的示例:
Here's an example of my data structure/object:
{
"procedure": {
"id": "content",
"child": {
"154": {
"class": "sequence",
"text": "json manually created in code",
"id": 154,
"contenteditable": "true"
},
"155": {
"class": "while",
"id": 155,
"child": {
"157": {
"class": "while-condition",
"text": "while JSON from File imported",
"id": 157,
"contenteditable": "true"
},
"158": {
"class": "while-body",
"id": 158,
"child": {
"159": {
"class": "sequence",
"text": "Sequence in a while loop",
"id": 159,
"contenteditable": "true"
},
"160": {
"class": "while",
"id": 160,
"child": {
"161": {
"class": "while-condition",
"text": "while parentNode.Whatever != FALSE",
"id": 161,
"contenteditable": "true"
},
"162": {
"class": "while-body",
"id": 162,
"child": {
"163": {
"class": "sequence",
"text": "Sequence even deeper nested",
"id": "163",
"contenteditable": "true"
}
}
}
}
}
}
}
}
},
"156": {
"class": "sequence",
"text": "Finish Procedure",
"id": 156,
"contenteditable": "true"
}
}
}
}
推荐答案
(ECMAScript 2015("ES6")更改了内容:请参见答案末尾的更新.)
对象属性没有顺序(无论是JavaScript还是JSON). (下面有更多内容.)要订购，必须使用数组，而不是对象属性.您必须将结构调整为具有children: []而不是child: {}.然后，当然要在其中两个之间添加条目是使用splice(
Object properties have no order (neither in JavaScript nor in JSON). (More below.) To have order, you must use an array, not object properties. You'll have to adjust your structure to have children: [] rather than child: {}. Then, of course, adding an entry between two of them is a matter of using splice (spec | MDN).
关于对象属性顺序及其缺失:
About object property order and the lack thereof:
从 JSON网站:
一个对象是一组无序的名称/值对.
(我的重点)
在JavaScript中，未指定for-in循环访问属性的顺序.参见规范的§12.6.4:
In JavaScript, the order in which properties are visited by a for-in loop is not specified — see §12.6.4 of the spec:
枚举属性的机制和顺序(第一个算法中的步骤6.a，第二个算法中的步骤7.a)未指定..
(我的重点)
因此，每个JavaScript引擎都可以执行所需的操作.它可能会按照将它们添加到对象中的顺序来访问它们(许多引擎似乎都这样做了).或按字母顺序.或者按照最方便的方式使用它们的属性存储机制，这很可能是哈希树，因此，如果您不知道哈希机制，那么看似是随机的.
Therefore each JavaScript engine can do whatever it wants. It might visit them in the order they were added to the object (a number of engines seem to do that). Or in alphabetic order. Or in order according to whatever is most convenient for their property storage mechanism, which very well may be a hash tree, and therefore seemingly-random if you don't know the hashing mechanism.
类似地， Object.keys 没有保证订单，规范只说如果引擎保证for-in的订单，则Object.keys必须遵循该订单.但由于该规范不需要引擎来保证订单...
Similarly, Object.keys has no guaranteed order, all the spec says is that if an engine guarantees an order for for-in, then Object.keys must follow that order. But as the spec doesn't require engines to guarantee an order...
As of ECMAScript 2015 (ES6), object properties have order now:
- 让键为一个新的空列表.
- 对于每个作为整数索引的 O 的属性键 P (按数字索引升序)
- 添加 P 作为键的最后一个元素.
- Let keys be a new empty List.
- For each own property key P of O that is an integer index, in ascending numeric index order
- Add P as the last element of keys.
- 添加 P 作为键的最后一个元素.
- Add P as the last element of keys.
- 添加 P 作为键的最后一个元素.
- Add P as the last element of keys.
...因此您确实可以通过控制将属性添加到对象的顺序来做到这一点.我不建议您这样做，但现在可以在兼容的引擎上实现.
...so you could indeed do this by manipulating the order in which the properties were added to the object. I'm not suggesting you do it, but it's possible now, on compliant engines.
这篇关于操作对象文字:按特定顺序添加属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
