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

Question

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

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

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

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

和：

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

在第二种情况下，我希望能够省略 undefined 参数，我相信通过解构分配 options/defaults 是答案（按照这个例子：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 解决方案

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

您也可以将默认值设置为 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 解决方案

正如评论中所述，您也可以简单地将 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

或者，如果您需要符合 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

请使用可选参数和 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 => { ... }})

另一个重要的方面是你让可选参数对调用者来说是冗长的。

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

Using destructuring to define optional parameters in ES6

javascript

destructuring

optional-parameters

ES6 解决方案

ES5 解决方案