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是存储可以从arraysOfObject按10分组的所有可能数组的数组。在这种情况下，它有5个内部，因为4个数组包含40个对象，1个数组包含2个剩余部分。

一切正常，但将array2放在菜单中会显示所有可能的IDnumbers组合在一起，但不会单独分组。我必须在其中声明每个可能的数组sets = [array2[0], array2[1], array2[2], array2[3], array2[4]];如果有第6个可能的数组，因为对象＃51已添加到arraysOfObject，我必须用array2[5]输入它。 / p>

我不希望它依赖于我的输入，但它知道可能的数组的数量，并且它会在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

不是手头的问题，但我在发布时正在玩dat.gui，并且想知道是否可以在不删除/添加/等的情况下重新填充下拉列表。它似乎适用于.options。（NB初始化代码大量使用ES6，但可以不使用。系统菜单是从sets数组动态创建的）

＆＃13;

let arraysOfObject =Array.from({length:42}, (o,i) => "Number " + i),
	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]);
}

＆＃13;

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

＆＃13;

Answer 2

我认为最简单的解决方案是使用ES2015的spread operator我不知道你是否还想使用...

ES2015方法（demo）

sets = [...array2];

演示中还有一些其他更改来设置system变量

但仔细观察后，您可以使用此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();
}

从另一个数组

2 个答案: