JavaScript 深度嵌套数组 v 的浅数组拼接

Question

我有一个对象数组，这些对象又包含对象数组。我希望过滤“顶级”（浅）数组和“嵌套”数组。为了维护一个确定的数组，我循环了 remoteData 并将每个对象推入了一个确定的数组和一个过滤的 Arr。我的想法是我只操作过滤数组。

如果我使用filteredArray.spice(0, 1) 循环并从filteredArray 的浅数组中拼接一个项目，它只会影响filteredArray，即我试图操纵的那个。 但是，如果我尝试使用filteredArray[0].Colours.splice(0, 1) 将一个项目从filteredArray.nested 数组中拼接出来，它会从filteredArray 和definitiveArray 中删除该项目。

我猜这是由于我对 JavaScript 引用的工作原理存在误解。我们将不胜感激有关如何克服这一问题的解释和指导。

这里有一个 plnkr http://plnkr.co/edit/MKSlTogO3YkzHuKnHmwH

remoteData = [
{ Id: 1, Text: 'Item 1', Colours: [ { Id: 1, Colour: 'Red' }, { Id: 2, Colour: 'Orange' } ] },  
{ Id: 2, Text: 'Item 2', Colours: [ { Id: 1, Colour: 'Yellow' }, { Id: 2, Colour: 'Green' } ] },
{ Id: 3, Text: 'Item 3', Colours: [ { Id: 1, Colour: 'Blue' }, { Id: 2, Colour: 'Indigo' } ] },
{ Id: 4, Text: 'Item 4', Colours: [ { Id: 1, Colour: 'Violet' }, { Id: 2, Colour: 'Red' } ] },
{ Id: 5, Text: 'Item 5', Colours: [ { Id: 1, Colour: 'Orange' }, { Id: 2, Colour: 'Yellow' } ] },],
definitiveArray = [],
filteredArray = []; 

/*
* splicing an item out of the deeply nested array affects both
*/
len = remoteData.length;
for (var i = 0; i < len; i++) {
    //push data into both the definitive array and the filter array
    definitiveArray.push(remoteData[i]);
    filteredArray.push(remoteData[i]);
}
console.log(filteredArray[0].Colours.length);   //obviously 2
console.log(definitiveArray[0].Colours.length); //obviously 2

//splice the first item in the first Colours array for ONLY the filteredArray
filteredArray[0].Colours.splice(0, 1);
console.log(filteredArray[0].Colours.length);   //obviously 1
console.log(definitiveArray[0].Colours.length); //also 1 rather than 2 that I expected


/*
* If however I splice an item out of the shallow array, it affects only the filteredArray
*/
console.log(filteredArray.length);   //obviously 5
console.log(definitiveArray.length); //obviously 5

//remove the first item in ONLY the filteredArray
filteredArray.splice(0, 1);

console.log(filteredArray.length);   //obviously 4
console.log(definitiveArray.length); //still 5 as this array has been left unaffected

这里

Answer 1

您需要为每个嵌套数组创建一个新实例。

这是一个简单的方法 -

for (var i = 0; i < len; i++) {
    //push data into both the definitive array and the filter array
    definitiveArray.push(JSON.parse(JSON.stringify(remoteData[i])));
    filteredArray.push(JSON.parse(JSON.stringify(remoteData[i])));
}

Answer 2

我认为如果您在数组拼接或切片中有对象保持对对象的引用，您可以使用 JSON.parse(JSON.stringify(remoteData))

remoteData = [
{ Id: 1, Text: 'Item 1', Colours: [ { Id: 1, Colour: 'Red' }, { Id: 2, Colour: 'Orange' } ] },  
{ Id: 2, Text: 'Item 2', Colours: [ { Id: 1, Colour: 'Yellow' }, { Id: 2, Colour: 'Green' } ] },
{ Id: 3, Text: 'Item 3', Colours: [ { Id: 1, Colour: 'Blue' }, { Id: 2, Colour: 'Indigo' } ] },
{ Id: 4, Text: 'Item 4', Colours: [ { Id: 1, Colour: 'Violet' }, { Id: 2, Colour: 'Red' } ] },
{ Id: 5, Text: 'Item 5', Colours: [ { Id: 1, Colour: 'Orange' }, { Id: 2, Colour: 'Yellow' } ] },],
definitiveArray = [],
filteredArray = []; 

/*
* splicing an item out of the deeply nested array affects both
*/
len = remoteData.length;
for (var i = 0; i < len; i++) {
    //push data into both the definitive array and the filter array
    definitiveArray.push(remoteData[i]);
   
}
filteredArray=JSON.parse(JSON.stringify(definitiveArray))
console.log(filteredArray[0].Colours.length);   //obviously 2
console.log(definitiveArray[0].Colours.length); //obviously 2

//splice the first item in the first Colours array for ONLY the filteredArray
filteredArray[0].Colours.splice(0, 1);
alert(filteredArray[0].Colours.length);   //obviously 1
alert(definitiveArray[0].Colours.length); //also 1 rather than 2 that I expected


/*
* If however I splice an item out of the shallow array, it affects only the filteredArray
*/
console.log(filteredArray.length);   //obviously 5
console.log(definitiveArray.length); //obviously 5

//remove the first item in ONLY the filteredArray
filteredArray.splice(0, 1);

console.log(filteredArray.length);   //obviously 4
console.log(definitiveArray.length); //still 5 as this array has been left unaffected

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>