随着 ES6 标准的普及，前端开发者已经可以使用更加现代化的 JavaScript 语法。而其中有一个比较实用的新特性就是默认参数，可以让函数在调用时不需要传入全部参数。但是默认参数在旧的 JavaScript 引擎上并不被支持，因此我们需要使用 Babel 进行编译。
什么是默认参数？
默认参数是一种可以指定函数的参数默认值的语法。我们可以在函数定义的时候为其中的一个或多个参数设置默认值，这样在函数调用的时候如果没有传入对应的参数，就会使用默认值。
function foo(a = 1, b = 2) {
console.log(a, b);
}
foo(); // 输出结果为：1 2
foo(3); // 输出结果为：3 2Babel 是什么？
Babel 是一个 JavaScript 编译器，可以将 ES6+ 的语法转换成浏览器或 Node.js 可以理解的 ES5 语法，从而可以在不支持最新 JavaScript 语法的环境中运行。Babel 可以使用相应的插件来支持不同的 ES6 语法特性，可以按需安装。
Babel 默认参数转换
在默认参数出现之前，我们通常使用以下方式为函数定义默认值：
function foo(a, b) {
a = a || 1;
b = b || 2;
console.log(a, b);
}
foo(); // 输出结果为：1 2
foo(3); // 输出结果为：3 2这种方式是存在缺陷的，比如当我们想为 a 传入数字 0 的时候，就会被解释为假值而使用了默认值 1。而使用默认参数就可以解决这个问题，同时代码更简洁易读。
下面我们可以通过 Babel 将默认参数转换为 ES5 语法。
新建项目并安装 Babel
首先打开命令行界面，进入一个新建的空白目录，初始化项目。
npm init -y
然后安装 babel-cli、babel-preset-env。
npm install --save-dev babel-cli babel-preset-env
添加转换脚本
在项目根目录下新建一个 src 目录，添加一个 index.js 文件并输入以下内容。
function foo(a = 1, b = 2) {
console.log(a, b);
}
foo(); // 输出结果为：1 2
foo(3); // 输出结果为：3 2我们可以先用 npx babel src --out-dir dist 命令编译整个 src 目录下的代码到 dist 目录下。
在 package.json 中添加 "build": "babel src --out-dir dist" 命令，在命令行中执行 npm run build 可以生成转换后的代码。
// javascriptcn.com 代码示例
{
"name": "babel-default-params",
"version": "1.0.0",
"scripts": {
"build": "babel src --out-dir dist"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0"
}
}查看转换后的代码
转换后的代码如下：
// javascriptcn.com 代码示例
"use strict";
function foo() {
var a = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
var b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
console.log(a, b);
}
foo(); // 输出结果为：1 2
foo(3); // 输出结果为：3 2可以发现，在转换后的代码中 arguments 会被用来检测是否传入了参数，并且使用了 a !== undefined 的判断来处理默认值。
总结
Babel 是一个强大的 JavaScript 编译器，可以将 ES6+ 语法转换成 ES5 可以兼容的语法。默认参数是 ES6 的一个实用特性，可以让函数参数简单易用。使用 Babel 进行编译可以保证代码的兼容性，同时提升代码质量和可读性。
参考
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65861fd1d2f5e1655d08bef7