javascript - 创建新数组而不影响旧数组中的值

Question

我正在尝试创建现有数组的副本并从数组副本中删除一些项目而不影响原始数组。我试过这个：

var new_arr = old_arr; //when I remove from new array the items from old array are also removed

如何创建现有数组的全新副本？

更新 ：

当我这样做时：

var new_arr = old_arr.slice();

然后稍后：

new_arr[0].shift();
new_arr[1].shift();

old_array 中的项目被删除。这是一个二维数组。

Answer 1

你可以使用两种方法，这个：

function clone (src) {
    return JSON.parse(JSON.stringify(src));
}

或这个：

var newArray = oldArray.slice();

Answer 2

一个更新的解决方案是像这样使用'from'：

const newArr = Array.from(oldArr);

但这是一个浅拷贝，如果嵌套元素发生突变，它们将使用 from 投影到新创建的数组中。那么最好的解决方案是使用

const newArr = JSON.parse(JSON.stringify(oldArr));

但该方法并不能确保全部。例如，如果数组的一个元素包含像 n => ++n 这样的函数，那么在使用 JSON 方法后它将为空，因此最好的解决方案是 deepClone，对于完整的解释，我参考

创建 JavaScript 数组

Answer 3

使用 Yoshi 答案，您可以扩展 Array 原型（只是一个简单的助手）：

Array.prototype.clone = function() { 
      return this.slice(0); 
}

Answer 4

在 Javascript 中，二维数组只是数组的数组。因此，克隆一维是不够的。我们还需要克隆所有的子维度数组。我们是这样做的：

function cloneGrid(grid) {
  // Clone the 1st dimension (column)
  const newGrid = [...grid]
  // Clone each row
  newGrid.forEach((row, rowIndex) => newGrid[rowIndex] = [...row])
  return newGrid
}

// grid is a two-dimensional array
const grid = [[0,1],[1,2]]
newGrid = cloneGrid(grid)

console.log('The original grid', grid)
console.log('Clone of the grid', newGrid)
console.log('They refer to the same object?', grid === newGrid)
---
The original grid [ [ 0, 1 ], [ 1, 2 ] ]
Clone of the grid [ [ 0, 1 ], [ 1, 2 ] ]
They refer to the same object? false

或者如果我们利用ES6 Array.map操作，我们可以让cloneGrid函数更简单：

const cloneGrid = (grid) => [...grid].map(row => [...row])

有关更多扩展答案，请阅读如何在 JavaScript 中制作数组的副本

Answer 5

你可以试试 .concat()

var old_arr = [1,2,3,4,5]
var new_arr = old_arr.concat()

console.log(old_arr) //1,2,3,4,5
console.log(new_arr) //1,2,3,4,5

new_arr.shift()

console.log(old_arr) //1,2,3,4,5
console.log(new_arr) //2,3,4,5