JavaScript函数参数使用对象符号

Question

什么是它们之间的区别？

function updateSomething(item) {}

并且

function updateSomething({items}) {}

第一个中的item变量也可以是一个对象，为什么第二个使用了对象记法？我应该在什么情况下使用第一个和第二个？

- Sean

---

我认为这不是有效的 - 函数 updateSomething({items}) {} - Mohit Bhardwaj

@Mike 现在是的（对于正确的引擎或某个转译器） - Denys Séguret

谢谢@DenysSéguret。不知道，我会去看一下。 - Mohit Bhardwaj

Answer 1

这是 ES2015 中的参数解构。在第二个例子中，您将一个本地变量初始化为参数的 items 属性的值。

function updateSomething({items}) {

大致相当于

function updateSomething(obj) {
     var items = obj.items;

其他一些例子在这里和在这里。

来自MDN的：从传递的对象中提取字段

请注意，此语法尚不可在Edge或Safari中使用（请参见兼容性地图），因此您可能需要使用转换器，例如Babel。

- Denys Séguret

Answer 2

第二个例子使用ES6的参数解构的简写形式，从第一个参数中提取item属性，假设它是一个对象：

function destructure({item}) {
  console.log(item);
}

destructure({item: 3}); // logs "3"

ES5的等效写法如下：

function destructure(arg1) {
  var item = arg1.item; // or throw
  ...
}

这篇由2ality撰写的博客文章对于解构、参数以及它们如何配合使用有很好的阐述。

如果destructure的第一个参数没有item属性，将会抛出错误。

您可以使用以下方式指定要解构的参数或与默认值结合使用：

function ({foo, bar} = param) {
  console.log(foo, bar); // the rest of param is not available
}

function ({foo, bar = 11} = param) {
  console.log(foo, bar); // bar will be 11 if it was not set in param
}

这种语法有许多变体，但它是对象简写语法的对应语法：

const item = 3;
destructure({item}); // creates an object like {item: item}

- ssube