×Закрыть

Диструктуризація в параметрах функції (JS)

Читав багато інформації про диструктуризацію, але так і не зрозумів, як працює код нижче.

    var options = {
        title : 'Menu'
    };

    function showMenu({title : menu, size = 10}) {
        alert(size); // 10
        alert(arguments[1]) // undefined
    }

    showMenu(options);

чому в arguments немає параметрів menu та size ? Де вони зберігаються ?
Диструктуризація масивів і об’єктів мені зрозуміла,але тільки не в параметрах функції.

LinkedIn
Допустимые теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Допустимые теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Для дебагу коду на JavaScript використовуйте консоль браузера. Для цього натисніть Ctrl+Shift+I, і у тій панелі, що відкриється, натисніть закладку «Console» (ну чи «Консоль»).

Там ви зможете використовувати console.log(); для перегляду вмісту будь-якого типу. У вашому випадку ви можете вивести в консоль об’єкт arguments:

function showMenu({title: menu, size = 10}) {
  console.log(arguments);
}

showMenu({title: 1, size: 25});
// Arguments[0]: {title: 1, size: 25}

showMenu({title: 1, size: 25}, 222);
// Arguments[0]: {title: 1, size: 25}
// Arguments[1]: 222

В даній консолі при натисненні на Enter відбувається виконання коду. Щоб написати багаторядковий код, Enter слід натискати разом із Shift.

зачем писать в консоле, если надо только посмотреть значение?
не проще в дебаге?

Для джуна, котрий використовує alert() для дебагу, і котрий експерементує з написанням простих конструкцій, — ні, не простіше.

А так?

 var options = {
        title : 'Menu'
    };

    function showMenu(options) {
        let {title : menu, size = 10}= options;
        alert(size); // 10
        alert(arguments[1]) // undefined
    }

    showMenu(options);

Якщо зрозуміла деструктуризація об’єктів, то відбувається приблизно таке (використовую argumentss замість arguments тому що останнє є зарезервованим):

var options = {
  title: "Menu"
};

function showMenu({ title: menu, size = 10 }) {
  alert(size); // 10
  alert(arguments[1]); // undefined
}

// showMenu(options);
let { title: menu, size = 10 } = options;
let argumentss = [options];
alert(size); // 10
alert(argumentss[1]); // undefined
alert(argumentss[0].title===options.title); // true

ти у функцію передаєш лише один параметр — об’єкт.
arguments — це нумерований список аргументів, нумерація, як і у масивах, з нуля. тож, аргумента № 1 і немає. лише arguments[0].

код еквівалентен

function showMenu(options) {
    if (options instanceof Object) { 
        var size = options.size;
        var menu = options.title;
        if ('size' not in options) {
            size = 10;
        }
    } else {
        size = 10;
    }
    alert(size); // 10
    alert(arguments[1]) // undefined
}

В функции предполагается, что будет передан обьект со свойствами title и size, где size по умолчанию 10. Вы передаете этот же обьект с одним свойством, результат же очевиден. В arguments также не может быть еще одного значения, т.к. передается всего 1 — options.

Подписаться на комментарии