本文摘自PHP中文网,作者hzc,侵删。

最近在做一个项目,Ajax从后台返回数据后,前端用js处理时,发现无论如何使用sort排序,最终要么是没改变,要么只改变最后一次的排序,折腾了很久,最后查了查资料才发现,js中区分浅拷贝和深拷贝。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 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方法来处理:
1 2 3 4 5 6 7 8 9 10 11 | 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是可以将多个待处理对象合并成一个目标类型的对象。
推荐教程:《JS教程》
以上就是解决JavaScript中数组排序sort不发生改变的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
javascript数组遍历的6种方法比较
javascript怎么判断是否为对象
javascript语言有什么特点
如何创建一个javascript数组
html5之javascript多线程的详解
javascript怎么改页面文字
js如何使用索引访问数组对象中的元素
javascript字符串方法有哪些
javascript生成一次性密码(otp)
理解javascript中的closure(闭包)
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 解决JavaScript中数组排序sort不发生改变