Question

当我有一个数组并使用splice删除时，让我们说，数组的最后一个元素。是否有机会创建例如一个按钮，当我点击它时，它会撤消已删除的操作？就像在编写代码时使用Ctrl + Z并及时跳回来一样？那意味着给我带回所有特征的已删除元素？

Answer 1

Array.splice允许您删除或插入元素，它还会在删除时返回已删除的元素。如果您捕获已删除的元素，则可以轻松地将其添加回来：

＆＃13;

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);

＆＃13;

如果您无法访问ES6的点差运算符，则可以使用.shift()从removed中获取第一个元素：

＆＃13;

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);

＆＃13;

Answer 2

我很想将你的数组包装在某种可撤销的实用程序中。例如：

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。

Answer 3

如果您只需要一个级别的撤消，则可以在删除之前复制该阵列。如果用户想要＆＃34;撤消＆＃34;然后将数组恢复为之前的版本。

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 4

单击Delete random item按钮将导致从arr阵列中删除随机元素。已删除的元素存储在deleted数组中。

点击Undo deletion按钮会将已删除的元素移回arr数组，进入相同的位置。

＆＃13;

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);

＆＃13;

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

＆＃13;

如何＆＃34;撤消＆＃34;一个已删除的元素与拼接？

4 个答案: