hugh 的个人博客

对象属性如何保证原样输出

问题:从后台接口接受到一个对象,原样解析到浏览器展示时发现属性的顺序并不是接口返回的, 由此引发改问题的探讨

问题现象

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描述如下
  • 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