站长图库

解决JavaScript中数组排序sort不发生改变

 发布时间 2020-06-23 14:45:00 热度 89

 Tag标签:  JavaScript数组排序

解决JavaScript中数组排序sort不发生改变


最近在做一个项目,Ajax从后台返回数据后,前端用js处理时,发现无论如何使用sort排序,最终要么是没改变,要么只改变最后一次的排序,折腾了很久,最后查了查资料才发现,js中区分浅拷贝和深拷贝。

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); //生效 
//比较数组对象
function sortBy(field) {
    return function(a,b) {
        return parseInt(b[field]) - parseInt(a[field]);
    }
}

浅拷贝、深拷贝与赋值

这三个的区别无法就是改变数据的时候,是如何改变,为了简单明了,用一张表最快理解:

是否指向同一对象第一层为基本数据类型原数据中包含子对象
赋值会使原数据一同改变会使原数据一同改变
浅拷贝不会使原数据一同改变会使原数据一同改变
深拷贝不会使原数据一同改变不会使原数据一同改变

解决方案

既然知道了原理,这里的需求是需要全部改变,所以我们可以采用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为目标类型,这里我用的是数组[],还可以是{},可根据实际情况处理。 从后面的[object1], [objectN]我们可以知道,extend是可以将多个待处理对象合并成一个目标类型的对象。



评论(0)条

    站长图库

    站长素材 - 建站资源分享平台

    猜你喜欢
    仿八点影院响应式苹果CMSV10模板自适应手机版

    仿八点影院响应式苹果CMSV10模板自适应手机版

    其他系统 2094 2020-02-10

    仿八点影院响应式苹果CMSV10模板自适应手机版,该模板自适应手机移动端,很清爽的板子,分享给大家。

    手绘学校儿童矢量背景素材下载

    手绘学校儿童矢量背景素材下载

    背景素材 198 2020-04-12

    手绘学校儿童矢量背景素材,适用于手绘教育、学校背景设计使用。

    Web网页开发小图标PSD素材下载

    Web网页开发小图标PSD素材下载

    UI元素 153 2020-02-07

    Web网页开发小图标PSD素材,适用于网页小图标设计使用。

    苹果CMS V10海螺主题模板带后台,影视源码下载

    苹果CMS V10海螺主题模板带后台,影视源码下载

    其他系统 2024 2019-12-14

    苹果CMS V10海螺主题模板带后台核心功能:1、首页/分类幻灯片(后台自定义开启关闭)2、首页logo可设置深色浅色两...