用于循环转换性能的Babel

时间:2017-10-23 06:58:47

标签: javascript babel

我经常使用for of循环来提高编写代码的可读性和易用性,但是在使用babel进行转换后,我发现代码膨胀并且现在担心性能。

这就是我的意思

输入代码

const obj = {
  a: 2,
  bar: 'baz',
  identity: x => x
};

for (const [ key, val ] of Object.entries(obj)) {
  console.log(key, val);
}

输出代码

'use strict';

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

var obj = {
  a: 2,
  bar: 'baz',
  identity: function identity(x) {
    return x;
  }
};

var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;

try {
  for (var _iterator = Object.entries(obj)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
    var _step$value = _slicedToArray(_step.value, 2),
        key = _step$value[0],
        val = _step$value[1];

    console.log(key, val);
  }
} catch (err) {
  _didIteratorError = true;
  _iteratorError = err;
} finally {
  try {
    if (!_iteratorNormalCompletion && _iterator.return) {
      _iterator.return();
    }
  } finally {
    if (_didIteratorError) {
      throw _iteratorError;
    }
  }
}

显然,已编译的for of循环有更多的代码......

但我的问题是,我应该停止使用for of循环,因为可能"performance issues"使用已转换的代码(babel使用iterators等等来执行简单的循环),以及如果是这样,我应该使用什么呢?

1 个答案:

答案 0 :(得分:1)

这听起来像是通用的'我是否应该停止使用X,因为可能存在性能问题?'

如果X现在没有导致性能问题,并且您没有任何证据表明它将来会导致性能问题,请继续使用它。

如果是或将导致性能问题,请寻找替代方案。

在X为for..of的情况下,您的备选方案基于编写具有相同行为的更多代码。

您的示例专门迭代一个Object,因此忽略事实for..of也支持迭代集合和数组,您只需要编写更多代码来迭代对象属性:

for (const [ key, val ] of Object.entries(obj)) {
  console.log(key, val);
}

Object.keys(obj).forEach(function(key) {
  const val = obj[key];
  console.log(key, val);
});

// You could also stick with a `for` loop (but note this isn't restricted to 
// the object's 'own' properties in the same way as values() and entries()
for (const key in obj) {
  const val = obj[key];
  console.log(key, val);
}