從另一個陣列的長度調用所有可能的陣列

Question

我正在處理的是一個菜單，它根據數組長度自動更新其條目。如果將新對象添加到數組中，它會將10組對象的屬性（在本例中爲「IDnumbers」）添加到菜單中。

var arraysOfObject = [], obj = {"IDNumber": ""}; 
for(i = 0; i<42; i++){ 
arraysOfObject.push({"IDNumber": "Number " + i});} 

以上是可容納42個具有特定屬性的對象的數組。

var array2 = []; 
    var leftOver = arraysOfObject.length % 10; 
    var groupsOfTen = (arraysOfObject.length - leftOver)/10; 
    for (var i = 0; i < groupsOfTen; i++) { 
     array2.push([]); 
     for (var j = i*10; j < i*10 + 10; j++) 
      array2[i].push(arraysOfObject[j]["IDNumber"]); 
    } 

    //now the leftover 
    if (leftOver > 0) { 
     array2.push([]); 
     for (var i = groupsOfTen*10; i < arraysOfObject.length; i++) 
      array2[array2.length-1].push(arraysOfObject[i]["IDNumber"]); 
    } 

的array2以上是存儲所有可以通過從10 arraysOfObject被分組的可能陣列的陣列。在這種情況下，裏面有5個，因爲4個數組可以容納40個對象，而1個數組可以容納2個剩餘數。

這一切都正常工作，但將array2放在菜單中顯示所有可能的IDnumbers分組在一起，但不是單獨分組。我必須在其中聲明每個可能的數組，如sets = [array2[0], array2[1], array2[2], array2[3], array2[4]];如果有第6個可能的數組，因爲對象＃51已被添加到arraysOfObject，我必須輸入它與array2[5]。

我不希望它依賴於我的輸入，但它知道可能的數組數量，並且它會自動在sets中顯示它。我怎麼做？

var gui = new dat.GUI(); 
 
var guiData = function() { 
 
    this.message = "Dat.Gui menu"; 
 
    this.system = 0; 
 
    this.Sets = 0; 
 
}; 
 

 
var data = new guiData(); 
 
sets = [array2[0], array2[1], array2[2], array2[3], array2[4], array2[5]]; 
 

 
gui.add(data, 'message', 'Dat.Gui Menu!'); 
 
gui.add(data, 'system', { 
 
    "1": 0, 
 
    "2": 1, 
 
    "3": 2, 
 
    "4": 3, 
 
    "5": 4, 
 
    "6": 5, 
 
}).name('system #').onChange(function(value) { 
 
    updateSets(value); 
 
}); 
 
gui.add(data, 'Sets', sets[0]).onChange(); 
 

 
function updateSets(id) { 
 
    var controller = gui.__controllers[2]; 
 
    controller.remove(); 
 
    gui.add(data, 'Sets', sets[id]).onChange(); 
 
    
 
    data.Sets = 0; 
 
    gui.__controllers[2].updateDisplay(); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.1/dat.gui.min.js"></script> 
 

 
<script> 
 
var arraysOfObject = [], obj = {"IDNumber": ""}; 
 
for(i = 0; i<42; i++){ 
 
arraysOfObject.push({"IDNumber": "Number " + i});} 
 

 
var array2 = []; 
 
    var leftOver = arraysOfObject.length % 10; 
 
    var groupsOfTen = (arraysOfObject.length - leftOver)/10; 
 
    for (var i = 0; i < groupsOfTen; i++) { 
 
     array2.push([]); 
 
     for (var j = i*10; j < i*10 + 10; j++) 
 
      array2[i].push(arraysOfObject[j]["IDNumber"]); 
 
    } 
 

 
    //now take care of the leftover 
 
    if (leftOver > 0) { 
 
     array2.push([]); 
 
     for (var i = groupsOfTen*10; i < arraysOfObject.length; i++) 
 
      array2[array2.length-1].push(arraysOfObject[i]["IDNumber"]); 
 
    } 
 
</script>

Answer 1

我認爲最簡單的解決辦法是使用ES2015的spread operator我不知道，如果你想使用還...

ES2015方法（demo）

sets = [...array2]; 

在演示中還有一些其他變化來設置system vari能夠

但仔細觀察之後，您可以使用此方法從SO answer優化代碼以使用slice()分塊您的陣列。另外，我不知道爲什麼一個對象被用來創建數組項，當它剛剛結束了作爲一個字符串... demo

var arraysOfObject = [], 
    system = {}, 
    chunk = 10, 
    size = 92; 

for (var i = 0; i < size; i++) { 
    arraysOfObject.push("Number " + i); 
} 

var sets = []; 
var index = 0; 
for (i = 0; i < size; i += chunk) { 
    sets.push(arraysOfObject.slice(i, i + chunk)); 
    system[index + 1] = index++; 
} 

var gui = new dat.GUI(); 
var guiData = function() { 
    this.message = "Dat.Gui menu"; 
    this.system = 0; 
    this.Sets = 0; 
}; 

var data = new guiData(); 

gui.add(data, 'message', 'Dat.Gui Menu!'); 
gui 
    .add(data, 'system', system) 
    .name('system #') 
    .onChange(function(value) { 
    updateSets(value); 
    }); 
gui.add(data, 'Sets', sets[0]).onChange(); 

function updateSets(id) { 
    var controller = gui.__controllers[2]; 
    controller.remove(); 
    gui.add(data, 'Sets', sets[id]).onChange(); 

    data.Sets = 0; 
    gui.__controllers[2].updateDisplay(); 
} 

Answer 2

不是問題就在眼前，但我與DAT玩耍。你發佈它，並想知道是否可以重新填充下拉列表而不刪除/添加/等。它似乎與.options一起工作。 （NB初始化代碼大量使用ES6的，但可以在不工作。從組陣列動態創建的系統菜單）

let arraysOfObject =Array.from({length:42}, (o,i) => "Number " + i), 
 
\t ch =10, sets = Array.from({length:Math.ceil(arraysOfObject.length/ch)}, (a,i) => arraysOfObject.slice(i*=ch, i+ch)); 
 

 
var gui = new dat.GUI(); 
 
var guiData = function() { 
 
    this.message = "Dat.Gui menu"; 
 
    this.system = 0; 
 
    this.Sets = 0; 
 
}; 
 

 
var data = new guiData(); 
 
gui.add(data, 'message', 'Dat.Gui Menu!'); 
 
gui.add(data, 'system', sets.reduce((obj,s,i) => (obj[i+1] = i, obj), {})).name('system #').onChange(updateSets); 
 
let controller = gui.add(data, 'Sets'); 
 
updateSets(0); 
 
function updateSets(id) { 
 
    controller = controller.options(sets[data.Sets = id]); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.1/dat.gui.min.js"></script>