Фигурные Brakets в Es2015

Question

Я читал несколько твитов, и я наткнулся на this tweet by Dan Abromov

Синтаксис имеет меня путают.

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

Что такое точка {} вокруг детей? Понятно, что это не объект. Я предполагаю его функцию ES2015.

Большое спасибо

Answer 1

Это деструктивный шаблон привязки. Он указывает, что параметр children должен быть привязан к значению свойства children объекта, переданного функции.

Попробуйте это в среде ES2015:

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

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

Строка «Бар» будет записан на консоль, потому что это значение свойства «Foo» объекта, переданного функции.

Если значение, переданное функции, является объектом без свойства «children», если он вообще не является объектом, тогда параметр будет undefined.