Question

我正在尝试简化将代码传递给函数并将其推送到数组的代码。以下是我之前所做的工作：

.img-responsive{
  width:100% !important;
  border-radius:0 0 5px 5px !important;
}

var hi = [];
function hello(input) {
   console.log(input);
   hi.push(input);
}

var bye = [];
function goodbye(input) {
   console.log(input);
   bye.push(input);
}

然后我将其更改为包含其中每个函数的数组，如下所示：

<button onclick="hello('example');">Should print example in console log</button>
<button onclick="goodbye('example2');">Should print example2 in console log</button>

var options = [
  ["hello", "hi"],
  ["goodbye", "bye"]
];

options.forEach(function(option) {
  var arr1 = option[0]; // should be hello or goodbye
  var arr2 = option[1]; // should be hi or bye
  function arr1(input) {
    console.log(input);
    arr2.push(input);
  }
});

但是，现在当我点击其中一个按钮时，它会告诉我函数<button onclick="hello('example');"> Should print example in console log </button> <button onclick="goodbye('example2');"> Should print example2 in console log </button>或hello未定义。

JsFiddle：https://jsfiddle.net/gaorxnto/

Answer 1

你在循环中创建了这个函数，所以你无法达到它。将它附加到窗口，以便dom可以访问它

var options = [
  ["hello", "hi"],
  ["goodbye", "bye"]
];

options.forEach(function(option) {
  var arr1 = option[0]; // should be hello or goodbye
  var arr2 = option[1]; // should be hi or bye
  window[arr1] = function(input) {
    console.log(input);
  }
});

https://jsfiddle.net/gaorxnto/2/

Answer 2

首先，正如我在评论中所说的那样，执行arr1 = function() {}时不会使用arr1值，但会创建一个名为arr1的函数。

您必须使用最全局的范围（客户端窗口）

let arr1 = 'hello'
window[arr1] = function() {}

未经测试的解决方案：

var options = [
  ["hello", "hi"],
  ["goodbye", "bye"]
];
options.forEach(function(option) {
  window[option[1]] = [] // Init array
  window[option[0]] = function(val) { // Create event
    window[option[1]].push(val)
    console.log(val + " added to " + option[1])
  }
});

<强> ----- ------ UPDATE

像这样创建新的全局变量/ scrope并不是一个非常好的解决方案。示例附加什么？

var options = [
  ["var", "return"],
  ["function", "default"]
];

您将尝试创建2个名为return和default的数组以及2个函数var()和function()，这些数据都是javascript保留的关键字。

var()或return.push()会产生错误，您将被迫使用window.var()或window.return.push()（或var option = 'var'; window[option]();）

另一种解决方案

// Store all your inputs on a single variable, ex:  results.hi = [1,2,3] 
let results={}; 

// A single function to call. ex: addTo(`hello`, 1)
function addTo(category, val) { 
  // Find the accosiate option
  let option = options.find(opt=> { return opt[0] === category })
  // First time, init the array
  if(!results[category]) { 
    results[category] = [] 
  } 
  // Push new value
  results[category].push(val)
}

无法在foreach循环中定义函数

2 个答案: