随着 ECMAScript 6 的推出，JavaScript 的语言规范逐渐得到统一，但不同浏览器对不同规范的支持不同。为了解决这样的问题，Babel 应运而生。Babel 是一个 JavaScript 编译器，可以将最新的 ES6+ 代码转换成运行在不同浏览器中的 ES5 代码。
在 ES6 中，我们可以使用默认参数来简化函数的编写。例如：
function greet(name="world") {
console.log(`Hello, ${name}!`);
}这个函数接收一个可选参数 name，若没有传入，则默认为 "world"。但是，在某些浏览器中，该语法上面可能会报错，因此需要使用 Babel 将代码转换。
接下来，我们将学习如何使用 Babel 对 ES6 中的默认参数进行转换。
1. 安装 Babel
首先，我们需要安装 Babel。可以使用 npm 命令行工具来安装：
npm install -g babel-cli
2. 创建 .babelrc 文件
创建一个名为 .babelrc 的文件。这个文件是 Babel 配置文件，可以让我们定义要使用哪些 Babel 插件和预设。
{
"presets": ["@babel/preset-env"]
}在这个文件中，我们使用了一个名为 @babel/preset-env 的预设。该预设会帮我们自动识别代码中使用的 ECMAScript 和浏览器支持情况。在识别的基础上，Babel 会自动进行转换。
3. 转换默认参数
以下是一个使用默认参数的 ES6 函数：
function greet(name="world") {
console.log(`Hello, ${name}!`);
}我们可以使用以下命令来转换代码：
babel file.js --out-file file-compiled.js
这个命令会将 file.js 中的代码转换成 ES5 代码，并将转换后的代码保存在 file-compiled.js 文件中。
以下是转换后的代码：
function greet() {
var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "world";
console.log("Hello, " + name + "!");
}我们可以看到，在函数参数的开头使用了 var name = ... 的语法。这个语法是 ES5 支持的，因此可以在不同浏览器中运行。
4. 优化转换
默认情况下，Babel 会将默认参数转换成使用判断语句实现的代码。但是，这种转换方式比较低效。我们可以使用 @babel/plugin-transform-parameters 插件优化转换。首先，需要安装该插件：
npm install --save-dev @babel/plugin-transform-parameters
然后，在 .babelrc 文件中配置：
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-transform-parameters"]
}重新运行 Babel，可以看到转换出的代码使用了更高效的代码实现默认参数的功能。
总结
ES6 中的默认参数是一种简化函数编写的语法。但是，在某些浏览器中可能会报错。Babel 可以帮我们将 ES6 中的默认参数转换为 ES5 代码，从而在不同浏览器中运行。如果需要优化转换结果，我们还可以使用 @babel/plugin-transform-parameters 插件。
以上就是本文关于 Babel 如何转换 ES6 中的默认参数的介绍。希望本文能够为大家学习 Babel 提供一些指导意义。
示例代码：
// Hello World example with default parameter
function greet(name = "World") {
console.log(`Hello, ${name}!`);
}
greet(); // logs "Hello, World!"
greet("Everyone"); // logs "Hello, Everyone!"// Converted ES5 code without @babel/plugin-transform-parameters
function greet() {
var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "World";
console.log("Hello, " + name + "!");
}// Converted ES5 code with @babel/plugin-transform-parameters
function greet() {
var name = arguments.length > 0 ? arguments[0] : undefined;
name = name === undefined ? "World" : name;
console.log("Hello, " + name + "!");
}来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f32090f6b2d6eab3c9fe22