ES6知识点整理之函数数组参数的默认值及其解构应用示例

函数参数的默认值

在ES6之前，函数的参数如果没有传入值，则默认为undefined。

function func(a, b) {
  console.log(a, b);
}

func(1) //输出：1 undefined

在ES6中，函数的参数可以设置默认值，当没有传入该参数时，将使用设定的默认值。默认值可以是任何类型的值，包括函数调用、对象和数组等。

function func(a, b=2) {
  console.log(a, b);
}

func(1) //输出：1 2

如果一个参数的默认值是一个表达式，则每次函数被调用时，都会重新计算表达式的值。这意味着不能将它们放在循环或条件中。

function func(a, b=getB()) {
  console.log(a, b);
}

function getB() {
  return 2;
}

func(1) //输出：1 2

函数参数的解构赋值

在使用函数的参数时，我们通常会使用解构赋值的方法。ES6允许将对象和数组作为函数参数，同时使用解构赋值来提取参数的值。

对象参数的解构赋值

function func({a, b}) {
  console.log(a, b);
}

func({a:1, b:2}) //输出：1 2

当然我们可以给参数设置默认值：

function func({a=0, b=2}) {
  console.log(a, b);
}

func({a:1}) //输出：1 2

如果我们想把参数作为一个整体，而非解构它们，我们可以将它们包装在括号中：

function func({a, b} = {}) {
  console.log(a, b);
}

func() //输出：undefined undefined

数组参数的解构赋值

使用数组作为参数时，可以用解构赋值来提取参数的值。但是需要注意的是，数组的元素是按照顺序对应的，而对象的属性则是无序的。

function func([a, b]) {
  console.log(a, b);
}

func([1, 2]) //输出：1 2

同样，我们可以给数组参数设置默认值：

function func([a=0, b=2]) {
  console.log(a, b);
}

func([1]) //输出：1 2

如果我们不想提取所有的元素，可以使用圆括号来只提取部分元素：

function func([a, , b]) {
  console.log(a, b);
}

func([1, 2, 3]) //输出：1 3

如果传入的参数不是一个数组，将会在解构时抛出一个错误。

示例

例子1 - 计算圆的面积

我们可以使用默认参数将圆的半径设置为1：

function getAreaCircle(radius = 1) {
  return Math.PI * Math.pow(radius, 2);
}

console.log(getAreaCircle());    // 3.141592653589793
console.log(getAreaCircle(2));   // 12.566370614359172

例子2 - 交换变量的值

使用解构赋值来实现这个目前也很简单：

let a = 1, b = 2;

[b, a] = [a, b];

console.log(a, b);  // 2 1

这样可以让代码可读性更高。