在es6中，函数参数列表内的花括号有什么作用？

120

我一直在我正在处理的代码库中看到类似以下的函数：

const func = ({ param1, param2 }) => {
  //do stuff
}

这到底在做什么？我很难在Google上找到它，因为我什至不知道这叫什么或如何在Google搜索中对其进行描述。

javascript ecmascript-6

— 内森
source

javascript函数

— Bergi

116

它正在解构，但包含在参数中。不含解构的等效项为：

const func = o => {
    var param1 = o.param1;
    var param2 = o.param2;
    //do stuff
}

— 詹姆斯·索普
source

11

只是为了确保我理解正确，基本上这意味着将包含这些属性的对象传递到函数中，然后在函数中，仅使用它们的名称就可以自动访问这些属性？

— 弥敦道

7

@Nathan是的，请具体参阅对象解构一节。但是请注意，对变量的更新不会更新原始对象的属性-就像它正在创建对原始值的引用一样。

— 詹姆斯·索普

@JamesThorpe最好链接到developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…–

— lsborg

11

这会将对象作为属性传递。

基本上是

let param1 = someObject.param1
let param2 = someObject.param2

下面是使用这种不带参数的技术的另一种方法，下面我们再考虑一下someObject确实包含那些属性。

let {param1, param2} = someObject;

— 奥兹·洛德里格斯（Oz Lodriguez）
source

3

这是一个对象销毁任务。像我一样，您可能会发现令人惊讶，因为ES6对象解构语法看起来像，但不像对象文字构造那样。

它支持您遇到的非常简洁的形式，以及重命名字段和默认参数：

本质上，它是{oldkeyname：newkeyname = defaultvalue，...}。'：'不是键/值分隔符；'='是。

这种语言设计决定的一些后果是，您可能必须做类似的事情

;（{a，b} = some_object）;

多余的括号防止左花括号被解析为一个块，而前导分号防止括号被解析为对上一行函数的函数调用。

当心，在对象销毁分配期间的关键错误不会抛出；您只是得到“未定义”值，无论是键错误还是其他错误都悄悄传播为“未定义”。

> var {rsienstr: foo, q: bar} = {p:1, q:undefined};
undefined
> foo
undefined
> bar
undefined
>

— 安德鲁·瓦格纳
source