javascript - Javascript + 从变量名和字符串构建动态变量名

Question

我不清楚执行以下操作的正确语法。

• 我试过 eval() 我也试过 [] 和 {[]} ..

我从这个开始：

var player1InitStart = 0;
var player2InitStart = 0;
var player3InitStart = 0;
var player4InitStart = 0;

var playerID =  event.target.id; // will return, player1, 2, 3, 4

在这样的检查中使用：

if(eval(playerID + "InitString") == 0){
    //do something, first time starting video
    eval(playerID + "InitString") = 1;
    alert('First Time Playing Video' + eval(playerID + "InitString"));
}

我正在尝试将 playerID 值与字符串一起使用：“InitStart”..

所以我可以更新上面的目标 xxInitStart 变量。

如何将 var playerID 与字符串 InitStart 连接起来，以便我现在可以定位 playerXInitSTart 变量之一来更新它？

更新：对我有用的答案/解决方案-

• 不知道为什么要使用 $ 字符？（让我想起了 PHP）

• 不知道为什么后面的勾号' ' are there either? ''

  var playerID = event.target.getIframe().id; var targetInitID = ${playerID}InitStart;

  //访问（获取或设置）警报（窗口[targetInitID]）；窗口[targetInitID] = 1;

标签： javascriptstringvariablesconcatenation

Answer 1

在这里，我们构建字符串和地址 window[yourvar] 来增加，这对你有用吗

var player1InitStart = 0;
var player2InitStart = 0;
var player3InitStart = 0;
var player4InitStart = 0;

//var playerID =  event.target.id; // will return, player1, 2, 3, 4

document.querySelectorAll('div').forEach(div => {
  div.addEventListener('click', clickEvent);
});

function clickEvent(event) {
  let playerID = `${event.target.id}InitStart`;
  window[playerID] += 1;
  logVars();
}

function logVars() {
  console.log(player1InitStart);
  console.log(player2InitStart);
  console.log(player3InitStart);
  console.log(player4InitStart);
}

<div id="player1">1</div>
<div id="player2">2</div>
<div id="player3">3</div>
<div id="player4">4</div>

以下是遵循某些性能建议的解决方案：

var players = {
  player1InitStart: 0,
  player2InitStart: 0,
  player3InitStart: 0,
  player4InitStart: 0
};

document.querySelectorAll('div').forEach(div => {
  div.addEventListener('click', clickEvent);
});

function clickEvent(event) {
  let playerID = `${event.target.id}InitStart`;
  players[playerID] += 1;
  logVars();
}

function logVars() {
  for(let k in players) {
    console.log(players[k]);
  }
}

<div id="player1">1</div>
<div id="player2">2</div>
<div id="player3">3</div>
<div id="player4">4</div>