解決JavaScript中數(shù)組排序sort后不發(fā)生改變

背景

最近在做一個項目,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是可以將多個待處理對象合并成一個目標類型的對象。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容