Подтвердить что ты не робот

Определения параметров функции в ES6

Я уверен, что это относительно просто, и что мне не хватает чего-то очевидного. Я читаю учебники Mozilla на ES6, а в главе о деструкции содержится следующий шаблон:

ОПРЕДЕЛЕНИЯ ПАРАМЕТРОВ ФУНКЦИЙ

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

function removeBreakpoint({ url, line, column }) {   
    // ... 
}

Это упрощенный фрагмент кода реального мира из Firefox DevTools JavaScript-отладчик (который также реализован в JavaScript-yo dawg). Мы нашли этот образец особенно приятным.

Я не понимаю, как это относится к деструкции. Является ли идея, что вы разрешаете возможность передавать объект в эту функцию, которая может быть в произвольном порядке, если она содержит все элементы, т.е. { line: 10, column: 20, url: 'localhost' }?

Если да, то в чем преимущество над чем-то вроде

 function removeBreakpoint(params) {   
     // ... 
 }

где params - объект с url, line и column? Является ли идея только тем, что вы заставляете Javascript проверять параметры функции при использовании в деструктурированном контексте, явно определяя их?

4b9b3361

ОТВЕТЫ

Ответ 1

Я не понимаю, как это относится к деструктурированию.

Внутри removeBreakpoint вы можете напрямую использовать url, line и column. Деструктуризация происходит, когда removeBreakpoint вызывается с объектом опций; что свойства сопоставления объектов деструктурированы в отдельные аргументы.

Является ли идея, что вы разрешаете передавать объект в эту функцию, которая может быть в произвольном порядке, если она содержит все элементы, то есть {line: 10, column: 20, url: 'localhost'}?

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

Простой пример демонстрации деструктурирования ( Live Copy с переводом ES5 на Babel РЕПЛ):

"use strict";
function removeBreakpoint({ url, line, column }) {   
    console.log("removeBreakpoint:");
    console.log("url: " + url);
    console.log("line: " + line);
    console.log("column: " + column);
}
removeBreakpoint({
  url: "the url",
  line: "the line",
  column: "the column"
});
removeBreakpoint({
  url: "the url",
  line: "the line"
});

Вывод:

removeBreakpoint:
url: the url
line: the line
column: the column
removeBreakpoint:
url: the url
line: the line
column: undefined

Если да, то в чем преимущество над чем-то вроде

function removeBreakpoint(params) {   
   // ... 
}

где params - объект с URL, строкой и столбцом?

Синтаксический сахар. Новый синтаксис для приема объектов опций является более кратким и декларативным, автоматизируя общий шаблон. Это особенно заметно, когда вы объединяете его со значениями по умолчанию ( Live Copy):

"use strict";
function removeBreakpoint(
    {                               // <= { starts destructuring arg
        url = "url default",        // <= Default for `url`
        line = "line default",      // <= ...for `line`
        column = "column default"   // <= ...for `column`
    }                               // <= } ends destructuring arg
    = {}                            // <= Default for the options object iself
) {                                 //    (see notes after the code block)
    console.log("removeBreakpoint:");
    console.log(url);
    console.log(line);
    console.log(column);
}
removeBreakpoint({
  url: "the url",
  line: "the line",
  column: "the column"
});
removeBreakpoint({
  url: "the url",
  line: "the line"
});
removeBreakpoint();

Вывод:

removeBreakpoint:
the url
the line
the column
removeBreakpoint:
the url
the line
column default
removeBreakpoint:
url default
line default
column default

В приведенном выше примере даже сам объект параметров является необязательным, поэтому последний вызов работает:

removeBreakpoint();

Если бы мы не задали значение по умолчанию для самого объекта options, этот вызов потерпел бы неудачу, потому что мы попытаемся прочитать свойство url undefined. Иногда вы этого хотите, и поэтому вы оставите общий параметр выключенным. В других случаях вы этого не делаете.

Боковое примечание. Возможность по умолчанию частей объекта опций, а также, отдельно, весь объект опций приводит к интересной ситуации, когда вы можете иметь разные значения по умолчанию в зависимости от того, был ли задан объект опций, но не имел конкретного опция против каких-либо параметров объекта вообще, все сделано декларативно: Live Copy

"use strict";
function test(
    num,
    {
        foo = "foo default",
        bar = "options given without bar"
    } = {bar: "options not given at all"}
) {
    console.log(num + ": foo = " + foo + ", bar = " + bar);
}
test(1, {foo: "foo value", bar: "options given with bar"});
test(2, {bar: "options given with bar"});
test(3, {});
test(4);

Вывод:

1: foo = foo value, bar = options given with bar
2: foo = foo default, bar = options given with bar
3: foo = foo default, bar = options given without  bar
4: foo = foo default, bar = options not given at all