電子表格實戰錦囊:巧用稀疏陣列是關鍵!

葡萄城技術團隊發表於2021-12-29
陣列

前文中我們詳細介紹過稀疏陣列的那些事兒，以及在實際專案中，稀疏陣列如何在前端電子表格中發揮出它最大的效果。而這次，我們將從實戰應用出發，為大家介紹稀疏陣列在前端中的具體應用。

我們都知道在Javascript中是通過Array()建構函式構件稀疏矩陣，或者通過陣列，設定陣列的索引長度大於當前陣列長度的方式來建立稀疏矩陣。

var arr = new Array(100)   //arr沒有元素，但arr.length是100
var a = [];  //建立一個空陣列，length為0
a[50] = 50;  //賦值新增一個元素，length為 51

稀疏陣列中，沒有元素的結點為empty，獲取這些結點將返回結果undefined。通過使用index in array可以判斷一個結點是否有元素。例如下面程式碼中，a[0]和a[1]的返回都為undefined，但是a[1]其實為空。

JS中已經支援稀疏陣列的儲存，但在實際情況中，我們儲存稀疏陣列的儲存並不是直接進行，而是會根據實際情況構建其他儲存方式儲存稀疏陣列。想了解為什麼要多此一舉，這裡就需要大家瞭解一個概念——資料持久化。

我們在前端進行許多操作時，會產生許多資料，例如在前端表格進行多人填報、協同的時候，會出現很多需要長期儲存的資料，有些資料還要轉移到其它位置中便於人們儲存、管理、操作等。而實現這一目標的關鍵點就是資料的持久化，我們需要將記憶體中資料序列化為json等儲存格式儲存到資料庫並還能反序列化到記憶體。在之前的文章詳解電子表格中的json資料：序列化與反序列化已經具體介紹了，大家有興趣可以檢視。

看到這裡，你以為問題徹底解決了嗎，圖樣圖森破。

為了解決資料持久化，我們使用了JSON，但這時新的問題也隨之出現，JSON儲存中沒有undefined。我們對陣列進行操作的時候，陣列中empty欄位都會序列化為null，如下圖所示。

JSON.stringify(a)
'[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,50]'

再次parse後，陣列便不再是稀疏陣列了。

JSON.parse(JSON.stringify(a))
(51) [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 50]

這種情況下，為了解決JSON資料在轉化過程中上述出現的情況，我們就需要構建一些其他儲存方式，來更好的地解決這個問題~而這些儲存方式又有哪些特點，讓我們一起看看。

1、物件儲存

在前端利用JS的語言特點，我們可以通過Object可以輕鬆實現Sparse Array。例如在Spread JS中，物件屬性名稱對應所在單元格的行列，value屬性儲存單元格的值，同樣可以擴充出formula和style等屬性儲存單元格公式和樣式。使用Sparse Array不用初始化大小也不用關心資料的擴容，需要做行列操作時也只需要改變行列屬性的引用即可。

上圖中的資料儲存結果如下

{
    "0": {
        "0": {
            "value": 0
        }
    },
    "2": {
        "1": {
            "value": 2
        },
        "3": {
            "value": "S"
        }
    },
    "4": {
        "3": {
            "value": 3
        }
    }
}

需要存取資料時候直接通過物件屬性訪問。下面是JS Sparse Array的一個簡單物件實現。


function SparseArray(){
    this._array = {}
}
SparseArray.prototype.setValue = function(row, col, data){
    if(!this._array[row]){
        this._array[row] = {}
    }
    this._array[row][col] = data
}
SparseArray.prototype.getValue = function(row, col){
    if(this._array[row]){
        return this._array[row][col]
    }
    return undefined;
}
let arr = new SparseArray();
arr.setValue(3, 3, 5);
console.log(arr.getValue(3, 3))    // 5

2、三元組

在矩陣中每一個元素有行標，列標，元素值三個資訊，將元素按需放入陣列中便是三元組儲存。儲存結構可以是一個包含元素資訊物件，也可以直接簡化為一個長度為3的陣列。三元組的儲存方式可以方便記錄類似下圖的軌跡資訊或者自由曲線資訊，通過對陣列進行push和pop，可以方便進行回退和前進。

上圖中的軌跡資訊，以陣列三元組儲存後如下，元素value代表當前已元素數量，也可以使用物件記錄時間等更多資訊。

[
    [1,1,1],
    [5,8,2],
    [4,3,3], 
    [1,5,4]
]

下面，我們就用這種方式建立一個undoStack記錄回退。

function TSMatrix(){
this._array = [];
this.undoStack = []
}

 
TSMatrix.prototype.addNode = function(row, col, value){
this._array.push([row, col, value])
}
TSMatrix.prototype.canUndo = function(){
return this._array.length > 0;
}
TSMatrix.prototype.undo = function(){
if(this._array.length > 0){
this.undoStack.push(this._array.pop())
}
}
TSMatrix.prototype.canRedo = function(){
return this.undoStack.length > 0;
}
TSMatrix.prototype.redo = function(){
if(this._array.length > 0){
this._array.push(this.undoStack.pop())
}
}
TSMatrix.prototype.print = function(){
console.log(JSON.stringify(this._array))
}

let mat = new TSMatrix();
mat.addNode(1, 1, 1)
mat.addNode(5, 8, 2)
mat.addNode(4, 3, 3)
mat.addNode(1, 5, 4)
mat.print() //[[1,1,1],[5,8,2],[4,3,3],[1,5,4]]
mat.undo()
mat.print()  //[[1,1,1],[5,8,2],[4,3,3]]
mat.redo()
mat.print()  //[[1,1,1],[5,8,2],[4,3,3],[1,5,4]]

除了以上兩種方式，還可以將上述方式結合，建立十字連結串列以應對更復雜的場景。大家如果感興趣點個讚我們下次繼續說。

在後續的內容中，我們還會繼續為大家帶來其他前端電子表格技術中的深度解密，走過路過不要錯過。

相關文章