Es2015 中的大括号

Question

我在阅读一些推文时发现了 this tweet by Dan Abromov

语法让我很困惑。

const Font = ({ children }) => 
 <Block...

{ } 围绕 children 有什么意义？显然它不是 object。我推测它的 ES2015 特性。

非常感谢

Answer 1

这是一种解构绑定模式。它表示参数 children 应该绑定到传递给函数的对象的 children 属性 的值。

在 ES2015 环境中试试这个：

function x({ foo }) {
  console.log(foo);
}

x({ hello: "world", foo: "bar", well: "that's all"});

字符串 "bar" 将被记录到控制台，因为这是传递给函数的对象的 "foo" 属性 的值。

如果传递给函数的值是一个没有 "children" 属性 的对象，或者如果它根本不是一个对象，那么参数将为 undefined.