阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      JS array sort()

      sort() 方法用原地算法对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的

      由于它取决于具体实现,因此无法保证排序的时间和空间复杂性。

      var months = ['March', 'Jan', 'Feb', 'Dec'];
      months.sort();
      console.log(months);
      // expected output: Array ["Dec", "Feb", "Jan", "March"]
      
      var array1 = [1, 30, 4, 21, 100000];
      array1.sort();
      console.log(array1);
      // expected output: Array [1, 100000, 21, 30, 4]
      

      语法

      arr.sort([compareFunction])
      
      

      参数

      compareFunction 可选

      用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的各个字符的Unicode位点进行排序。

      firstEl

      第一个用于比较的元素。

      secondEl

      第二个用于比较的元素。

      返回值

      排序后的数组。请注意,数组已原地排序,并且不进行复制。

      描述

      如果没有指明 compareFunction ,那么元素会按照转换为的字符串的诸个字符的Unicode位点进行排序。例如 “Banana” 会被排列到 “cherry” 之前。当数字按由小到大排序时,9 出现在 80 之前,但因为(没有指明 compareFunction),比较的数字会先被转换为字符串,所以在Unicode顺序上 “80” 要比 “9” 要靠前。

      如果指明了 compareFunction ,那么数组会按照调用该函数的返回值排序。即 a 和 b 是两个将要被比较的元素:

      • 如果 compareFunction(a, b) 小于 0 ,那么 a 会被排列到 b 之前;

      • 如果 compareFunction(a, b) 等于 0 , a 和 b 的相对位置不变。备注: ECMAScript 标准并不保证这一行为,而且也不是所有浏览器都会遵守(例如 Mozilla 在 2003 年之前的版本);

      • 如果 compareFunction(a, b) 大于 0 , b 会被排列到 a 之前。

      • compareFunction(a, b) 必须总是对相同的输入返回相同的比较结果,否则排序的结果将是不确定的。

      所以,比较函数格式如下:

      function compare(a, b) {
        if (a < b ) {           // 按某种排序标准进行比较, a 小于 b
          return -1;
        }
        if (a > b ) {
          return 1;
        }
        // a must be equal to b
        return 0;
      }
      
      

      要比较数字而非字符串,比较函数可以简单的以 a 减 b,如下的函数将会将数组升序排列

      function compareNumbers(a, b) {
        return a - b;
      }
      
      

      sort 方法可以使用 函数表达式 方便地书写:

      var numbers = [4, 2, 5, 1, 3];
      numbers.sort(function(a, b) {
        return a - b;
      });
      console.log(numbers);
      
      也可以写成:
      var numbers = [4, 2, 5, 1, 3]; 
      numbers.sort((a, b) => a - b); 
      console.log(numbers);
      
      // [1, 2, 3, 4, 5]
      
      

      对象可以按照某个属性排序:

      var items = [
        { name: 'Edward', value: 21 },
        { name: 'Sharpe', value: 37 },
        { name: 'And', value: 45 },
        { name: 'The', value: -12 },
        { name: 'Magnetic' },
        { name: 'Zeros', value: 37 }
      ];
      
      // sort by value
      items.sort(function (a, b) {
        return (a.value - b.value)
      });
      
      // sort by name
      items.sort(function(a, b) {
        var nameA = a.name.toUpperCase(); // ignore upper and lowercase
        var nameB = b.name.toUpperCase(); // ignore upper and lowercase
        if (nameA < nameB) {
          return -1;
        }
        if (nameA > nameB) {
          return 1;
        }
      
        // names must be equal
        return 0;
      });
      

      示例

      创建、显示及排序数组

      下述示例创建了四个数组,并展示原数组。之后对数组进行排序。对比了数字数组分别指定与不指定比较函数的结果。

      var stringArray = ["Blue", "Humpback", "Beluga"];
      var numericStringArray = ["80", "9", "700"];
      var numberArray = [40, 1, 5, 200];
      var mixedNumericArray = ["80", "9", "700", 40, 1, 5, 200];
      
      function compareNumbers(a, b)
      {
        return a - b;
      }
      
      console.log('stringArray:' + stringArray.join());
      console.log('Sorted:' + stringArray.sort());
      
      console.log('numberArray:' + numberArray.join());
      console.log('Sorted without a compare function:'+ numberArray.sort());
      console.log('Sorted with compareNumbers:'+ numberArray.sort(compareNumbers));
      
      console.log('numericStringArray:'+ numericStringArray.join());
      console.log('Sorted without a compare function:'+ numericStringArray.sort());
      console.log('Sorted with compareNumbers:'+ numericStringArray.sort(compareNumbers));
      
      console.log('mixedNumericArray:'+ mixedNumericArray.join());
      console.log('Sorted without a compare function:'+ mixedNumericArray.sort());
      console.log('Sorted with compareNumbers:'+ mixedNumericArray.sort(compareNumbers));
      
      

      该示例的返回结果如下。输出显示,当使用比较函数后,数字数组会按照数字大小排序。

      stringArray: Blue,Humpback,Beluga
      Sorted: Beluga,Blue,Humpback
      
      numberArray: 40,1,5,200
      Sorted without a compare function: 1,200,40,5
      Sorted with compareNumbers: 1,5,40,200
      
      numericStringArray: 80,9,700
      Sorted without a compare function: 700,80,9
      Sorted with compareNumbers: 9,80,700
      
      mixedNumericArray: 80,9,700,40,1,5,200
      Sorted without a compare function: 1,200,40,5,700,80,9
      Sorted with compareNumbers: 1,5,9,40,80,200,700
      
      

      对非 ASCII 字符排序

      当排序非 ASCII 字符的字符串(如包含类似 e, é, è, a, ä 等字符的字符串)。一些非英语语言的字符串需要使用 String.localeCompare。这个函数可以将函数排序到正确的顺序。

      var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu'];
      items.sort(function (a, b) {
        return a.localeCompare(b);
      });
      
      // items is ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé']
      
      

      使用映射改善排序

      compareFunction 可能需要对元素做多次映射以实现排序,尤其当 compareFunction 较为复杂,且元素较多的时候,某些 compareFunction 可能会导致很高的负载。使用 map 辅助排序将会是一个好主意。基本思想是首先将数组中的每个元素比较的实际值取出来,排序后再将数组恢复。

      // 需要被排序的数组
      var list = ['Delta', 'alpha', 'CHARLIE', 'bravo'];
      
      // 对需要排序的数字和位置的临时存储
      var mapped = list.map(function(el, i) {
        return { index: i, value: el.toLowerCase() };
      })
      
      // 按照多个值排序数组
      mapped.sort(function(a, b) {
        return +(a.value > b.value) || +(a.value === b.value) - 1;
      });
      
      // 根据索引得到排序的结果
      var result = mapped.map(function(el){
        return list[el.index];
      });
      
      

      规范

      SpecificationStatusComment
      ECMAScript 1st Edition (ECMA-262)StandardInitial definition.
      ECMAScript 5.1 (ECMA-262) Array.prototype.sortStandard
      ECMAScript 2015 (6th Edition, ECMA-262) Array.prototype.sortStandard
      ECMAScript Latest Draft (ECMA-262) Array.prototype.sortDraft

      参考

      目录
      目录