javascript es6:用例解析rest参数

Question

我刚刚在MDN中看到了关于解析rest参数的代码片段,如下所示:

function f(...[a, b, c]) {
  return a + b + c;
}

f(1)          // NaN (b and c are undefined)
f(1, 2, 3)    // 6
f(1, 2, 3, 4) // 6 (the fourth parameter is not destructured)

代码片段在此页面中:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters

虽然休息参数的常见用例对我来说非常清楚(function foo(...params){/*code*/})我无法想到使用其他参数的真实世界用例,就像代码片段中提供的方式一样.相反,我认为在这种情况下,我应该使用一个通用的函数定义:

function f(a, b, c) {
  return a + b + c;
}

f(1)          // NaN (b and c are undefined)
f(1, 2, 3)    // 6
f(1, 2, 3, 4) // 6 (the fourth parameter is not defined)

Answer 1

假设我们有一个返回一个对象的函数，如下所示：

\n\n

function getCustomer(id) {\n    return fetch(`http://myapi.com/customer/${id}`);\n}\n

\n\n

假设我有这样的回应：

\n\n

{\n    "customer": {\n        "id": 1234,\n        "name": "John Doe",\n        "latestBadges": [\n            "Platinum Customer",\n            "100 Buys",\n            "Reviewer"\n        ]\n    }\n}\n

\n\n

在更传统的方法中，我可以编写一个函数来显示最新的 3 个徽章，如下所示：

\n\n

function showLatestBadges(a, b, c) {\n    console.log(a, b, c);\n}\n

\n\n

要使用该功能，我需要：

\n\n

getCustomer(1234).then((customer) => {\n    showLatestBadges(\n        customer.latestBadges[0],\n        customer.latestBadges[1],\n        customer.latestBadges[2]\n    );\n});\n

\n\n

有了这个新的扩展运算符，我可以这样做：

\n\n

getCustomer(1234).then((customer) => {\n    showLatestBadges(...customer.latestBadges);\n});\n

\n\n

因此，在函数定义中使用扩展运算符可能看起来有点无用。但事实上，它在非常具体的情况下很有用：

\n\n

假设我们有一个遗留系统，并且假设对showLatestBadges在数百个地方调用该函数，而没有使用扩展运算符，就像过去一样。我们还假设我们正在使用一个 linting 工具来防止未使用的变量，并且我们还假设我们正在运行一个确实关心 linting 结果的构建过程，并且如果 linting 表明某些东西不正确，构建失败。\n我们还假设，对于一些奇怪的业务规则，我们现在必须仅显示第一个和第三个徽章。\n现在，假设在遗留系统中的数百个位置进行此函数调用，并且我们没有太多时间来实现这个新的业务规则，我们没有时间重构所有这数百个调用的代码。\n因此，我们现在将函数更改为：

\n\n

function showLatestBadges(a, b, c) {\n    console.log(a, c);\n}\n

\n\n

但现在我们遇到了一个问题：由于未使用的b变量，构建失败，我们必须在昨天交付此更改！我们没有时间重构对该函数的所有数百个调用，并且我们不能在所有地方都进行简单的查找和替换，因为我们的代码如此混乱，而且到处都是 eval，以及不可预测的行为可以发生。

\n\n

因此，一种解决方案是：使用展开运算符更改函数签名，以便构建成功，并在板上创建一个任务来进行重构。\n因此，我们可以将函数更改为：

\n\n

function showLatestBadges(...[a,,c]) {\n    console.log(a, c);\n}\n

\n\n

好吧，我知道这是一个非常具体的情况，而且这种情况不太可能发生，但是，谁知道呢？\xc2\xaf\\_(\xe3\x83\x84)_/\xc2\xaf

\n