在线测试

为了使用新的ES Next新特性，必不可少的一环就是使用Babel，它最核心的功能就是编译ES Next代码，进行降级处理，规避兼容性问题。

• 它的核心原理是使用AST（抽象语法树）对源码进行分析并转为目标代码
• 例如要适配xp系统装的浏览器版本是Chrome 45，配置bebel.config.json的时候就配置"targets": {"chrome": "45" }

一、一些简单的编译结果

1. 箭头函数

// 编译前
Promise.resolve().then(() => {
    this.mode = '';
})

// 编译后
var _this = this;
Promise.resolve().then(function () {
  _this.mode = '';
});

2. let 的块级作用域

在ES5中一般我们使用【立即执行函数】来实现变量的块级作用域，babel的实现方式是【更改变量的名称】，以确保在块外访问不到

// 编译前
let num = 40;
if (this.mode === 'hour') {
    let num = 12;
} else {
    let num = 20;
}

// 编译后
var num = 40;
if (this.mode === 'hour') {
  var _num = 12; // 对原本let声明的同名的变量进行了重命名
} else {
  var _num2 = 20;
}

3. 经典for循环问题——用闭包来保存了 i 变量

// 编译前
let arr = []
for (let i = 0; i < 30; i++) {
    arr[i] = function () { console.log(i) }
}

// 编译后
var arr = [];
var _loop = function _loop(i) {
    arr[i] = function () {
        console.log(i);
    };
};
for (var i = 0; i < 30; i++) {
    _loop(i);
}

4. 默认参数

// 编译前
function defArgs(num = 10, size = 2) {
    // 测试默认参数
}

// 编译后
function defArgs() {
    var num = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
    var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
} 

5. 剩余参数

// 编译前
function leftArgs(num, size, ...args) {
    console.log(args)
}

// 编译后
// 先确认了args的长度，然后用index来赋值
function leftArgs(num, size) {
    for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
        args[_key - 2] = arguments[_key]; // 也能直接push
    }
    console.log(args);
}

6. 可选链操作符

// 编译前
const data = {};
const b = data?.person?.name;

// 编译后
var _data$person;
var data = {};
var b = data === null || data === void 0 ? void 0 : (_data$person = data.person) === null || _data$person === void 0 ? void 0 : _data$person.name;

7. 变量值交换

// 编译前
[first, second] = [second, first];

// 编译后
var _ref = [second, first];
first = _ref[0];
second = _ref[1];
_ref;

二、一些代码略多的编译结果

1. Rest运算符

剩余参数语法允许我们将一个不定数量的参数表示为一个数组

• 当arr类型已知：

// 编译前
let arr = [1, 2, 3]
let [first, ...lst] = arr;

// 编译后
var arr = [1, 2, 3];
var first = arr[0],
    lst = arr.slice(1);

• 当arr未知：

let [first, ...lst] = arr;

2. 扩展运算符

• 数组

// 编译前
let arr = [1, 2, 3]
let arr1 = [30, ...arr, 13, ...arr, 50]

// 编译后
var arr = [1, 2, 3];
var arr1 = [30].concat(arr, [13], arr, [50]);

• 当arr类型未知时，（在线测试）

let arr1 = [30, ...arr];

• 扩展对象

let a = { test: '', ...obj }

3. class

class Person{}

4. extends

class Drinks {
    constructor(capacity) {
        this.capacity = capacity;
    }
}
class Coke extends Drinks {
    constructor(capacity) {
        super(capacity);
    }
}