我的开源
对象属性如何保证原样输出
问题：从后台接口接受到一个对象，原样解析到浏览器展示时发现属性的顺序并不是接口返回的， 由此引发改问题的探讨
问题现象
let o = {a:1,b:2,1:3,'@1':4}
for(let i in o) {
console.log(i)
}
// 1,a,b,@1
本意是希望输出a、b、1、@1
由此可能对象中的属性是无序的， 具体展示的顺序由浏览器决定
如果才能得到想要的结果呢
1. Map
Map对象在遍历时会根据插入时的顺序进行
MDN描述如下
MDN描述如下
-
Objects 和 Maps 类似的是，它们都允许你按键存取一个值、删除键、检测一个键是否绑定了值。因此（并且也没有其他内建的替代方式了）过去我们一直都把对象当成 Maps 使用。不过 Maps 和 Objects 有一些重要的区别，在下列情况里使用 Map 会是更好的选择：
-
一个Object的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值，包括函数、对象、基本类型。
- Map 中的键值是有序的，而添加到对象中的键则不是。因此，当对它进行遍历时，Map 对象是按插入的顺序返回键值。 你可以通过 size 属性直接获取一个 Map 的键值对个数，而 Object 的键值对个数只能手动计算。
- Map 可直接进行迭代，而 Object 的迭代需要先获取它的键数组，然后再进行迭代。
- Object 都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。虽然 ES5 开始可以用 map = Object.create(null) 来创建一个没有原型的对象，但是这种用法不太常见。
- Map 在涉及频繁增删键值对的场景下会有些性能优势。
var o = new Map();
o.set('a', 1)
o.set('b',2)
o.set(1,3)
o.set('@1',4)
for(var [key,value] of o) {
console.log(key)
}
// a,b,1,@1
2. 使用双数组，一个存放键一个存放值， 利用数组的有序性来实现
var keys = ['a', 'b', 1, '@1'] var values = [1,2,3,4]
3. 构建一个属性值为对象的数组
var o = [{a:1}, {b:2}, {1:3}, {'@1':4}]
标题：对象属性如何保证原样输出
作者：hugh0524
地址：https://blog.uproject.cn/articles/2019/04/02/1554217833566.html
0 0