Question

我正在尝试使用destructuring来使用命名函数参数和默认值。

function doSomething({arg1 = "foo", arg2 = "bar"} = {}) {
  console.log(arg1, arg2);
}

但我也想访问整个对象，以防用户添加一些额外的字段。这实际上不起作用，但我正在拍摄这样的事情：

function doSomething(parameters = {arg1 = "foo", arg2 = "bar"} = {}) {
  console.log(arg1, arg2, parameters);   
  // parameters should contain arg1 and arg2, plus any additional user supplied keys.
}

使用解构是否有一种优雅的方式来做到这一点？（我尝试使用arguments[0]，但实际上并未包含arg1和arg2的默认值。）

感谢。

Answer 1

你可以这样做：

function doSomething({ arg1 = "foo", arg2 = "bar", ...otherParams } = {}) {
    console.log(arg1, arg2, otherParams);
}

......然后：

doSomething({ anotherParam: 'hello' });

...会记录：

foo bar {anotherParam: "hello"}

这会使用您可以在最新的Chrome中使用的点差运算符，并在您使用Babel转换为ES5的生产应用中使用。但是，值得注意的是，这会增加更复杂的转换代码，而本地并不支持所有浏览器。

另外，从代码可读性和体系结构的角度来看，这个函数现在在解构，默认参数和扩展运算符方面有很多复杂性，所以我会看看是否有可能简化你正在做的事情以减少需要使用所有这些。

例如，如果要构建一个函数来创建DOM元素，可以编写：

function createDOMElement(properties = {}) {
   // Could avoid `const` by doing destructuring in the function signature, but broke it onto another line for better readability.
   const {
    tagName = 'div',
    ...attributes
   } = properties;

   const anElement = document.createElement(tagName);
   Object.keys(attributes).forEach((key) => anElement.setAttribute(key, attributes[key]));
   return anElement;
}

...但您可以只提供标记名称作为常规参数而不是命名参数，并将其简化为：

function createDOMElement(tagName = 'div', attributes = {}) {
   const anElement = document.createElement(tagName);
   Object.keys(attributes).forEach((key) => anElement.setAttribute(key, attributes[key]));
   return anElement;
}

Answer 2

使用即将推出的Javascript版本，您可以将rest参数用于其他属性。

＆＃13;

function doSomething({ arg1 = "foo", arg2 = "bar", ...rest } = {}) {
  console.log(arg1, arg2, rest);
}

doSomething({ arg1: 'a', arg2: 'b', arg3: 'c' });

＆＃13;

Answer 3

只需创建一个对象，然后将其指定为默认参数：

＆＃13;

const defaultParam = {
  arg1: "foo",
  arg2: "bar"
};

function doSomething({...parameter}) {
  console.log(parameter);
}

doSomething({arg3: "Hello"});
doSomething({...defaultParam, arg1: "New dude!", arg3: "Hello"});

＆＃13;

在函数参数中进行解构和重构？

3 个答案: