如何用拼接「撤銷」刪除的元素？

Question

當我有一個數組，我使用splice來刪除，比方說，數組的最後一個元素。有沒有機會創建例如一個按鈕，當我點擊它，它撤消了刪除的操作？在編寫代碼並且及時跳回時使用Ctrl + Z一樣？那意味着讓我回到刪除的元素及其所有特徵？

Answer 1

Array.splice允許您刪除或插入元素，它還會在刪除時返回刪除的元素。如果您捕捉到刪除的元素，你可以很容易地將其添加回：

let arr = [1,2,3,4,5,6]; 
 
// remove 1 element from index 1 ("2") 
 
let removed = arr.splice(1, 1); 
 
// add "2" back to position 1 
 
arr.splice(1, 0, ...removed); 
 

 
console.log(arr);

如果您沒有訪問ES6的價差操作，您可以使用.shift()拿到的第一個元素出來的removed ：

let arr = [1,2,3,4,5,6]; 
 
// remove 1 element from index 1 ("2") 
 
let removed = arr.splice(1, 1); 
 
// add "2" back to position 1 
 
arr.splice(1, 0, removed.shift()); 
 

 
console.log(arr);

Answer 2

如果您只需要一級撤消，您可以在刪除之前複製數組。如果用戶想要「撤消」，然後恢復陣列回到其以前的化身。

var arr = [1,2,3,4,5,6]; 
var tempArr; 

function removeThing(arr, index) { 
    tempArr = [arr]; 
    arr.splice(index, 1); 
} 

function undo() { 
    arr = tempArr; 
} 

Answer 3

單擊Delete random item按鈕將導致從arr陣列中刪除隨機元素。被刪除的元素被存儲在deleted陣列中。

點擊Undo deletion按鈕會將刪除的元素移回到arr數組中，移入相同的位置。

var arr = [5,1,2,6,4,8,0,7], 
 
    stored = arr.slice(), 
 
    deleted = [], 
 
    btn = document.getElementById('deleteBtn'), 
 
    undoBtn = document.getElementById('undoBtn'); 
 
    
 
    btn.addEventListener('click', function(){ 
 
     var randomElem = Math.floor(Math.random() * arr.length), 
 
      deleteElem = arr.splice(randomElem, 1); 
 
      deleted.push(...deleteElem); 
 
      console.log(arr); 
 
      console.log(deleteElem); 
 
    }); 
 
    
 
    undoBtn.addEventListener('click', function(){ 
 
     if (arr.length >= 0 && arr.length < stored.length){ 
 
     var elem = deleted[deleted.length-1], 
 
      index = stored.indexOf(elem); 
 
      arr.splice(index, 0, elem); 
 
      deleted.pop(); 
 
      console.log(arr); 
 
     } 
 
    }); 
 
    
 
console.log(arr);

<button id='deleteBtn'>Delete random item</button> 
 
<button id='undoBtn'>Undo deletion</button>

Answer 4

我會忍不住來包裝你的陣列在某種可撤銷的效用。例如：

function undoable(value) { 
    let history = [value]; 

    return { 
    value() { 
     return history[history.length - 1]; 
    }, 
    update(func) { 
     let copy = [...this.value()]; 
     func(copy); 
     history.push(copy); 
     return copy; 
    }, 
    undo() { 
     history.pop(); 
     return this.value(); 
    } 
    } 
} 

您可以使用它來處理撤消行爲。

let array = undoable([]); 

array.update(arr => arr.push(2)); 
// [2] 

array.update(arr => arr.push(3)); 
// [2, 3] 

array.undo(); 
// [2] 

如果你調用update在對待值不變的你能做出這樣更安全，更通用。此時，在傳遞給func之前，您不需要防守地複製陣列。但是，它會要求您使用方法如filter和slice而不是splice。