如何在AB對象中插入另一個值時將對象擴展爲AB對象，而不影響對象？

Question

這裏是我的簡單情況：

var a = { 
 
\t filters: ["aa"] 
 
} 
 
var b = { 
 
\t filters:["bb","bbb"] 
 
} 
 
var ab = { 
 
} 
 

 
$.extend(ab, a); 
 
console.log(JSON.stringify(a)); //{"filters":["aa"]} 
 
console.log(JSON.stringify(ab)); //{"filters":["aa"]} 
 

 
for (var i = 0; i < b.filters.length; i++){ 
 
\t ab.filters.push(b.filters[i]); //it only inserts to 'ab', but why 'a' also has it? 
 
} 
 

 
console.log(JSON.stringify(a)); //{"filters":["aa","bb","bbb"]} -> it should be only "aa", shouldn't it?? 
 
console.log(JSON.stringify(ab)); //{"filters":["aa","bb","bbb"]}

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

正如你所看到的，我的a對象擴展到ab對象。之後，我將b對象的值插入到ab對象中。不知何故，a對象也有b對象的值。

是否有解決方案阻止b對象也將其值插入到a對象？

Answer 1

你需要通過傳遞true爲$.extend第一個參數做原始對象的深層副本：

var a = { filters: ["aa"] } 
 
var b = { filters: ["bb", "bbb"] } 
 
var ab = {} 
 

 
$.extend(true, ab, a); // < note true here 
 
console.log(JSON.stringify(a)); // {"filters":["aa"]} 
 
console.log(JSON.stringify(ab)); // {"filters":["aa"]} 
 

 
for (var i = 0; i < b.filters.length; i++) { 
 
    ab.filters.push(b.filters[i]); 
 
} 
 

 
console.log(JSON.stringify(a)); // {"filters":["aa"]} 
 
console.log(JSON.stringify(ab)); // {"filters":["aa","bb","bbb"]}

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

Answer 2

通true作爲擴展功能，深層的第一個參數複製對象。

$.extend(true, ab, a);

https://api.jquery.com/jquery.extend/

Answer 3

只要做到：

$.extend(ab, JSON.parse(JSON.stringify(a))); 

入住這fiddle