Разрушение объектов JavaScript со значением по умолчанию

Первоначально опубликовано в https://varundey.me/blog/destructuring-and-default-values/

Разрушение, представленное в JavaScript ES6, является изящным трюком для выкупа свойств непосредственно из объекта в качестве переменных.

const obj = {
    a:1,
    b:2,
    c:3
};

const {a, b, c} = obj;

console.log(a, b, c); // 1 2 3

Destructure и назначить значения по умолчанию – наивный путь

Но что Если вам нужно сделать проверку проверки на ваши деструктурированные свойства перед выполнением какой -либо операции

const {a, b, c} = obj;

if(typeof a === 'undefined'){
    // assign a to something
}

if(typeof b === 'undefined'){
    // assign b to something
}

if(typeof c === 'undefined'){
    // assign c to something
}

// start the actual work

Destructure и назначить значения по умолчанию – javaScript Way

Хотя это работает отлично, но это скучно и избыточно. Что если бы мы могли использовать значения по умолчанию (точно так же, как аргументы по умолчанию в функциях) прямо во время разрушения объектов, чтобы наше распакованное свойство никогда не было неопределенное Анкет

const obj = {a: 1, b: 2};

const {
    a = 'foo',
    b = 'bar',
    c = 'baz',
} = obj;

console.log(a, b, c); // 1 2 baz

Легко, верно? Вам просто нужно назначить значения как и когда вы их распаковываете.

Destructure, переименование и назначение значений по умолчанию

Аккуратный! Но что, если мы хотим переименовать параметр и Установить значение по умолчанию? Обращать внимание.

const obj = {a: 1, b: 2};

const {
    a: A="foo",
    b: B="bar",
    c: C="baz"
} = obj;

console.log(A, B, C); // 1 2 baz

Сбивает с толку? Бьюсь об заклад. Вот шаги к этому.

• Сначала мы разрушаем свойства объекта

const {a, b, c} = obj;

• Далее мы назначаем переменные этим свойствам

const {a: A, b: B, c: C} = obj;

• После этого назначьте значение по умолчанию как то, как мы это сделали в предыдущем примере

const {a: A="foo", b: B="bar", c: C="baz"} = obj;

И там у тебя это есть. Добавление значений по умолчанию правильно во время распаковки объектов.

Предостережения

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

const obj = {a: null, b: false, c: 0};

const {
    a = 1,
    b = 2,
    c = 3,
    d = 4
} = obj;

console.log(a, b, c, d); // null false 0 4

Я надеюсь, что это было информативно и поможет вам, когда вам нужно сделать что -то подобное. Дайте мне знать, что вы думаете об этом посте в комментариях ниже. ✌

Оригинал: “https://dev.to/varundey/destructuring-javascript-objects-with-default-value-2765”