Array.forEach() 和 Array.slice() 不能正常工作

Question

它应该Array.slice()让我复制一个数组，然后我可以在不修改原始数组的情况下修改该副本，但是当我在副本上使用Array.forEach()进行删除时一些值这个值也从原始数组中删除。有谁知道为什么会这样？这是我使用的代码：

var originalArray = [
    { id: 1, name: 'Sales', datasources: [
        { id:1 , name: 'datasource1', fields: [] },
        { id:2 , name: 'datasource2', fields: [] },
    ] },
    { id: 4, name: 'Accounts', datasources: [
        { id:3 , name: 'datasource3', fields: [] },
        { id:4 , name: 'datasource4', fields: [] },
    ] },
    { id: 123, name: 'my datasources', datasources: [
        { id:1 , name: 'datasource1', fields: [] },
        { id:2 , name: 'datasource2', fields: [] },
        { id:3 , name: 'datasource3', fields: [] },
        { id:4 , name: 'datasource4', fields: [] },
    ] },
    { id: 12, name: 'shared datasources', datasources: [
        { id:13 , name: 'myshared datasource', fields: [] },
        { id:16 , name: 'hello test', fields: [] },
    ] },
];

var copyOfOriginalArray = originalArray.slice();

copyOfOriginalArray.forEach((folder, index) => {
    folder.datasources = folder.datasources.filter((o) => { return o.name.trim().toLowerCase().includes('hello'); });
});

JSON.stringify(originalArray);
JSON.stringify(copyOfOriginalArray);

Answer 1

Slice 将创建数组本身的副本，但不会克隆数组中的对象（它们仍将是引用）。

您将需要递归地克隆您的数组及其内容或使用类似 Lodash 的 cloneDeep

Answer 2

Acording to this definition. The slice() method returns a shallow copy of a portion of an array into a new array object.

浅拷贝是对象的按位拷贝。创建一个新对象，它具有原始对象中值的精确副本。如果对象的任何字段是对其他对象的引用，则只复制引用地址，即只复制内存地址。

要深度复制 javascript 中的任何对象，您可以使用此函数：

function deepCopy(oldObj) {
   var newObj = oldObj;
   if (oldObj && typeof oldObj === 'object') {
       newObj = Object.prototype.toString.call(oldObj) === "[object Array]" ? [] : {};
       for (var i in oldObj) {
           newObj[i] = deepCopy(oldObj[i]);
       }
   }
   return newObj;
}

Array.forEach() 和 Array.slice() 不能正常工作

Array.forEach() and Array.slice() together doesn't work correctly

javascript

arrays

slice