在 ES6 中使用默认值和扩展语法

Question

在研究 JavaScript 的功能时，我在同一函数中使用了默认参数和扩展语法。

let whatIsThis = (a, b = 2, ...c) => {
    console.log("a = " + a, "b = " + b,"c = " + c)
}

whatIsThis(a = 1, c = [2,3,4,5,6,7,8])

在运行之后，我希望输出是这样的：

"a = 1"
"b = 2"
"c = 2,3,4,5,6,7,8"

但我却得到了这个：

"a = 1"
"b = 2,3,4,5,6,7,8"
"c = "

为什么这不起作用？

Answer 1

您需要调用为 whatIsThis(a = 1, undefined , c = [2,3,4,5,6,7,8])，因为您在函数参数中间使用默认参数，因此应调用为 undefined 以使用默认值。

let whatIsThis = (a, b = 2, ...c) => {
    console.log("a = " + a, "b = " + b,"c = " + c)
}

whatIsThis(a = 1, undefined , c = [2,3,4,5,6,7,8])

Answer 2

Javascript 没有 命名参数 。参数仅根据 按位置 分配给参数。您不能按名称分配参数，也不能简单地跳过b 参数。这个：

whatIsThis(a = 1, c = [2,3,4,5,6,7,8])

相当于：

a = 1; c = [2,3,4,5,6,7,8]; whatIsThis(a, c);

a = 1这里是创建一个新的全局变量的赋值操作；它与函数的参数a无关。

Answer 3

您可以使用 undefined 作为第二个参数并使用 spread syntax ... for all other parameters of the function who are collected with rest parameters ....

JavaScript 没有命名参数。

您需要按照函数签名的顺序交出参数

let whatIsThis = (a, b = 2, ...c) => {
  console.log("a = " + a, "b = " + b, "c = " + c)
}

whatIsThis(1, undefined, ...[2, 3, 4, 5, 6, 7, 8])
//            ^^^^^^^^^                             takes default value
//                       ^^^^^^^^^^^^^^^^^^^^^^^^   spreads values for rest parameters

Answer 4

函数参数的顺序很重要。在这种情况下，函数顺序为 (a, b = 2, ...c) 但函数仅使用两个参数调用 whatIsThis(a = 1, c = [2,3,4,5,6,7,8]).

所以基本上参数c在调用函数时是未定义的，参数b指的是数组[2,3,4,5,6,7,8].

另请注意，调用这样的函数 whatIsThis(a = 1, c = [2,3,4,5,6,7,8]) 会导致一些 linting 工具和 IDE 抛出错误。

Answer 5

这是因为您不能将命名参数传递给 JavaScript 中的函数。当你执行 whatIsThis(a = 1, c = [2,3,4,5,6,7,8]) 时，它的真正含义是 whatIsThis(1, [2,3,4,5,6,7,8 ]) (因为a = 1语句returns 1).

你可以做的是将默认参数移到末尾（这通常是一个好习惯）或将你的参数包装在对象中。例如

let whatIsThis = ({a, b = 2, c}) => {
    console.log("a = " + a, "b = " + b,"c = " + c)
}

whatIsThis({a: 1, c: [2,3,4,5,6,7,8]})

在 ES6 中使用默认值和扩展语法

Using Default Values and Spread Syntax in ES6

javascript

default-parameters

ecmascript-6

spread-syntax