Question

Js的新手，很抱歉，这很明显。

我的代码中有一些与变量名称相对应的字符串。我想将它们放入一个函数中，并使该函数能够更改与字符串具有相同名称的变量。

最好的例子是从html中的数据标签传递此“字符串”，但是在某些其他情况下会出现此问题。对我改变整个方法也持开放态度，这是我的问题是倒退的前提。

<html>
<div  data-location="deck" onClick="moveCards(this.data-location);">
</html>

var deck = ["card"];
function moveCards(location){
location.shift();};

谢谢！

Answer 1

脚本不应依赖独立变量的名称；这可能会破坏某些引擎的优化和缩小。另外，内联处理程序几乎普遍被认为是非常差的做法-考虑使用Javascript正确添加事件侦听器。这也将使您完全避免动态变量名称的问题。例如：

const deck = ["card", "card", "card"];

document.querySelector('div[data-location="deck"]').addEventListener('click', () => {
  deck.shift();
  console.log('deck now has:', deck.length + ' elements');
});

<div data-location="deck">click</div>

Answer 2

我不确定我是否100％遵循您的尝试，但您可能不考虑动态解析变量名，而是可以考虑使用对象中的键进行查找：

const locations = {
  deck: ['card']
}

function moveCards (location) {
  // if 'deck' is passed to this function, this is
  // the equivalent of locations['deck'].shift();
  locations[location].shift();
};

这是一个工作示例：

const locations = {
  deck: ['card 1', 'card 2', 'card 3', 'card 4']
};

function move (el) {
  const location = el.dataset.location;
  const item = locations[location];
  item.shift();
  updateDisplay(item);
}

// update the display so we can see the list
function updateDisplay(item) {  document.getElementById('display').innerHTML = item.join(', ');
}

// initial list
updateDisplay(locations['deck']);

#display {
  font-family: monospace;
  padding: 1em;
  background: #eee;
  margin: 2em 0;
}

<div data-location='deck' onclick="move(this)">click to shift deck</div>

<div id="display">afda</div>

Answer 3

我认为这在技术上可以使用eval来完成，但是优良作法是更清楚地考虑如何设计它，以便仅访问直接声明的对象。更好设计的一个例子可能是：

container = { 
             obj1: //whatever this object is 
             ...
             objn: 
             }
function applyMethodToObject(object_passed){
     container[object_passed].my_method();
}

Answer 4

在javascript中为对象分配值时，可以使用点或数组表示法进行访问。 IE浏览器

foo = {};
foo.bar = "bar";

console.log(foo.bar);
console.log(foo["bar"]);

另外，将全局变量添加到window对象，这意味着deck在window["deck"]或window[location]处可用。这意味着您的moveCards函数可以做到：

function moveCards(location) {
    // perform sanity checks since you could change data-location="foo"
    // which would then call window.foo.shift()
    if (window[location]) { 
        window[location].shift();
    }
}

也就是说，这可能不是一个好方法，尽管没有更多上下文很难说。

试图制作一个将变量名作为字符串的函数

4 个答案: