解决 ES6 中函数参数的默认值出现的兼容性问题

解决 ES6 中函数参数的默认值出现的兼容性问题

ES6是JavaScript的标准之一，它引入了很多新特性和语法糖，比如函数参数的默认值。在ES6以前，我们需要用比较繁琐的方式来给函数参数设置默认值。ES6中，我们可以使用更加简洁的方式来实现。但是，在某些浏览器中，这种语法并不支持。本文将详细介绍ES6中函数参数默认值的用法及其兼容性问题，并给出相应的解决方案。

ES6函数参数默认值的用法

ES6中，函数参数默认值可以在参数名后面使用等号来指定，例如：

function foo (x = 1, y = 2) {
  console.log(x, y)
}

在函数foo中，x和y都有默认值。如果不传入参数，x和y将分别取默认值1和2。如果传入参数，则会覆盖默认值。例如：

foo(3, 4) // 输出 3 4
foo(undefined, 4) // 输出 1 4
foo() // 输出 1  2

ES6函数参数默认值的兼容性问题

然而，某些浏览器（如IE）不支持这种新语法。例如，在IE中，以下函数会报错：

function bar (x = 1) {
  console.log(x)
}

因此，如果你想在跨浏览器的环境下使用ES6的函数参数默认值，你需要注意兼容性问题。

解决方案

有两种解决方案可以解决ES6函数参数默认值的兼容性问题。

1. 使用传统方式设置默认值

在ES6以前，我们可以用传统的方式来设置函数参数默认值。例如：

function baz (x, y) {
  x = x || 1
  y = y || 2
  console.log(x, y)
}

这样，如果不传入参数，x和y将分别取默认值1和2。如果传入参数，则会覆盖默认值。例如：

baz(3, 4) // 输出 3 4
baz(undefined, 4) // 输出 1 4
baz() // 输出 1  2

这种方式的缺点是代码比较冗长，阅读起来较为繁琐。

2. 使用Babel转码

Babel是JavaScript的一个转码器，可以将ES6的代码转换为兼容性更好的代码。如果你想在跨浏览器的环境下使用ES6的函数参数默认值，可以使用Babel将代码转码。例如，将以下ES6代码：

function qux (x = 1) {
  console.log(x)
}

使用Babel的转码器（babel-core）和转码规则（babel-preset-env）转码后得到以下代码：

function qux () {
  var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;

  console.log(x);
}

这样，代码就可以跨浏览器使用了。

总结

ES6中，函数参数默认值是一种非常方便的语法糖，可以减少代码的冗长度。然而，在某些浏览器中，这种语法并不支持。如果你想在跨浏览器的环境下使用ES6的函数参数默认值，你需要注意兼容性问题。解决方案有传统方式设置默认值和使用Babel转码。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646c2501968c7c53b0b2ff7e