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

Question

我有一个对象数组，而对象数组又包含对象数组。我希望同时过滤“顶层”(浅)数组和“嵌套”数组。为了维护一个确定的数组，我遍历了remoteData，并将每个对象都推入了definitiveArray和filteredArr中。我的想法是我只操纵filteredArray。

如果我使用filteredArray.spice(0，1)遍历并拼接出filteredArray的浅数组中的一项，它只会影响filteredArray，即我试图操作的数组。但是，如果我尝试使用filteredArray.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

我认为如果在数组拼接或切片中有object，可以使用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>

​