我在基于另一個陣列填充陣列時遇到問題。
似乎當我將一個值推送到陣列中的特定索引時，它正在填充所有索引。
代碼
import { Component, VERSION } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
name = 'Angular ' VERSION.major;
public matrix: number[] = [
1, 2, 3, 4, 5, 6, 7, 8, 9.1, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,
23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41,
42, 43, 44, 45,
];
public matrixColumns: number[][] = [];
public expectedMatrixColumns: number[][] = [
[1, 10, 19, 28, 37],
[2, 11, 20, 29, 38],
[3, 12, 21, 30, 39],
[4, 13, 22, 31, 40],
[5, 14, 23, 32, 41],
[6, 15, 24, 33, 42],
[7, 16, 25, 34, 43],
[8, 17, 26, 35, 44],
[9, 18, 27, 36, 45],
];
public numberofColumns: number = 9;
columnStartIndex: number = 0;
constructor() {
this.createColumnMatrix();
}
createColumnMatrix() {
let columnsMatrix = [];
let numberRows = this.matrix.length / this.numberofColumns;
let matrixIndex = 0;
for (let index = 0; index < this.numberofColumns; index ) {
this.matrixColumns.push([]);
}
let columnIndex: number = 0;
this.matrix.forEach((number, matrixIndex) => {
debugger;
this.matrixColumns[columnIndex].push(this.matrix[matrixIndex]);
debugger;
matrixIndex = matrixIndex 1;
columnIndex = columnIndex 1;
if (columnIndex > this.numberofColumns - 1) {
columnIndex = 0;
}
});
}
}
演示專案
這是重現該問題的 JavaScript 版本：
class AppComponent {
matrix = [
1, 2, 3, 4, 5, 6, 7, 8, 9.1, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,
23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41,
42, 43, 44, 45,
];
matrixColumns = [];
expectedMatrixColumns = [
[1, 10, 19, 28, 37],
[2, 11, 20, 29, 38],
[3, 12, 21, 30, 39],
[4, 13, 22, 31, 40],
[5, 14, 23, 32, 41],
[6, 15, 24, 33, 42],
[7, 16, 25, 34, 43],
[8, 17, 26, 35, 44],
[9, 18, 27, 36, 45],
];
numberofColumns = 9;
columnStartIndex = 0;
constructor() {
this.createColumnMatrix();
}
createColumnMatrix() {
let columnsMatrix = [];
let numberRows = this.matrix.length / this.numberofColumns;
let matrixIndex = 0;
for (let index = 0; index < this.numberofColumns; index ) {
this.matrixColumns.push(columnsMatrix);
}
let columnIndex = 0;
this.matrix.forEach((number, matrixIndex) => {
this.matrixColumns[columnIndex].push(this.matrix[matrixIndex]);
matrixIndex = matrixIndex 1;
columnIndex = columnIndex 1;
if (columnIndex > this.numberofColumns - 1) {
columnIndex = 0;
}
});
}
}
let component = new AppComponent();
for (let row of component.matrixColumns) {
console.log(JSON.stringify(row));
}問題
如果您查看代碼中的這一行：
this.matrixColumns[columnIndex].push(this.matrix[matrixIndex]);
它將陣列中的第一個值（矩陣為 1）推送到我的第二個陣列中的每個索引中matrixColumns。
預期產出
[1, 10, 19, 28, 37]
[2, 11, 20, 29, 38]
[3, 12, 21, 30, 39]
[4, 13, 22, 31, 40]
[5, 14, 23, 32, 41]
[6, 15, 24, 33, 42]
[7, 16, 25, 34, 43]
[8, 17, 26, 35, 44]
[9, 18, 27, 36, 45]
實際輸出
[1,2,3,4,5,6,7,8,9.1,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45]
[1,2,3,4,5,6,7,8,9.1,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45]
[1,2,3,4,5,6,7,8,9.1,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45]
[1,2,3,4,5,6,7,8,9.1,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45]
[1,2,3,4,5,6,7,8,9.1,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45]
[1,2,3,4,5,6,7,8,9.1,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45]
[1,2,3,4,5,6,7,8,9.1,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45]
[1,2,3,4,5,6,7,8,9.1,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45]
[1,2,3,4,5,6,7,8,9.1,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45]
uj5u.com熱心網友回復：
你可以做這樣的事情
const buildMatrix = (data, columns) => data.reduce((res, d, i) => {
const row = i % columns
const rowData = [...(res[row] || []), d]
res[row] = rowData
return res
}, [])
const data = [
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,
23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41,
42, 43, 44, 45,
];
const matrix = buildMatrix(data, 9)
console.log(matrix)uj5u.com熱心網友回復：
你需要兩個維度，比如
this.matrixColumns[columnIndex][matrixIndex].push(this.matrix[columnIndex][matrixIndex]);
uj5u.com熱心網友回復：
問題是你只有一個 columnsMatrix陣列。在this.matrixColumns反復推送它的參考之后，你最終會得到對同一個陣列的多個參考。因此，無論您是推到this.matrixColumns[0]還是推到this.matrixColumns[1]都沒有區別，...您總是推到同一個陣列。
您可以通過在每次呼叫.this.matrixColumnspush
所以替換：
this.matrixColumns.push(columnsMatrix);
和：
this.matrixColumns.push([]);
簡化代碼
不是你的問題，但你可以這樣做：
this.matrixColumns = Array.from({length: this.numberofColumns}, (_, i) =>
Array.from({length: numberRows}, (_, j) => matrix[i j*numberRows])
);
顯示代碼片段
let matrix = [
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,
23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41,
42, 43, 44, 45,
];
let numberofColumns = 9;
let numberofRows = Math.ceil(matrix.length / numberofColumns);
// logic
let matrixColumns = Array.from({length: numberofColumns}, (_, i) =>
Array.from({length: numberofRows}, (_, j) => matrix[i j*numberofRows])
);
// display
for (const row of matrixColumns) console.log(JSON.stringify(row));轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/491903.html
標籤：javascript 数组 有角度的 打字稿