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

Question

I created a function to make it easy to add animations to any element with a set of key parameters such as: animation-name and animation-duration , etc. Here is the function below:

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

My question has to do with a smaller function used in the former. It updates the animation properties and takes 3 parameters two of which have the same exact name, only 1 is a variable and 1 is a string :

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

See the redundancy? 'name', name , 'duration', duration , etc. I know this isn't a major problem most developers will worry about but I'm curious to learn the ins and outs of what JavaScript can do. Is there a way to reduce my updateAnimationProperties function to only use 2 parameters total by reducing the 2 repetitive ones into one?

Full code below

 //\\ \\ \\ \\ \\ \\ \\ 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

In functions like this:

someFunction( 'value', value ) how can I turn this into

someFunction( value ) or someFunction( 'value' ) .

Specifically in relation to my code above?

Answer 1

Using ES6 Object Literal Property Value Shorthand you can have the function accept an object and then the call would look like updateAnimationProperties( element, {name}); then in the function you can get the object key and value

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