背景
最近在做一個項目框舔，Ajax從后臺返回數(shù)據(jù)后蹦玫，前端用js處理時赎婚，發(fā)現(xiàn)無論如何使用sort排序，最終要么是沒改變樱溉，要么只改變最后一次的排序挣输，折騰了很久，最后查了查資料才發(fā)現(xiàn)福贞，js中區(qū)分淺拷貝和深拷貝撩嚼。
var provinceConfirmedCount = data;
var provinceDeadCount = data;
var provinceCuredCount = data;
provinceConfirmedCount.sort(sortBy(("provinceConfirmedCount")));
provinceDeadCount.sort(sortBy(("provinceDeadCount")));
provinceCuredCount.sort(sortBy(("provinceCuredCount")));
console.log(provinceConfirmedCount); //不生效
console.log(provinceDeadCount); //不生效
console.log(provinceCuredCount); //生效
//比較數(shù)組對象
function sortBy(field) {
return function(a,b) {
return parseInt(b[field]) - parseInt(a[field]);
}
}
淺拷貝、深拷貝與賦值
這三個的區(qū)別無法就是改變數(shù)據(jù)的時候挖帘，是如何改變完丽，為了簡單明了，用一張表最快理解：
| 是否指向同一對象 | 第一層為基本數(shù)據(jù)類型 | 原數(shù)據(jù)中包含子對象 | |
|---|---|---|---|
| 賦值 | 是 | 會使原數(shù)據(jù)一同改變 | 會使原數(shù)據(jù)一同改變 |
| 淺拷貝 | 否 | 不會使原數(shù)據(jù)一同改變 | 會使原數(shù)據(jù)一同改變 |
| 深拷貝 | 否 | 不會使原數(shù)據(jù)一同改變 | 不會使原數(shù)據(jù)一同改變 |
解決方案
既然知道了原理拇舀，這里的需求是需要全部改變逻族，所以我們可以采用Jquery中的extend方法來處理：
var provinceConfirmedCount = $.extend([], data);
var provinceDeadCount = $.extend([], data);;
var provinceCuredCount = $.extend([], data);;
provinceConfirmedCount.sort(sortBy(("provinceConfirmedCount")));
provinceDeadCount.sort(sortBy(("provinceDeadCount")));
provinceCuredCount.sort(sortBy(("provinceCuredCount")));
console.log(provinceConfirmedCount);
console.log(provinceDeadCount);
console.log(provinceCuredCount);
語法：
$.extend( target, [object1], [objectN] )
其中，target為目標類型骄崩，這里我用的是數(shù)組[]聘鳞，還可以是{}，可根據(jù)實際情況處理要拂。
從后面的[object1], [objectN]我們可以知道抠璃，extend是可以將多個待處理對象合并成一個目標類型的對象。
