獲取HTML5數據屬性後找到數組/變量

Question

在獲取數據屬性的值後，如何找到現有的聲明數組或變量？

例如

var myArray = [{a: 50, b: 70}, {a: 80, b: 90}], 
    mySecondArray = [{a: 30, b: 20}, {a: 80, b: 40}]; 

$('.button').click(function() { 
    var newArray = $(this).data('value'); // this will be a string depending on the value of any .button i clicked on <div data-value='myArray'></div> 

    doSomething(newArray); 
}; 

如何使用HTML 5的屬性查找現有的陣列，並做一些事情呢？

Answer 1

我會建議用這兩個數組作爲屬性來創建一個對象。這可以很容易地查找所需的數組。

var arrays = { 
    myArray:[{a: 50, b: 70}, {a: 80, b: 90}], 
    mySecondArray:[{a: 30, b: 20}, {a: 80, b: 40}] 
} 

$('.button').click(function() { 
    var newArray = $(this).data('value'); 

    doSomething(arrays[newArray]); 
    }; 

Answer 2

你不能（沒有棄用黑客）。

但是，你可以存儲在一個地圖

var data = {myArray: [...], mySecondArray: [...]}; 

您的訪問數據，並通過

doSomething(data[$(this).data('value')]); 

實例看值高達：

var myArray = [{a: 50, b: 70}, {a: 80, b: 90}], 
 
    mySecondArray = [{a: 30, b: 20}, {a: 80, b: 40}]; 
 

 
var data = {myArray, mySecondArray}; 
 

 
$('.button').click(function() { 
 
    var newArray = $(this).data('value'); 
 
    
 
    //console.log(window[newArray]); // hack - don't do it 
 
    //console.log(eval(newArray)); // hack - don't do it 
 
    console.log(data[newArray]);  // good 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="button" data-value="myArray">Click</button>

爲什麼不是window[newArray]？因爲它只允許在全局範圍內查找通過var聲明的變量。

爲什麼不是eval(newArray)？見Why is using the JavaScript eval function a bad idea?