babel是如何将es6+转化为es5的

294 阅读1分钟

1.let const;

es6:

const name = "xuerong"
let address = "China"

es5:

var name = "xuerong"
var address = "China"

2.箭头函数;

es6:

[4,5,6].map(item => item * 2 )

es5:

[4, 5, 6].map(function (item) {
  return item * 2;
});

3.数组/对象/字符串/函数参数解构赋值:

es6:

数组:let [a,b,c] = [11,22,33];
数组:const [x, y = 'b'] = ['a'];
对象:const { name, age } = {name: 'xuerong',age: '12'}
字符串:const [ a,b,c ] = 'app'
函数参数: function add([x, y]){
  return x + y;
}

add([1, 2]);

es5:

数组:
var a = 11,
    b = 22,
    c = 33;
数组:
var _ref = ['a'],
    x = _ref[0],
    _ref$ = _ref[1],
    y = _ref$ === void 0 ? 'b' : _ref$;
对象:
var _name$age = {
  name: 'xuerong',
  age: '12'
},
name = _name$age.name,
age = _name$age.age;
字符串:
var _app = 'app',
    a = _app[0],
    b = _app[1],
    c = _app[2];
函数参数:
function add(_ref) {
  var x = _ref[0],
      y = _ref[1];
  return x + y;
}

add([1, 2]);

4.模版字符串

es6:

`<ul>
  <li>first</li>
  <li>second</li>
</ul>
`

es5:

"<ul>\n  <li>first</li>\n  <li>second</li>\n</ul>\n";

5.for...of...:

es6:

const arr = ['red', 'green', 'blue'];
for(let v of arr) {
  console.log(v);
}

es5:

var arr = ['red', 'green', 'blue'];
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;

try {
  for (var _iterator = arr[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
    var v = _step.value;

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