foreachループで関数を定義できません

Question

文字列を関数に渡して配列にプッシュするコードを単純化しようとしています。ここで私は前に持っていたし、それが働いたものです：

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>

しかし、ここでボタンの1つをクリックすると、次のいずれかが表示されます。関数helloまたはgoodbyeは定義されていません。

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

Answer 1

まずアクセスできるようにarr1値になりませんarr1 = function() {}をやって、窓に取り付けますが、arr1という関数を作成します。 ------を

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：

あなたは、ほとんどのグローバルスコープ（クライアント側の窓）

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

テストされていないソリューションを使用する必要があります

このような新しいグローバル変数/ scropeを作成することは、本当に良い解決策ではありません。追加するものは何ですか？

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

すべてのjavascriptの予約キーワードですreturnとdefaultと2機能var()とfunction()と呼ばれる2つの配列を作成しようとするでしょう。

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) 
} 

Answer 2

あなたがそれを達する傾けるようあなたは、ループ内で関数を作成します。 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/