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

Posted 2023-02-22

【中文标题】在 ES6 中使用默认值和扩展语法

【英文标题】：Using Default Values and Spread Syntax in ES6

【发布时间】：2019-01-28 11:38:19

【问题描述】：

在浏览 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 = "

为什么这不起作用？

【问题讨论】：

您不能通过函数的名称来处理函数的参数。名称不会暴露给外部范围。

【参考方案1】：

您可以将undefined 用于第二个参数，并将spread syntax ... 用于使用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

【讨论】：

为什么需要使用展开语法？我认为whatIsThis (1, undefined, [2,3,4,5,6,7,8]) 可以正常工作。

@KaranDhir，确实如此，但你得到了一个嵌套数组（可能需要，也可能不需要）。

【参考方案2】：

这是因为您不能将命名参数传递给 JavaScript 中的函数。当您执行 whatIsThis(a = 1, c = [2,3,4,5,6,7,8]) 时，它的真正含义是 whatIsThis(1, [2,3,4,5,6,7,8 ])（因为 = 1 语句返回 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])

【参考方案3】：

函数参数的顺序很重要。在这种情况下，函数顺序为(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 抛出错误。

【参考方案4】：

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无关。

【参考方案5】：

你需要调用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])