Значение по умолчанию ES6 - помогите понять концепцию

Question

Я пытаюсь развить свои навыки JS и начать использовать ES6.

Я понимаю, что вы можете назначить значения по умолчанию, и я пытаюсь это сделать в модуле:

export var updateWidget = function (type = 'image', {
    previewId = '.image-preview',
    filepath = 'content/articles',
    baseUrl = 'http://dummy.com',
    thumbSize = '400x400'
}) {


    var options = {
            previewId: previewId,
            type: type
        },
        fileElements = {
            filepath: filepath,
            thumbPath: null,
            baseUrl: baseUrl,
            thumbSize: thumbSize

        },
}

Если я затем инициирую объект следующим образом:

new updateWidget('image'
            ).update('5059-081.png');

, я получаю cannot read property undefined, относящийся к объекту по умолчанию. Если я сделаю это:

new updateWidget('image', {}
            ).update('5059-081.png');

Это работает.

Кажется странным, что мне нужно передать пустой объект в модуль, чтобы заставить это работать, я бы ожидал оставить его в целом, настройки по умолчанию все еще работали бы.

Я ищу, чтобы обновить текущий шаблон модуля, который я использую, чтобы полностью использовать ES6, но по одному шагу за раз.

Итак, как мне установить по умолчанию и только опционально нужно отправить объект? Какая лучшая практика?

Спасибо

Answer 1

Второй аргумент ожидает объект, который будет деструктурирован.

Когда он деструктурирован, каждой из полученных переменных присваивается значение по умолчанию, если у объекта нет соответствующего свойства.

Не задано значение по умолчанию для того, что следует деструктурировать, если не передан аргумент.

Вы можете установить пустой объект в качестве значения по умолчанию.

export var updateWidget = function (type = 'image', {
    previewId = '.image-preview',
    filepath = 'content/articles',
    baseUrl = 'http://dummy.com',
    thumbSize = '400x400'
} = {})

(Примечание изменение в последней строке)

Answer 2

Если вы хотите сделать второй аргумент необязательным, вам нужно указать для него значение по умолчанию. Вы указали значения по умолчанию для выполняемой им деструктуризации, но не сам фактический параметр. В результате вы пытаетесь деструктурировать значение undefined, поэтому вы получаете ошибку.

Укажите значение по умолчанию для параметра, который вы разрушаете, например:

    export var updateWidget = function (type = 'image', {
        previewId = '.image-preview',
        filepath = 'content/articles',
        baseUrl = 'http://dummy.com',
        thumbSize = '400x400'
    } = {}) {
// −−^^^^^

Live Пример:

const updateWidget = function (type = 'image', {
    previewId = '.image-preview',
    filepath = 'content/articles',
    baseUrl = 'http://dummy.com',
    thumbSize = '400x400'
} = {}) {
    console.log(`type = ${type}`);
    console.log(`previewId = ${previewId}`);
    console.log(`filepath = ${filepath}`);
    console.log(`baseUrl = ${baseUrl}`);
    console.log(`thumbSize = ${thumbSize}`);
}
console.log("Call 1:");
updateWidget();
console.log("Call 2:");
updateWidget(undefined, {filepath: "/different/path"});
console.log("Call 3:");
updateWidget("mytype", {filepath: "/different/path"});

.as-console-wrapper {
    max-height: 100% !important;
}

Answer 3

Следующее допустимо, но при поставке с undefined оно выдаст TypeError, потому что undefined не подходит для деструктурирования.

function foo({ a = 'a' }) {
  console.log(a)
}

foo() // TypeError: Cannot read property 'a' of undefined

Для того, чтобы ваш код корректно провалился, вы можете предоставить пустой объект в качестве аргумента по умолчанию. Причина, по которой он работает следующим образом, заключается в том, что "спасение" программиста от этой ошибки приведет к снижению выразительности языка, сделав невозможным различение (в этом сценарии) между передачей undefined или null к такому функция и передача пустого объекта.

function foo({ a = 'a' } = {}) {
  console.log(a)
}

foo() // 'a'

Если вы не используете деструктуризацию, то аргументы по умолчанию вступят в силу обычным образом:

function foo(a = 'a') {
  console.log(a)
}

foo() // 'a'

Answer 4

Поскольку вторым аргументом является undefined, деструктуризация не работает с неопределенными значениями.

Вы можете сделать что-то вроде этого const getItem = (type = "image", { previewId. ="abc" } = {}) => {}

Answer 5

Это потому, что вы установили свойства по умолчанию для второго аргумента, но вам еще предстоит сделать его необязательным.

Просто установите значение по умолчанию для пустого объекта, например, так:

export var updateWidget = function (type = 'image', {
    previewId = '.image-preview',
    filepath = 'content/articles',
    baseUrl = 'http://dummy.com',
    thumbSize = '400x400'
} = {}) { // <= Setting the default value as empty object


    var options = {
            previewId: previewId,
            type: type
        },
        fileElements = {
            filepath: filepath,
            thumbPath: null,
            baseUrl: baseUrl,
            thumbSize: thumbSize

        },
}