功能参数定义

Question

我确信这是相对简单的，我错过了一些明显的东西。我在ES6上阅读了Mozilla's tutorials，他们的chapter on destructuring包含以下模式：

功能参数定义

作为开发人员，我们通常可以通过接受a来暴露更符合人体工程学的API   单个对象，具有多个属性作为参数而不是   迫使我们的API消费者记住许多个人的顺序   参数。我们可以使用解构来避免重复这个单一的   每当我们想要引用它的一个属性时参数对象：
function removeBreakpoint({ url, line, column }) {   
    // ... 
}
这是来自Firefox DevTools的简化现实代码片段 JavaScript调试器（也在JavaScript-yo dawg中实现）。我们发现这种模式特别令人愉悦。

我不明白这与解构有何关系。您是否允许将对象传递给此函数的想法可以按任意顺序进行，只要它包含所有项目，即{ line: 10, column: 20, url: 'localhost' }？

如果是这样，对

之类的东西有什么好处

 function removeBreakpoint(params) {   
     // ... 
 }

其中params是url，line和column的对象？是否只是通过明确定义它们来强制Javascript在析构化上下文中使用时验证函数的参数？

Answer 1

我不明白这与解构有何关系。

在removeBreakpoint内，您可以直接使用url，line和column。使用options对象调用removeBreakpoint时会发生解构;该对象的匹配属性被解构为单个参数。

您是否允许将对象传递给此函数的想法可以按任意顺序进行，只要它包含所有项目，即{line：10，column：20，url：＆＃39; localhost＆＃ 39; }？

是的，但它不必包含所有项目;如果它没有，那么由于参数是从不存在的对象属性初始化的，因此参数为undefined（除非指定了默认值）。

演示解构的简单示例（Live Copy with ES5 translation的REPL上Babel}：

"use strict";
function removeBreakpoint({ url, line, column }) {   
    console.log("removeBreakpoint:");
    console.log("url: " + url);
    console.log("line: " + line);
    console.log("column: " + column);
}
removeBreakpoint({
  url: "the url",
  line: "the line",
  column: "the column"
});
removeBreakpoint({
  url: "the url",
  line: "the line"
});

输出：

removeBreakpoint:
url: the url
line: the line
column: the column
removeBreakpoint:
url: the url
line: the line
column: undefined

如果是这样，对
之类的东西有什么好处
function removeBreakpoint(params) {   
   // ... 
}
其中params是一个包含url，line和column的对象？

句法糖。接受选项对象的新语法更简洁和声明，自动化了一个通用模式。将它与默认值（Live Copy）组合时，这一点尤其明显：

"use strict";
function removeBreakpoint(
    {                               // <= { starts destructuring arg
        url = "url default",        // <= Default for `url`
        line = "line default",      // <= ...for `line`
        column = "column default"   // <= ...for `column`
    }                               // <= } ends destructuring arg
    = {}                            // <= Default for the options object iself
) {                                 //    (see notes after the code block)
    console.log("removeBreakpoint:");
    console.log(url);
    console.log(line);
    console.log(column);
}
removeBreakpoint({
  url: "the url",
  line: "the line",
  column: "the column"
});
removeBreakpoint({
  url: "the url",
  line: "the line"
});
removeBreakpoint();

输出：

removeBreakpoint:
the url
the line
the column
removeBreakpoint:
the url
the line
column default
removeBreakpoint:
url default
line default
column default

在上面，即使是options对象本身也是可选的，这就是最后一次调用的工作原理：

removeBreakpoint();

如果我们没有为选项对象本身提供默认值，则该调用将失败，因为我们正在尝试读取url的属性undefined。有时你想要那样，所以你不要让整个选项关闭。其他时候你不会。

附注：默认部分选项对象以及整个选项对象的默认情况会导致一个有趣的情况，即根据是否给出了选项对象，您可以使用不同的默认值但是没有特定的选项而没有提供任何选项对象，所有选项都以声明方式完成：Live Copy

"use strict";
function test(
    num,
    {
        foo = "foo default",
        bar = "options given without bar"
    } = {bar: "options not given at all"}
) {
    console.log(num + ": foo = " + foo + ", bar = " + bar);
}
test(1, {foo: "foo value", bar: "options given with bar"});
test(2, {bar: "options given with bar"});
test(3, {});
test(4);

输出：

1: foo = foo value, bar = options given with bar
2: foo = foo default, bar = options given with bar
3: foo = foo default, bar = options given without  bar
4: foo = foo default, bar = options not given at all

ES6

功能参数定义

1 个答案: