js-sort方法的正确使用

JavaScript中的sort()方法用于对数组的元素进行排序。其中有许多误区一定要注意，不然就会带来意想不到的结果。

下面就举几个具体事例来说明：

// 想要的正常结果:
['Xiaomi', 'Apple', 'Oppo'].sort(); // ['Apple', 'Oppo', 'Xiaomi'];

// 诡异的结果:
['Xiaomi', 'apple', 'Oppo'].sort(); // ['Oppo', 'Xiaomi", 'apple']

// 无法理解的结果:
[10, 22, 1, 8, 2].sort(); // [1, 10, 2, 22, 8]

造成第二第结果的原因是，因为sort()方法是根据字符串的ASCII码进行排序，所谓的ASCII码也就是我们常说的unicode编码。
而同一个英文字母，大写与小写是有区别的，小写字母的ASCII码是排在大写字母的后边，所以得到这种结果也就见怪不怪了。

• 解决方法其实也很简单：

  var arr = ['Xiaomi', 'apple', 'Oppo'];
  arr.sort(function (s1, s2) {
      x1 = s1.toUpperCase();
      x2 = s2.toUpperCase();
      if (x1 < x2) {
          return -1;
      }
      if (x1 > x2) {
          return 1;
      }
      return 0;
  }); // ['apple', 'Oppo', 'Xiaomi']

  这里就是把arr中所有元素的大小写做了统一处理，要么都是大写，要么都是小写，这样就能避免大小写unicode码不同带来的困扰。

造成第三种结果的原因是，因为sort()方法在处理数组时，其实是对数组中的所有元素做了隐式转换。
而Number类型的数字都被转换成了String类型的字符串，在unicode码比较大小时，是从前到后且逐位进行比较（先是比较数组中所有元素的第一位，接着是第二位，第三位…）。
自然而然，就得到[1, 10, 2, 22, 8]这样的结果。

• 解决办法：

  var arr = [10, 22, 1, 8, 2];
  arr.sort(function(a,b){
      return a-b
  });
  console.log(arr);// [ 1, 2, 8, 10, 22 ]

  当然你也可以倒序排列：

  var arr = [10, 22, 1, 8, 2];
  arr.sort(function(a,b){
      return b-a  //这个顺序很重要
  });
  console.log(arr);// [ 22, 10, 8, 2, 1 ]

  关于参数a和b:

  若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
  若 a 等于 b，则返回 0。
  若 a 大于 b，则返回一个大于 0 的值。
  

  W3C也有相关说明，以供参考。

  谢谢~O(∩_∩)O~

---

欢迎访问：个人博客地址

本文作者： Tiven
发布时间： 2016-12-16
最后更新： 2024-01-12
本文标题： js-sort方法的正确使用
本文链接： https://www.tiven.cn/p/cf14cb7c/
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处！