ES6中的功能参数定义 [英] Function parameter definitions in ES6
问题描述
功能参数定义
作为开发人员，我们经常可以通过接受一个
单个对象与多个属性作为参数而不是
，迫使我们的API消费者记住许多个人
参数的顺序。我们可以使用解构来避免重复这个单独的
参数对象，只要我们引用其中一个属性：函数removeBreakpoint（{url，line，column}）{
// ...
}
这是Firefox DevTools
JavaScript调试器（也在JavaScript-yo dawg中实现）的现实世界代码的简化片段。
我们发现这种模式特别令人愉快。
我不明白这是与破解有关的。只要包含所有项目，即 {line：10，column：20，url：'localhost'），您可以允许将对象传递到此函数中的功能，该对象可以是任意顺序的} ？
如果是这样，比如
功能有什么好处？ removeBreakpoint（params）{
// ...
}
其中params是具有 url ，行和列的对象？这个想法只是你强制Javascript通过明确定义它们在破坏的上下文中使用时验证函数的参数？
我不明白这是与破解有关的。 b $ b
在 removeBreakpoint 中，您可以使用 url ，行和列直接。当使用选项对象调用 removeBreakpoint 时，会发生解构;该对象的匹配属性被解析为单独的参数。
是允许将对象传递到此功能的想法，可以是只要它包含所有项目，即{line：10，column：20，url：'localhost'}？
是的，但不必包含所有项目;如果没有，则由于参数是从不存在的对象属性初始化的，所以参数为 undefined （除非指定了默认值） p>
演示解构的简单示例（ 在 Babel 的REPL上的ES5翻译：
use strict;
function removeBreakpoint（{url，line，column}）{
console.log（removeBreakpoint：）;
console.log（url：+ url）;
console.log（line：+ line）;
console.log（column：+ column）;
}
removeBreakpoint（{
url：url，
行：行，
列：列
}） ;
removeBreakpoint（{
url：url，
line：行
}）;
输出：
removeBreakpoint：
url：url
行：行
列：列
removeBreakpoint：
url：url
行：行
列：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默认，//< = ... for`line`
column =column default//< = ... for'column`
} //< =}结束破坏arg
= {} //< =选项对象的默认值
）{//（见代码块后的注释）
console.log（removeBreakpoint：）;
console.log（url）;
console.log（line）;
console.log（column）;
}
removeBreakpoint（{
url：url，
行：行，
列：列
}） ;
removeBreakpoint（{
url：url，
line：行
}）;
removeBreakpoint（）;
输出：
removeBreakpoint：
the url
行
列
removeBreakpoint：
$ url
行
列默认
removeBreakpoint：
url默认
行默认
列默认
在上面，甚至选项对象本身是可选的，这就是最后一个调用的原因：
removeBreakpoint（）;
如果我们没有给出选项对象本身的默认值，则该调用将失败，因为我们'尝试读取 url 的未定义的属性。有时你想要的，所以你可以把整体选项关掉。其他时候你不会。
旁注：默认部分选项对象的能力，整个选项对象会导致一个有趣的情况，您可以根据是否给出了一个选项对象，但是没有特定的选项，而根本没有提供任何选项对象，所以完全可以使用不同的声明性地： Live Copy
use strict;
函数测试（
num，
{
foo =foo default，
bar =没有条形的条件
} = {bar： 选项没有给出}
）{
console.log（num +：foo =+ foo +，bar =+ bar）;
}
test（1，{foo：foo value，bar：options with with bar}）;
test（2，{bar：options with with bar}）;
test（3，{}）;
test（4）;
输出：
1：foo = foo value，bar =使用bar
给出的选项2：foo = foo default，bar =用bar
给出的选项3：foo = foo default，bar =
4：foo = foo default，bar = options没有给出
I'm sure that this is relatively straightforward and that I'm missing something obvious. I'm reading through Mozilla's tutorials on ES6, and their chapter on destructuring contains the following pattern:
FUNCTION PARAMETER DEFINITIONS
As developers, we can often expose more ergonomic APIs by accepting a single object with multiple properties as a parameter instead of forcing our API consumers to remember the order of many individual parameters. We can use destructuring to avoid repeating this single parameter object whenever we want to reference one of its properties:
function removeBreakpoint({ url, line, column }) { // ... }This is a simplified snippet of real world code from the Firefox DevTools JavaScript debugger (which is also implemented in JavaScript—yo dawg). We have found this pattern particularly pleasing.
What I don't understand is how this relates to destructuring. Is the idea that you permit the ability to pass an object into this function that can be in arbitrary order as long as it contains all items, i.e. { line: 10, column: 20, url: 'localhost' }?
If so, what is the benefit over something like
function removeBreakpoint(params) {
// ...
}
where params is an object with url, line, and column? Is the idea just that you force Javascript to validate a function's parameters when used in a destructured context by explicitly defining them?
What I don't understand is how this relates to destructuring.
Within removeBreakpoint, you can use url, line, and column directly. The destructuring happens when removeBreakpoint is called with an options object; that object's matching properties are destructured into individual arguments.
Is the idea that you permit the ability to pass an object into this function that can be in arbitrary order as long as it contains all items, i.e. { line: 10, column: 20, url: 'localhost' }?
Yes, but it doesn't have to contain all the items; if it doesn't, then since the argument is initialized from an object property that doesn't exist, the argument is undefined (unless a default value is specified).
Simple example demonstrating the destructuring (Live Copy with ES5 translation on Babel's REPL):
"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"
});
Output:
removeBreakpoint: url: the url line: the line column: the column removeBreakpoint: url: the url line: the line column: undefined
If so, what is the benefit over something like
function removeBreakpoint(params) { // ... }where params is an object with url, line, and column?
Syntactic sugar. The new syntax for accepting options objects is more concise and declarative, automating a common pattern. This is particularly apparent when you combine it with default values (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();
Output:
removeBreakpoint: the url the line the column removeBreakpoint: the url the line column default removeBreakpoint: url default line default column default
In the above, even the options object itself is optional, which is why the last call works:
removeBreakpoint();
If we hadn't given a default for the options object itself, that call would have failed because we'd be trying to read the property url of undefined. Sometimes you want that, and so you'd leave the overall option off. Other times you don't.
Side note: The ability to default parts of the options object and also, separately, the entire options object leads to an interesting situation where you can have different defaults depending on whether an options object was given but didn't have a specific option vs. no options object being given at all, all done declaratively: 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);
Output:
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中的功能参数定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
