张春成
2023/04/19阅读:13主题:默认主题
封装的方法不一定更优
封装的方法不一定更优
本文比较无聊,是针对 javascript 语言中的 flatMap 和自定义的 for-loop 方法进行速度比较,比较结果表明,其封装的 flatMap 方法在速度上略差于自定义的 for-loop。这说明虽然 javascript 脚本执行效率已经很高,但仍具有较大的优化空间。
Compare speed between .flatMap and for-loop in javascript[1]
-
封装的方法不一定更优[2] -
实验结果[3] -
附录:对比程序[4] -
附录:实验材料[5]
-
实验结果
按道理说,实验结果应该放在最后介绍,但这样做会将有用的结果压到最后,导致重点不明确。因此本文的顺序是按照其重要程度进行排序,从实验逻辑上说却被完全倒置了。
本文尝试对地理数据进行解析,解析方法分为两种
-
flatMap 方法,该方法是 javascript 自带的方法,方法对数组中的每个元素应用给定的回调函数,然后将结果展开一级,返回一个新数组;
Array.prototype.flatMap() - JavaScript | MDN[6]
-
for-loop 方法,该方法是根据实际情况开发的“笨笨的”数组遍历方法,该方法与 flatMap 方法的效果相同。
本文最重要的结果是,flatMap 方法的程序样例,它的优势是结构紧密,且语意明确;使用 for-loop 方法的程序样例,它的弱点是结构松散,但胜在无效操作少,因此执行效率更高。下图是对两种方法进行横向比较的计算时间统计图,它说明 for-loop 方法运算效率更高。
另外,由于程序测试情况较为复杂,为了公平起见,我们采取了两个方法打乱顺序的方案进行速度测试,因此各个方法在每次实验中均进行了多次计算,该轮实验重复了 1000 次。并且,随着实验次数的增加,计算时间趋于平稳。

速度比较图
// Simulation by [count] times, and records the time costing.
for (i = 1; i < count; ++i) {
var { t: t0 } = compute0(),
{ t: t1 } = compute1(),
{ t: t2 } = compute1(),
{ t: t3 } = compute0();
// Accumulate the times.
}
附录:对比程序
以下代码片断分别是使用 .flatMap 方法的程序样例,它的优势是结构紧密,且语意明确;使用 for-loop 方法的程序样例,它的弱点是结构松散,但胜在无效操作少,因此执行效率更高。
/**
* Method for .flatMap method
*/
function compute0() {
var tic, toc, res;
tic = new Date();
res = counties.features.flatMap(
({
geometry: { coordinates, type: geometryType },
id,
properties: { name }
}) => {
return coordinates.map((coordinates) => {
return { coordinates, name, id, geometryType };
});
}
);
toc = new Date();
return { res, t: toc - tic };
}
/**
* Method for for-loop method
*/
function compute1() {
var tic,
toc,
res = [],
coordinates,
name,
id,
geometryType;
tic = new Date();
for (let i = 0; i < counties.features.length; ++i) {
id = counties.features[i].id;
name = counties.features[i].properties.name;
geometryType = counties.features[i].geometry.type;
for (
let j = 0;
j < counties.features[i].geometry.coordinates.length;
++j
) {
coordinates = counties.features[i].geometry.coordinates[j];
res.push(Object.assign({}, { id, name, geometryType, coordinates }));
}
}
toc = new Date();
return { res, t: toc - tic };
}
附录:实验材料
地理数据集的规范化数据往往具有复杂的嵌套结构(见原始数据结构图),虽然这样设计有它的好处,但使用和浏览却多有不便。假如在特定应用场景中,我们将它解包就可以用更加直观的方式对其进行操作和浏览(见解包后数据结构图)。

原始数据结构图

解包后的数据结构图
参考资料
Compare speed between .flatMap and for-loop in javascript: https://observablehq.com/@listenzcc/compare-speed-between-flatmap-and-for-loop-in-javascript
[2]封装的方法不一定更优: #封装的方法不一定更优
[3]实验结果: #实验结果
[4]附录:对比程序: #附录对比程序
[5]附录:实验材料: #附录实验材料
[6]Array.prototype.flatMap() - JavaScript | MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap
作者介绍