如何將元素推入3D數組（JavaScript）

Question

我有一個對象

1:a
2:b
3:c
4:d
5:e
6:f
7:g
8:h
9:i

我想制作一個3D陣列，例如

[
  [ [a], [b], [c] ],
  [ [d], [e], [f] ],
  [ [g], [h], [i] ]
] 

是否可以編寫一個for循環將前三個字母推送到3D數組，而不是后三個字母和末尾的第三個字母（例如示例）？

Answer 1

按照@Andreas注釋JavaScript是否保證對象屬性順序？ 。

不能保證對象中的屬性順序。 因此，如果您需要依賴keyVal順序，則必須完成一個新步驟：對Object.keys進行排序 。

解決方案可以基於Object.keys和模數運算符的循環，以便按col或除法對行排序進行分組：

 var obj = {1: 'a', 2: 'b', 3: 'c', 4: 'd', 5: 'e', 6: 'f', 7: 'g', 8: 'h', 9: 'i'}; var resultByCol = []; var resultByRow = []; var objKeys = Object.keys(obj).sort(function(a, b) { return a - b; }); for (var idx = 0; idx < objKeys.length; idx++) { var newIdx = idx % 3; if (resultByCol[newIdx] === undefined) { resultByCol.push([]); } resultByCol[newIdx].push([obj[objKeys[idx]]]); newIdx = Math.floor(idx / 3); if (resultByRow[newIdx] === undefined) { resultByRow.push([]); } resultByRow[newIdx].push([obj[objKeys[idx]]]); } console.log('Grouped by Col: ['); for (var i = 0; i < resultByCol.length; i++) { console.log('\\t' + JSON.stringify(resultByCol[i]) + (((i + 1) == resultByCol.length) ? '' : ',')); } console.log(']'); console.log('Grouped by Row: ['); for (i = 0; i < resultByRow.length; i++) { console.log('\\t' + JSON.stringify(resultByRow[i]) + (((i + 1) == resultByRow.length) ? '' : ',')); } console.log(']'); 

Answer 2

您可以先對Object.keys()數組排序，然后使用reduce()每3個鍵創建一個新數組。

 var obj = {1: 'a',2: 'b',3: 'c',4: 'd',5: 'e',6: 'f',7: 'g',8: 'h',9: 'i',} var result = Object.keys(obj).sort((a, b) => a - b).reduce(function(r, e, i) { if(i % 3 == 0) r.push([]); r[r.length - 1].push([obj[e]]) return r; }, []) console.log(result) 

Answer 3

使用keys和簡單的for循環可以非常快速有效地實現此目的for以使您的代碼更方便。

@gaetanoM的解決方案可以很好地工作，但是對於更高性能的功能，您可以執行以下操作：

var object = {1:'a', 2:'b', 3:'c', 4:'d', 5:'e', 6:'f', 7:'g', 8:'h', 9:'i'};
var keys = Object.keys(object);
var result = [];
for ( var i=, j=keys.length; i<j; i++){
    result[i] = object[keys[i]];
}

Answer 4

是。 有很多方法可以做到這一點。 看起來最干凈的可能是使用reduce()函數：

 const obj = { 1: 'a', 2: 'b', 3: 'c', 4: 'd', 5: 'e', 6: 'f', 7: 'g', 8: 'h', 9: 'i' }; const width = 3; // how many in each sub array. const result = Object.keys(obj).map(key => obj[key]) // ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'] .reduce((result, v) => { if (result[result.length - 1].length === width) { result.push([v]); // add new row } else { result[result.length - 1].push(v); // add to last row } return result; }, [[]]); console.log(result); 

這比它需要的更加冗長，但是更容易理解。

首先，我遍歷對象並將map()到普通數組。

然后，在reduce()函數中，從第一層嵌套數組開始。 然后在每個循環中，我檢查結果中最后一個數組的長度。 如果已滿，則為下一行添加一個新數組。 否則，我只需將值添加到最后一行。

一個更緊湊的版本是：

 const obj = { 1: 'a', 2: 'b', 3: 'c', 4: 'd', 5: 'e', 6: 'f', 7: 'g', 8: 'h', 9: 'i' }; const width = 3; const result = Object.keys(obj).reduce((r, k) => r.concat( r[r.length - 1].length === width ? [[obj[k]]] : [r.pop().concat(obj[k])] ), [[]]); console.log(result); 

這個示例更多地使用了.concat()因此從技術上講所有內容都在一行上，盡管顯然很難閱讀和理解。