处理可选和动态函数参数的最佳方法是什么？

Question

这是我生成和 returns 数组的函数（请参阅下面代码中的注释）：

const getStylesArray = (noteBlockSettings, blockId, key, value) => {

    // ---------------------------------------------------
    // noteBlockSettings parameter will be passed to this function no matter what. 
    // So it is definetely not undefined.

    // NoteBlockSettings has bgOpacity, bgColor, primaryColor, secondaryColor, textColor keys and values.

    // key and value parameters of this function are optional, so they may be undefined or not.

    // ***** What i am trying to achieve is : *****
    // If key parameter is passed (can be bgOpacity, bgColor, primaryColor, secondaryColor, textColor)
    // use this passed parameter rather than the value in noteBlockSettings object. 
    // If key parameter is undefined, use the value in noteBlockSettings object.
    
    // ---------------------------------------------------

    let { bgColor, primaryColor, secondaryColor, bgOpacity, textColor } = noteBlockSettings

    if (key === 'bgColor') {
         bgColor = value
    }

    if (key === 'primaryColor') {
         primaryColor = value
    }

    if (key === 'secondaryColor') {
         secondaryColor = value
    }

    if (key === 'bgOpacity') {
         bgOpacity = value
    }

    if (key === 'textColor') {
         textColor = value
    }


    const stylesArray = [
         // Here i am using the variables defined above to dynamically generate the array
         // Like bgOpacity, bgColor, primaryColor, secondaryColor, textColor etc..
         {
              styleClass: '.head',
              styleValue: `background:${addAlpha(colord(bgColor).lighten(0.075).toHex(), bgOpacity)}; border-color:${addAlpha(colord(bgColor).darken(0.06).toHex(), bgOpacity)};`,
              styleTriggers: 'bgColor bgOpacity',
         },

         {
              styleClass: '.head .options .btn-icon',
              styleValue: `color:${addAlpha(colord(textColor), 0.4)};`,
              styleTriggers: 'textColor',
         },

         {
              styleClass: '.head .options .btn-icon:hover',
              styleValue: `color:${primaryColor};`,
              styleTriggers: 'primaryColor',
         },
         .
         .
         .
    ]

    // Finally returning the generated array 
    return stylesArray
}

这是有效的，它只是一个原始的尝试。但是我不知道怎么做，但我觉得应该有很多“更聪明”的方式来处理这个问题。

所以，我的问题是：达到相同结果的最好和最少的方法是什么？

Answer 1

您只需获取 noteBlockSettings 的副本，然后提取其中的每个值。

通过

let copy = {...original};

修改任意键：

copy[key] = value;

像以前一样提取值

let {a, b, c, d, e, ...} = copy

const mutateStyles = (noteBlockSettings, blockId, key, value) => {

    // ---------------------------------------------------
    // noteBlockSettings parameter will be passed to this function no matter what. 
    // So it is definetely not undefined.

    // NoteBlockSettings has bgOpacity, bgColor, primaryColor, secondaryColor, textColor keys and values.

    // key and value parameters of this function are optional, so they may be undefined or not.

    // ***** What i am trying to achieve is : *****
    // If key parameter is passed (can be bgOpacity, bgColor, primaryColor, secondaryColor, textColor)
    // use this passed parameter rather than the value in noteBlockSettings object. 
    // If key parameter is undefined, use the value in noteBlockSettings object.
    
    // ---------------------------------------------------

    let noteBlockSettingsCopy = {...noteBlockSettings}

    noteBlockSettingsCopy[key] = value;
    
    let { bgColor, primaryColor, secondaryColor, bgOpacity, textColor } = noteBlockSettingsCopy

    return noteBlockSettingsCopy;
}

let data = { bgColor: "#fff", primaryColor: '#0ff', secondaryColor: "#ff0", bgOpacity: "0.1", textColor: "#000" };

console.log(mutateStyles(data, 1, "bgColor", "#f0f"));

Answer 2

您可以在解构之前构建“最终”设置对象。那么你不需要检查每个变量：

// If `key` is passed and a valid key in the object, copy the object and overwrite
// the property. 
const finalSettings = key in noteBlockSettings ? 
   {...noteBlockSettings, [key]: value} :
   noteBockSettings;

const { bgColor, primaryColor, secondaryColor, bgOpacity, textColor } = finalSettings;
// ...

{...noteBlockSettings, [key]: value} 基本上复制了noteBlockSettings 并将名字在key 中的属性设置为value.

话虽如此，我想知道为什么调用站点根本不传递完整的设置对象。这将使 API 更清晰。

处理可选和动态函数参数的最佳方法是什么？

What's the best way of dealing with optional and dynamic function parameters?

javascript

parameters

function