Javascript 如何创建由串联函数参数值和字符串组成的变量名？

我有一个向元素添加动画的简单函数：

addAnimation（）。

我遇到的主要问题是它调用的函数：

updateAnimationProperties（）

。此函数最多占用4个参数，其中至少3个参数将使用同一单词，例如：

updateAnimationProperties( name, element, 'animationName', nameStr ); 

字符串

name

使用了3次。这就是每次调用此函数时的情况。另一个例子：

updateAnimationProperties( duration, element, 'animationDuration', durationStr );

持续时间

重复3次。因此，我想创建一个函数，该函数采用基字：

name

或

duration

，并自动将其余的字符串连接起来。例如

'animation'+baseVariable

或

baseVariable+'Str'

我尝试过使用窗口方法，如下所示：

function updateAnimationProperties( target, element, property ){
  if( target === '' ){
    element.style[ property ] = window[ target + 'Str' ];
  }
  else {
    element.style[ property ] += ', ' + window[ target + 'Str' ];
  }  
}

但这似乎没有帮助。你知道如何通过使用动态变量来减少这个函数所需的参数数量吗

下面是带有4个参数的正常代码。我想将这些参数减少到可能只有两个。

/\\\\更新动画属性/////
函数updateAnimationProperties（目标、元素、属性、结果）{
如果（目标==''）{
元素.样式[属性]=结果；
}
否则{
style[property]+='，'+结果；
}  
}
////////更新动画属性\\\\\\\\\\\\\\\\\\\\\\\\\\
//\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\/
函数addAnimation（元素、名称、持续时间）{
element.classList.add（'animation'）；
var name=element.style.animationName，
持续时间=element.style.animationDuration；
updateAnimationProperties（名称，元素，'animationName'，nameStr）；
updateAnimationProperties（持续时间，元素，'animationDuration'，持续时间str）；
}
//////////添加动画\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
var p=document.querySelector（'p'）；
添加动画（p，“模糊”，“100秒”）
/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
.动画{
动画持续时间：1s；
动画延迟：0s；
动画迭代次数：1；
动画计时功能：轻松；
动画方向：正常；
动画填充模式：正向；
动画播放状态：运行；
}
.模糊{
动画名称：模糊；
}
/*\\\\\\\\\\\\\动画关键帧/////*/
@关键帧模糊{
100% {
滤镜：模糊（5rem）；
}
}
模糊这一段
我找到了这个，希望它对你有用。
使用arguments对象：

函数foo（）{
for（var i=0；i


以下是Mozilla的文档：

===============================================

或者您可以使用这个应用功能。

希望能有所帮助。
您的问题不是如何动态访问这些变量，而是您首先创建了许多类似的变量。您应该删除
target
参数，并在函数中计算它，从而大大简化代码

function updateAnimationProperty(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;
  }  
}

function addAnimation(element, name, duration){    
  element.classList.add('animation');
  updateAnimationProperty(element, 'name', name); 
  updateAnimationProperty(element, 'duration', duration);
}

您还可以使用结构，以便可以迭代键值对：

function addAnimation(element, name, duration){    
  element.classList.add('animation');
  var props = {name, duration}; // short for {"name": name, "duration": duration}
  for (var p in props)
    updateAnimationProperty(element, p, props[p]);
}

（并不是说它真的值得在这里）
这是个坏主意。如果某个变量在任何时候更改了名称，一切都会中断。看起来您正在寻找一个解决方案来解决一个没有问题的问题。@ScottMarcus我认为这应该使我的代码更具可读性。节省空间和时间。@savant我认为你的想法太短了。这看起来似乎是在节省时间，但在重构过程中你会为此付出代价。我也不同意让代码更容易阅读，因为变量将更隐式地存在，而且对于阅读代码的新手来说也不会那么明显。不要陷入过早的优化。你可能会发现，在这一切之后，你会找到一个更好的方法来彻底解决这个问题；减少参数的标准方法（尽管这不是创建对象的唯一目的）是确定哪些参数在概念上是链接的，创建一个单独的对象来表示它们，然后传递这个单独的对象。举个例子，你可以将一堆松散的“设置”对象分组到一个对象中，然后只传递一个设置对象，而不是传递一堆松散的“设置”对象？有趣，第一次读到这个。
function addAnimation(element, name, duration){    
  element.classList.add('animation');
  var props = {name, duration}; // short for {"name": name, "duration": duration}
  for (var p in props)
    updateAnimationProperty(element, p, props[p]);
}