随着 ES6 标准的普及,前端开发者已经可以使用更加现代化的 JavaScript 语法。而其中有一个比较实用的新特性就是默认参数,可以让函数在调用时不需要传入全部参数。但是默认参数在旧的 JavaScript 引擎上并不被支持,因此我们需要使用 Babel 进行编译。
什么是默认参数?
默认参数是一种可以指定函数的参数默认值的语法。我们可以在函数定义的时候为其中的一个或多个参数设置默认值,这样在函数调用的时候如果没有传入对应的参数,就会使用默认值。
function foo(a = 1, b = 2) { console.log(a, b); } foo(); // 输出结果为:1 2 foo(3); // 输出结果为:3 2
Babel 是什么?
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
可以生成转换后的代码。
-- -------------------- ---- ------- - ------- ----------------------- ---------- -------- ---------- - -------- ------ --- --------- ----- -- ------------------ - ------------ ---------- ------------------- -------- - -
查看转换后的代码
转换后的代码如下:
-- -------------------- ---- ------- ---- -------- -------- ----- - --- - - ---------------- - - -- ------------ --- --------- - ------------ - -- --- - - ---------------- - - -- ------------ --- --------- - ------------ - -- -------------- --- - ------ -- ------- - ------- -- ------- -
可以发现,在转换后的代码中 arguments
会被用来检测是否传入了参数,并且使用了 a !== undefined
的判断来处理默认值。
总结
Babel 是一个强大的 JavaScript 编译器,可以将 ES6+ 语法转换成 ES5 可以兼容的语法。默认参数是 ES6 的一个实用特性,可以让函数参数简单易用。使用 Babel 进行编译可以保证代码的兼容性,同时提升代码质量和可读性。
参考
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/65861fd1d2f5e1655d08bef7