封装的方法不一定更优

本文比较无聊，是针对 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 };
  }

附录：实验材料

地理数据集的规范化数据往往具有复杂的嵌套结构（见原始数据结构图），虽然这样设计有它的好处，但使用和浏览却多有不便。假如在特定应用场景中，我们将它解包就可以用更加直观的方式对其进行操作和浏览（见解包后数据结构图）。

原始数据结构图

解包后的数据结构图

参考资料

[1]

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