在 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

你目前的方式：

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

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

ES6解决方案

1. 使用 ES6，您可以像以下代码一样将参数作为对象传递。请注意，如果sectionItem省略，它将是undefined.

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: () => {}
});

2. 您还可以将默认值设置为sectionItem：

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: () => {}
});

ES5 解决方案

1. 如评论中所述，您也可以简单地移动sectionItem到函数的末尾，从而更容易省略。

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

2. 或者，如果您需要符合 ES5，您可以通过执行以下操作来重现 ES6 行为。但是没有文档就不太清楚了，因为我们不知道函数期望的是哪些参数。

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: () => {}
});

Answer 2

请使用可选参数并解构您的参数。

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 => { ... }})

另一个重要的方面是您对调用者保持详细的可选参数。