JavaScript仅覆盖属于对象的默认选项列表中的指定选项

JavaScript仅覆盖属于对象的默认选项列表中的指定选项,javascript,javascript-objects,Javascript,Javascript Objects,我想创建一个对象,该对象使用默认选项,除非用户指定了某些选项。用户可以按任意顺序将任意可选值定义为数组,而用户未定义的值将采用defaultOptions数组中定义的值 在这种情况下,用户只希望覆盖图表对象的宽度和高度,而所有其他defaultOptions将保持在类中定义的状态 在我的示例中,它似乎没有将宽度和高度更改为用户指定的值,而是使用defaultOptions值 } /*创建图表对象/ /应使用这些新值覆盖defaultOptions数组宽度和高度*/ 让图表=新图表(div{ 宽

我想创建一个对象,该对象使用默认选项,除非用户指定了某些选项。用户可以按任意顺序将任意可选值定义为数组,而用户未定义的值将采用defaultOptions数组中定义的值

在这种情况下,用户只希望覆盖图表对象的宽度和高度,而所有其他defaultOptions将保持在类中定义的状态

在我的示例中,它似乎没有将宽度和高度更改为用户指定的值,而是使用defaultOptions

}

/*创建图表对象/ /应使用这些新值覆盖defaultOptions数组宽度和高度*/ 让图表=新图表(div{ 宽度:400, 身高:400, });

/*或者,可以创建仅更改模式值的图表对象*/ 让图表=新图表(div{ 模式:“饼图” });


答案应该使用香草Javascript,谢谢

一个问题,还有一件事需要注意:

  • 您的参数未对齐。您正在将您的
    选项
    作为
    数据
    发送。有关构造时添加的
    数据
    参数,请参见下文
  • 如果希望调用方能够应用各个边距属性,请注意嵌套对象。有关如何仅允许覆盖一个边距属性并将其他属性保留为默认值的示例,请参见下文
  • 类图{
    构造函数(div,data,options={}){
    设默认选项={
    模式:“条形图”,
    宽度:div.clientWidth,
    高度:垂直高度,
    保证金:{
    前10名,
    右:10,,
    底部:10,
    左:10
    },
    名称:“默认图表”
    }
    this.options=Object.assign(
    {},
    默认选项,
    选项,
    {margin:Object.assign(
    defaultOptions.margin,
    options.margin | |{}
    )}
    );
    }
    }
    /*创建图表对象/
    /应使用这些新值覆盖defaultOptions数组宽度和高度*/
    设chart1=新图表(div1,{}{
    宽度:400,
    身高:400,
    });
    /*或者,可以创建仅更改模式值的图表对象*/
    设chart2=新图表(div2,{}{
    模式:“饼图”,
    边距:{底部:7},
    });
    控制台日志(图1、图2)
    
    
    
    
    class Chart {

    constructor(div, data, options = {}) {
    
        let defaultOptions = {
            mode: "bar-chart",
            width: div.clientWidth,
            height: div.clientHeight,
            margin: {
                top: 10,
                right: 10,
                bottom: 10,
                left: 10
            },
            name: "Default Chart"
        }
    
        this.options = Object.assign({}, defaultOptions, options);
    }