时间戳

首页 > 解决方案 > 更改方法的可选参数值时出错

javascript - 更改方法的可选参数值时出错

问题描述

我有一个 JavaScript 课程...

class MyClass{

    static createElement(selector, settings = {
        name : 'element',
        enabled : true,
        color : '#EAEAEA'
    }){
          name = settings.name;
          enabled = settings.enabled;
          color = settings.color;

         // Do something...
    }

    static destroyElement(selector){
        // Do something...
    }

}

有两种静态方法，一种用于创建元素，另一种用于销毁元素。两种方法都接收对象选择器作为第一个参数，而创建方法接收对象配置的第二个可选参数。

所以假设应该允许以下配置：

MyClass.createElement(selector); // If you want to create an element with the default settings. (name: 'element', enabled: true and color: '#EAEAEA')

MyClass.createElement(selector, { name : 'element1' }); // A new element is created independent of the previous one but with the same configurations, it only changes the name.

MyClass.createElement(selector, { // Another independent element that changes the name and is deactivated, but that keeps the default color #EAEAEA
    name : 'element2',
    enabled : false
});

问题是什么？如果我创建一个settings默认保留参数的元素，一切正常，但如果我创建一个对象并更改其中一个settings参数......

...createElement(selector, { name : 'element1' });

然后其他参数（启用和颜色）获取一个值，undefined它们应该何时保持默认值（true 和#EAEAEA）并且应该只更改name

标签： javascriptclassparameters

解决方案

第二个参数是您要完全替换的对象，而不是合并它。

这样做怎么办：

static createElement(selector, settings = {}){

    settings = {

      // here is your default settings
      name : 'element',
      enabled : true,
      color : '#EAEAEA',

      // merging the parameter
      ...settings
    }


    name: settings.name,
    enabled: settings.enabled,
    color: settings.color,

}

推荐阅读