如何使用 Javascript 將簡單數組轉換為三維數組（矩陣）

Question

想象一下我有一個數組：

DATA = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ,13 ,14 ,15 ,16, 17, 18, 19, 20, 21, 22, 23];

我希望它轉換成 3 維 Array((Matrix of ROW x COLUMN)x SET by Number of Instances，如下所示：

A = [[1, 2, 3], [4, 5, 6],[7, 8, 9];
B =  [[10, 11, 12], [13, 14, 15], [16, 17, 18]];
C = [[19, 20, 21], [22,23]]

請注意，矩陣的行和列是可變的。 這意味着行或列中的項目數可能會發生變化，甚至數據集中的項目數量也可能會有所不同。

我希望能夠將這些 arrays 集合迭代到創建時包含在特定定義類中的集合。

預期結果：（生成的表包括 html 結構）：

<CONTAINER>
//A SET
<div class "set">
   ROW 1: <row><div class "items"> 1 </div><div class "items"> 2</div><div class "items"> 3</div></row>
   ROW 2: <row><div class "items"> 4</div><div class "items"> 5</div><div class "items"> 6</div><row> 
   ROW 3: <row><div class "items"> 7</div><div class "items"> 8</div><div class "items"> 9</div></row>
 </div>
</div>

//B SET
<div class "set">
       ROW 1: <row><div class "items"> 10</div><div class "items"> 11</div><div class "items"> 12</div></row>
       ROW 2: <row><div class "items"> 13</div><div class "items"> 14</div><div class "items"> 15</div><row> 
       ROW 3: <row><div class "items"> 16</div><div class "items"> 17</div><div class "items"> 18</div></row>
     </div>
    </div>

//C Set
<div class "set">
           ROW 1: <row><div class "items"> 19</div><div class "items"> 20</div><div class "items"> 21</div></row>
           ROW 2: <row><div class "items"> 22</div><div class "items"> 23</div></row>
         </div>
        </div>



</CONTAINER>

可以在此處找到此問題的解決方案： Vue.js - 如何將簡單數組轉換為動態 NxNxN 矩陣

Answer 1

這正在轉換為 3d 陣列

const chunk = (arr, number) => {
   const chunked = arr.reduce((res, value, ind) => {
      if (ind % number === 0) {
         res.push([])
      }  
      res[res.length - 1].push(value)
      return res
   }, [])

   const last = chunked[chunked.length - 1]
   let empty = last[last.length - 1]
   if (Array.isArray(empty)) {
      empty = new Array(empty.length).fill(null)
   } else {
      empty = null
   }
   while(last.length < number) last.push(empty)

   return chunked
}

const _2d = chunk([7, 4, 2, 3, 9], 2)
console.log(_2d)

const _3d = chunk(_2d, 2)
console.log(_3d)

Answer 2

一個通用的 NxNxN[..xNxNxN... etc] - 不是 NxM - 但你的例子是 3x3x3

 let articles = Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12,13,14,15,16, 17, 18, 19, 20, 21, 22, 23); let num = 3; function articleGroups(a, num, dim) { let each = num ** (dim - 1) let required = each * num; a.length = required; return Array.from({length:num}, () => a.splice(0, each)).slice().map(a => (dim > 2)? articleGroups(a, num, dim - 1): a); } console.log(articleGroups(articles, num, 3));