使用解构来定义ES6中的可选参数

Question

我有一个执行AJAX调用的函数，如下：

let retrieveData = (section, sectionItem, callback) => {
    ...
}

第二个参数是可选的，即在某些情况下需要参数，在其他情况下则不是：

let data = retrieveData(aSection, aSectionItem, function(json)) {
    ...
});

和

let data = retrieveData(aSection, undefined, function(json)) {
    ...
});

在第二个实例中，我希望能够省略undefined参数，并且我认为通过解构分配选项/默认值就是答案（根据此示例：https://javascript.info/destructuring-assignment#smart-function-parameters），但是我对如何构建代码很不满意。

Answer 1

你当前的方式：

＆＃13;

＆＃13;

let retrieveData = (section, sectionItem, callback) => {
  console.log('Section :', section);
  console.log('Section item :', sectionItem);
  console.log('Callback :', callback);
}

retrieveData('a', 'b', () => {});
retrieveData('a', undefined, () => {});

＆＃13;

＆＃13;

＆＃13;

ES6解决方案

1. 使用ES6，您可以将参数作为对象传递，如下面的代码。请注意，如果省略sectionItem，则它将为undefined。
＆＃13;
＆＃13;
let retrieveData = ({ section, sectionItem, callback }) => {
  console.log('Section :', section);
  console.log('Section item :', sectionItem);
  console.log('Callback :', callback);
}

retrieveData({
  section: 'a',
  sectionItem: 'b',
  callback: () => {}
});
retrieveData({
  section: 'a',
  callback: () => {}
});
＆＃13;
＆＃13;
＆＃13;
1. 您还可以将默认值设置为sectionItem：
＆＃13;
＆＃13;
let retrieveData = ({ section, sectionItem = 'defaultValue', callback }) => {
  console.log('Section :', section);
  console.log('Section item :', sectionItem);
  console.log('Callback :', callback);
}

retrieveData({
  section: 'a',
  sectionItem: 'b',
  callback: () => {}
});
retrieveData({
  section: 'a',
  callback: () => {}
});
＆＃13;
＆＃13;
＆＃13;

ES5解决方案

1. 如评论中所述，您也可以简单地将sectionItem移至功能的末尾，以便更省略。
＆＃13;
＆＃13;
let retrieveData = (section, callback, sectionItem) => {
    console.log('Section :', section);
    console.log('Section item :', sectionItem);
    console.log('Callback :', callback);
}

retrieveData('a', () => {}, 'b');
retrieveData('a', () => {}); // Here you omit the parameter
＆＃13;
＆＃13;
＆＃13;
1. 或者，如果您需要符合ES5标准，则可以通过执行此类操作来重现ES6行为。但是没有文档就不那么清楚了，因为我们并不确切知道函数期望的参数。
＆＃13;
＆＃13;
let retrieveData = (options) => {
    console.log('Section :', options.section);
    console.log('Section item :', options.sectionItem);
    console.log('Callback :', options.callback);
}

retrieveData({
  section: 'a', 
  sectionItem: 'b',
  callback: () => {}
});
retrieveData({
  section: 'a', 
  callback: () => {}
});
＆＃13;
＆＃13;
＆＃13;

Answer 2

请使用可选参数，并deconstruct使用参数。

const foo = (section, {sectionItem, callback} = {}) { console.log(section, sectionItem, callback); }

因此sectionItem和callback都是可选的：

let data = retrieveData(aSection, { sectionItem: 'some', callback: json => { ... }, });

通过这种方式，您可以拨打以下电话之一

：

• retrieveData(aSection)
• retrieveData(aSection, {sectionItem: 'some'})
• retrieveData(aSection, {callback: json => { ... }})

另一个重要的方面是，您可以保持调用方的详细可选参数正确。