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

朱雀 2020-06-21 13:55 473阅读 0赞

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

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

```javascript
    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方法来处理：

```javascript
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是可以将多个待处理对象合并成一个目标类型的对象。