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

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

我們都知道在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]]

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

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