Question

关于javascript语言的这个问题。简单地说我们有一张地图，我们按照以下方式插入项目

var dataMap=new Map();

//First Mechanism
//firstly we can think of structure of values of map can be JSONArray of objects
 dataMap.set("key1",[{'id':12,'name':"obj1"}]); // init
// and,then insert  new element to JSON Array which holds by map using 'key1'
dataMap.get("key1").push({'id':23,'name':"obj47"});//updated, now value of 'key1' is an JSON array which holds two elements
// expect 'key1' ->   [{'id':12,'name':"obj1"},{'id':23,'name':"obj47"}]          

//Second mechanism
// next we cant think of structure of values of map as JSONObject of Arrays
dataMap.set("key1",{'id':[12],'name':["obj1"]}); // init
// then we proceed with update operations like this
dataMap.get("key1").id.push(23);
dataMap.get("key1").name.push("obj47"); // two operations to insert items to respective arrays.
// expect 'key1' ->{'id':[12,23],'name':["obj1","obj47"]}

哪种方法最有效，最有效？

我们认为我们对地图进行了大量的插入操作，如果我们处于哪个更好的表现？

（如果我做错了请更正，我想尽可能地简化问题，这就是为什么）谢谢。

Answer 1

为了好奇，我继续使用console.time()对结果进行基准测试。

启动一个可用于跟踪操作所需时间的计时器。您为每个计时器提供一个唯一的名称，最多可包含10,000个计时器在给定页面上运行。当您使用相同的方法调用console.timeEnd（）时 name，浏览器将输出经过的时间（以毫秒为单位）自计时器启动以来。

现在你可以争论它的结果是否可靠，考虑到还有其他因素，如浏览器缓存等。

这些是我机器上 1000000 操作的结果*。

Chrome Version 61.0.3163.91 (Official Build) (64-bit)

// 1st run
default: 2217.048095703125ms
default: 3032.159912109375ms
// 2nd run
default: 1948.16796875ms
default: 3320.7431640625ms
// 3rd run
default: 2177.461181640625ms
default: 2989.448974609375ms


Firefox 55.0.3 (32-bit)

// 1st run
default: 2146.64ms
default: 2390.11ms
// 2nd run
default: 1863.7ms
default: 2264.02ms
// 3rd run
default: 1751.7ms
default: 2283.6ms

您可以看到差异不是很大，不应该是影响您决定的因素。正如@Nina Scholz非常正确地提到的那样，选择能让您的生活更轻松的数据结构。

[*]基准测试中使用的代码作为参考：

let dataMap = new Map();
const diff = 1000000;
let key = null;

console.time();
for(let i = 0; i < 1000000; i++){
    key = `key${i}`;
    dataMap.set(key, [{'id': i, 'name': `obj${i}`}]);
    dataMap.get(key).push({'id': i + diff, 'name': `obj${i + diff}`})
}   
console.timeEnd();

dataMap = new Map();

console.time();
for(let i = 0; i < 1000000; i++){
    key = `key${i}`;
    dataMap.set(key, {'id':[i], 'name': [`obj${i}`]});
    dataMap.get(key).id.push(i + diff);
    dataMap.get(key).name.push(`obj${i + diff}`);
}
console.timeEnd();

或试试online。

JS对象阵列对JS阵列对象高效和性能

1 个答案: