函数使用两个参数：变量和名称相同的字符串。将它们减少到一个参数？

Question

我创建了一个函数，可以很容易将动画添加到任何元件与一组关键参数如：动画名称和动画持续时间等。这里是以下功能：

addAnimation(h1, 'blur', '50s', '0s', 'ease'); 

我的问题与前者使用的较小功能有关。它更新的动画属性和需要3个参数其中两个具有相同的确切名称，只有1个是一个变量，1是一个字符串：

updateAnimationProperties(element, 'name', name); 
    updateAnimationProperties(element, 'duration', duration); 
    updateAnimationProperties(element, 'delay', delay); 
    updateAnimationProperties(element, 'timing', timing); 
    updateAnimationProperties(element, 'fill', fill); 

见冗余？ 'name', name, 'duration', duration等。我知道这不是大多数开发人员会担心的主要问题，但我很想知道JavaScript可以做什么的细节。有没有办法减少我的updateAnimationProperties函数只使用2个参数总数减少2重复的一个？

完整代码下面

//\ \ \ \ \ \ \ UPDATE ANIMATION PROPERTIES////////////////// 
 
function updateAnimationProperties(element, property, value){ 
 
    var style = element.style, 
 
     property = 'animation' + property.charAt(0).toUpperCase() + 
 
        property.slice(1); 
 
    
 
    if(style[ property ] === ''){ 
 
    style[ property ] = value; 
 
    } 
 
    else { 
 
    style[ property ] += ', ' + value; 
 
    } 
 
} 
 
///////// UPDATE ANIMATION PROPERTIES \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ 
 

 
//\ \ \ \ \ \ \ \ \ \ ADD ANIMATION////////////////////// 
 
function addAnimation( 
 
    element, name, duration, delay, timing, fill 
 
){  
 
    element.classList.add('animation'); 
 
    
 
    updateAnimationProperties(element, 'name', name); 
 
    updateAnimationProperties(element, 'duration', duration); //default = 1s 
 
    updateAnimationProperties(element, 'delay', delay); //default = 0s 
 
    updateAnimationProperties(element, 'timing', timing); //default = ease 
 
    updateAnimationProperties(element, 'fill', fill); //default = forwards); 
 
} 
 
////////////ADD ANIMATION \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ 
 

 
var h1 = document.querySelector('h1'); 
 

 
addAnimation(h1, 'blur', '50s', '0s', 'ease'); 
 
addAnimation(h1, 'fade', '2s', '1s', 'ease'); 
 
addAnimation(h1, 'shrink', '20s', '0s', 'ease');

/* \ \ \ \ \ \ \ \ \ \ \ \ \ ANIMATION DEFINITIONS/////////////*/ 
 
.animation { 
 
    animation-duration: 1s; 
 
    animation-delay: 0s; 
 
    animation-iteration-count: 1; 
 
    animation-timing-function: ease; 
 
    animation-direction: normal; 
 
    animation-fill-mode: forwards; 
 
    animation-play-state: running; 
 
} 
 
.blur { 
 
    animation-name: blur; 
 
} 
 
.fade { 
 
    animation-name: fade; 
 
} 
 
.shrink { 
 
    animation-name: shrink; 
 
} 
 

 
/*\ \ \ \ \ \ \ \ \ \ \ \ \ \ ANIMATION KEYFRAMES//////////////*/ 
 
@keyframes blur { 
 
    100% { 
 
    filter: blur(5rem); 
 
    } 
 
} 
 
@keyframes fade { 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
} 
 
@keyframes shrink { 
 
    100% { 
 
    transform: scale(0); 
 
    } 
 
}

<h1 style="display: inline-block; font-family: sans-seirf; font-weight: normal"> 
 
    Blur me, fade me, and shrink me 
 
</h1>

---

RECAP

在功能是这样的：

someFunction('value', value)我怎样才能把它变成

someFunction(value)或someFunction('value')。

具体就我的代码而言？

Answer 1

使用ES6 Object Literal Property Value Shorthand可以具备的功能接受一个对象，然后调用看起来像updateAnimationProperties(element, {name});然后在功能，您可以获取对象键和值

function updateAnimationProperties(element, obj) { 
    let key = Object.keys(obj)[0]; 
    let value = obj[key]; 
    // whatever else the function does with the values 
    //... 
}