присвоить значение в пределах скобки деструктурирования?

Question

Я знаком с концепцией деструктурирования ... Ака:

const { name } = student // assigns a variable named name with the value of student.name

Однако сегодня я был озадачен, когда увидел, что выглядит как назначение внутри деструктуризации?Ака:

constructor(props) {
    super(props);

    const {tabs = [{name : null}]} = props;

    const firstTab = tabs[0];

    this.state = {
        currentTab : firstTab.name
    } ;
}

Я не понимаю эту часть, const { tabs = [{name : null}] } = props.Может кто-нибудь помочь объяснить этот синтаксис?

Answer 1

Это просто причудливый способ установить значение по умолчанию для вкладок [ { name: null } ], когда props не имеет свойства tabs

Пример:

// When props.tabs === undefiend
let props = { param1: "param1" };
let { tabs = [{ name : null }] } = props;
console.log(tabs); // returns [{ name: null }]

// when props.tabs !== undefined
let props = { tabs: [{name: "param2"}, {name: "param3"}] };
let { tabs = [{ name : null }]} = props;
console.log(tabs) // returns [{name: "param2"}, {name: "param3"}]

Приятная вещь оэто присвоение значения по умолчанию, это делает для менее глючного кода.Когда запускается следующая строка кода, например, const firstTab = tabs[0]; tabs[0] взорвется, если вы не установили назначение по умолчанию.