Question

我有一个函数，该函数具有存储在对象中的默认配置。该函数带有可选参数“ options”，如果options参数中有任何配置，则应覆盖默认配置。

这是我的实现方式

const myFunction = (props) => {
  const config = {
    slopeModifier: 2,
    minDistance: 30,
    lockScrollIfHorizontal: true,
    callback: null,
  };

  if (props.options) {
    for (const property in options) {
      config[property] = options[property];
    }
  }

};
export default myFunction;

在其他文件中，我将执行以下操作：

import myFunction

const options = {minDistance: 50, slope: 3};
myFunction({arg1, arg2, options});

此解决方案是一种好的做法吗？有没有一种标准的方法如何存储默认值并用可选参数覆盖它们？另外，我收到 eslint（guard-for-in）警告，我的代码可能会引起任何错误吗？

Answer 1

是否存在标准方法来存储默认值并使用可选参数覆盖它们？

是的，有一种标准的方法可以通过Object.assign

const myFunction = (props) => {
  const config = Object.assign({
    slopeModifier: 2,
    minDistance: 30,
    lockScrollIfHorizontal: true,
    callback: null,
  }, props.options);

  // ...

};
export default myFunction;

还有Rest/Spread syntax显示的更新版本Alberto's answer。

  const config = {
    slopeModifier: 2,
    minDistance: 30,
    lockScrollIfHorizontal: true,
    callback: null,
    ... props.options
  };

此解决方案是一种好的做法吗？

以这种方式覆盖默认配置是可以的。我担心的是在选项对象上放置其他参数。如果需要其他参数，则可能需要自己将它们设为正式参数，并将options作为最后一个（可选）参数。

const myFunction = (arg1, arg2, props) => ...;

const options = {minDistance: 50, slope: 3};
myFunction(arg1, arg2, options);

此外，我收到了eslint（警惕）警告，我的代码可能会引起任何错误吗？

可以。正如the docs所指出的，有人可能会为您作为选项传递的任何对象类型向prototype添加属性，并且除了这些原始属性外，您还将获得这些原型属性。直接添加到对象。这将是一个坏习惯，但这并非闻所未闻：

// someone else's code, maybe in a third-party library that thought it was being clever.
Object.prototype.foo = "bar";

// Your code
for(const prop in {"1": 2}) { console.log(prop); }

输出：

1
“酒吧”

Answer 2

您可以不带任何参数调用此函数，并且将应用默认值：

const myFunction = ({
    slopeModifier = 2,
    minDistance = 30,
    lockScrollIfHorizontal = true,
    callback = null
  } = {}) => {
  ...
};

export default myFunction;

在另一个文件上，您可以这样调用函数：

import myFunction

myFunction({minDistance: 10}); // or myFunction();

示例

const myFunction = ({
    slopeModifier = 2,
    minDistance = 30,
    lockScrollIfHorizontal = true,
    callback = null
  } = {}) => {
  console.log(slopeModifier, minDistance);
};

myFunction();
myFunction({minDistance: 10});

Answer 3

如果函数调用中存在props.options，则可以使用传播运算符覆盖属性，如下所示：

const myFunction = (props) => {
  const config = {
    slopeModifier: 2,
    minDistance: 30,
    lockScrollIfHorizontal: true,
    callback: null,
    ...props.options
  };
};

export default myFunction;

Answer 4

您违反了Single Responsibility Principle，最好创建一个类来设置，更新和返回您的配置代码：

class configClass{
  
  config = {
    slopeModifier: 2,
    minDistance: 30,
    lockScrollIfHorizontal: true,
    callback: null
  }

  getConfig(){
      return this.config
  }
  
  updateConfig(options){
      for(const property in options) {
          this.config[property] = options[property]
      }
  }

}

//export default configClass 
//import configClass as myClass
const myClass = new configClass()

const options = {minDistance: 50, slope: 3}
const obj = {arg1:"foo", arg2:"bar", options: options}
myClass.updateConfig(obj.options)
console.log(myClass.getConfig())

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

覆盖默认值

4 个答案: