如何在不干扰主数组的情况下以 7 角拼接数组中的元素

Posted 2023-03-13

【中文标题】如何在不干扰主数组的情况下以 7 角拼接数组中的元素

【英文标题】：How to splice an element from an array in angular 7 without disturbing the main array

【发布时间】：2020-06-26 16:10:35

【问题描述】：

我的stackblitz link（请裸露我的用户界面。我创建它只是为了理解这个概念）

当我选择“全选”然后开始取消选择 A,B,... 时，元素将从 mainList 中拼接。但是在我的打字稿文件中，我只从过滤列表而不是我的主列表中拼接了元素。请解释如何从过滤列表中删除元素也将其从主列表中删除。我在这里做错什么了吗？或者如果这是无法更改的功能，我怎么能保留我的 mainList 而不会被切片。

我已检查以下链接。但他们没有工作

Cloning an array in javascript/Typescript

Copy array of Objects in angular 2

【参考方案1】：

当您将this.mainList 分配给this.filteredList 时，您正在复制引用。因此，您对一个列表执行的任何操作都会影响另一个列表。

您应该使用 slice 获取数组的副本。

this.filteredList=this.mainList.slice();

注意 - 数组中的对象引用仍然相同 - 因此您对内部对象执行的任何操作都将反映在两个列表中。

const arr1 = [1,2,3];
const arr2 = arr1;

arr2[1] = 4;

console.log('update reference');
console.log(arr1, arr2);

const arr3 = arr1.slice();
arr3[1] = 2;

console.log('update slice');
console.log(arr1, arr3);

编辑

虽然这是您的问题的一部分，但您仍在代码的其他部分复制主数组引用。

我建议使用不同的方法重新开始。这是我非常简化的版本，尽管没有“全选”功能：https://stackblitz.com/edit/angular-ihkbfn

【讨论】：

更详细地查看您的 stackblitz，我认为您还有其他问题。我在这里简化了你的例子：stackblitz.com/edit/angular-ihkbfn。我删除了“全选”功能，但这应该很简单，可以重新添加

【参考方案2】：

请尝试在 TypeScript 中使用 Spread Operator，我认为这会解决您的问题。

在 TypeScript 中，展开运算符（以省略号的形式）可用于从另一个数组或对象初始化数组和对象。您还可以使用扩展运算符进行对象解构。

只是一个例子，初始化数组另一个数组，然后切片这个新的 itilialized 数组

初始化数组另一个数组

您可以使用扩展运算符以给定方式从现有数组创建数组。

let origArrayOne = [ 1, 2, 3];                          //1,2,3
let origArrayTwo = [ 4, 5, 6];                          //4,5,6

//Create new array from existing array
let copyArray = [...origArrayOne];                      //1,2,3

//Create new array from existing array + more elements
let newArray `enter code here`= [...origArrayOne, 7, 8];             //1,2,3,7,8 

//Create array by merging two arrays
let mergedArray = [...origArrayOne, ...origArrayTwo];   //1,2,3,4,5,6

【参考方案3】：

this.filteredList = this.mainList.map(ele=>return ele);

在此之后对过滤列表执行所有操作，因为这将制作数组的深层副本

【讨论】：

之所以有效，是因为它与切片的概念相同，只是更冗长一些