JavaScript 数组排序

对数组进行排序

sort() 方法按字母顺序对数组进行排序：

例子

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>

<p>The sort() method sorts an array alphabetically:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;

fruits.sort();
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

反转数组

reverse() 方法反转数组中的元素。

你可以用它来按降序对数组进行排序：

例子

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
fruits.reverse();

自己尝试一下→

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Sort in Reverse</h2>

<p>The reverse() method reverses the elements in an array.</p>
<p>By combining sort() and reverse() you can sort an array in descending order:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
// Create and display an array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;

// First sort the array
fruits.sort();

// Then reverse it:
fruits.reverse();

document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

数字排序

默认情况下，sort() 函数将值按字符串排序。

这对于字符串非常有效（“Apple”位于“Banana”之前）。

但是，如果数字按字符串排序，则“25”大于“100”，因为“2”比“1”大。

因此，sort() 方法在排序时会产生不正确的结果数字。

您可以通过提供比较函数来解决此问题：

例子

const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>

<p>Sort the array in ascending order:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo1").innerHTML = points;  

points.sort(function(a, b){return a - b});
document.getElementById("demo2").innerHTML = points;
</script>

</body>
</html>

使用相同的技巧对数组进行降序排序：

例子

const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});

自己尝试一下→

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>

<p>Sort the array in descending order:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo1").innerHTML = points;

points.sort(function(a, b){return b - a});
document.getElementById("demo2").innerHTML = points;
</script>

</body>
</html>

比较功能

比较函数的目的是定义替代排序命令。

比较函数应返回负值、零值或正值，具体取决于论据：

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

当 sort() 函数比较两个值时，它将值发送到比较函数，并根据返回的值对值进行排序（负数，零，正）值。

如果结果为负，则 a 排在前面 b。

如果结果为正，则对 b 进行排序在 a 之前。

如果结果为0，则两者的排序顺序不做任何改变价值观。

示例：

比较函数比较数组中的所有值，两个值位于一个位置时间(a, b)。

比较 40 和 100 时，sort() 方法调用比较函数(40, 100)。

该函数计算 40 - 100 (a - b)，并且由于结果为负数 (-60)，因此排序函数会将 40 作为小于 100 的值进行排序。

您可以使用此代码片段进行数值实验和按字母顺序排序：

<button onclick="myFunction1()">Sort Alphabetically</button>
<button 
 onclick="myFunction2()">Sort Numerically</button>
<p id="demo"></p>
 
<script>
const points = [40, 100, 1, 5, 25, 10];
 document.getElementById("demo").innerHTML = points;
function 
 myFunction1() {
  points.sort();
  document.getElementById("demo").innerHTML 
 = points;
}
function myFunction2() {
  points.sort(function(a, b){return 
 a - b});
  document.getElementById("demo").innerHTML = points;
}
 </script>

自己尝试一下→

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>

<p>Click the buttons to sort the array alphabetically or numerically.</p>

<button onclick="myFunction1()">Sort Alphabetically</button>
<button onclick="myFunction2()">Sort Numerically</button>

<p id="demo"></p>

<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;  

function myFunction1() {
  points.sort();
  document.getElementById("demo").innerHTML = points;
}
function myFunction2() {
  points.sort(function(a, b){return a - b});
  document.getElementById("demo").innerHTML = points;
}
</script>

</body>
</html>

以随机顺序对数组进行排序

例子

const points = [40, 100, 1, 5, 25, 10];
points.sort(function(){return 0.5 - Math.random()});

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>

<p>Click the button (again and again) to sort the array in random order.</p>

<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;  

function myFunction() {
  points.sort(function(){return 0.5 - Math.random()});
  document.getElementById("demo").innerHTML = points;
}
</script>

</body>
</html>

费希尔耶茨方法

上面的例子，array.sort()，不准确。它将有利于一些人数量超过其他人。

最流行的正确方法称为费舍尔耶茨洗牌法（Fisher Yates shuffle），早在 1938 年就被引入数据科学！

在 JavaScript 中，该方法可以翻译为：

例子

const points = [40, 100, 1, 5, 25, 10];

for (let i = points.length -1; i > 0; i--) {
  let j = Math.floor(Math.random() * (i+1));
  let k = points[i];
  
  points[i] = points[j];
  points[j] = k;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array Sort</h1>
<h2>The Fisher Yates Method</h2>

<p>Click the button (again and again) to sort the array in random order.</p>

<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;  

function myFunction() {
  for (let i = points.length -1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i+1));
    let k = points[i];
    points[i] = points[j];
    points[j] = k;
  }
  document.getElementById("demo").innerHTML = points;
}
</script>

</body>
</html>

查找最低（或最高）数组值

没有用于查找最大值或最小值的内置函数数组中的值。

但是，在对数组进行排序后，您可以使用索引以获得最高值和最低值。

升序排序：

例子

const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});
// now points[0] contains the lowest value
// and points[points.length-1] contains the highest value

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>

<p>The lowest number is <span id="demo"></span>.</p>

<script>
const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});
document.getElementById("demo").innerHTML = points[0];
</script>

</body>
</html>

降序排序：

例子

const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});
// now points[0] contains the highest value
// and points[points.length-1] contains the lowest value

自己尝试一下→

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>

<p>The highest number is <span id="demo"></span>.</p>

<script>
const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b-a});
document.getElementById("demo").innerHTML = points[0];
</script>

</body>
</html>

如果您只想找到最高（或最低）值，则对整个数组进行排序是一种非常低效的方法。

在数组上使用 Math.max()

您可以使用 Math.max.apply 查找数组中的最大数字：

例子

function myArrayMax(arr) {
    return Math.max.apply(null, arr);
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array Sort</h1>

<p>The highest number is <span id="demo"></span>.</p>

<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMax(points);

function myArrayMax(arr) {
  return Math.max.apply(null, arr);
}
</script>

</body>
</html>

Math.max.apply(null, [1, 2, 3]) 相当于 Math.max(1, 2 ，3）。

在数组上使用 Math.min()

您可以使用 Math.min.apply 查找数组中的最小数字：

例子

function myArrayMin(arr) {
  return Math.min.apply(null, arr);
}

自己尝试一下→

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array Sort</h1>

<p>The lowest number is <span id="demo"></span>.</p>

<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMin(points);

function myArrayMin(arr) {
  return Math.min.apply(null, arr);
}
</script>

</body>
</html>

Math.min.apply(null, [1, 2, 3]) 相当于 Math.min(1, 2 ，3）。

我的最小/最大 JavaScript 方法

最快的解决方案是使用“自制”方法。

该函数循环遍历一个数组，将每个值与最高值进行比较发现值：

示例（查找最大值）

function myArrayMax(arr) {
  let len = arr.length;
  let max = -Infinity;
  while (len--) {
        
  if (arr[len] > max) {
      
  max = arr[len];
    }
  }
  return max;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>
<p>The highest number is <span id="demo"></span>.</p>

<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMax(points);

function myArrayMax(arr) {
  let len = arr.length;
  let max = -Infinity;
  while (len--) {
    if (arr[len] > max) {
      max = arr[len];
    }
  }
  return max;
}
</script>

</body>
</html>

该函数循环遍历一个数组，将每个值与最低值进行比较发现值：

示例（求最小值）

 function myArrayMin(arr) {
  let len = arr.length;
  let min = Infinity;
  while (len--) {
    
  if (arr[len] < min) {
      
  min = arr[len];
    }
  }
  return min;
}

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>
<p>The lowest number is <span id="demo"></span>.</p>

<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMin(points);

function myArrayMin(arr) {
  let len = arr.length;
  let min = Infinity;
  while (len--) {
    if (arr[len] < min) {
      min = arr[len];
    }
  }
  return min;
}
</script>

</body>
</html>

对对象数组进行排序

JavaScript 数组通常包含对象：

例子

const cars = [
  
 {type:"Volvo", year:2016},
  
 {type:"Saab", year:2001},
  
 {type:"BMW", year:2010}
];

即使对象具有不同数据类型的属性，sort() 方法可用于对数组进行排序。

解决方案是编写一个比较函数来比较属性值：

例子

cars.sort(function(a, b){return a.year - b.year});

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>

<p>Sort car objects on age:</p>

<p id="demo"></p>

<script>
const cars = [
  {type:"Volvo", year:2016},
  {type:"Saab", year:2001},
  {type:"BMW", year:2010}
];

displayCars();

cars.sort(function(a, b){return a.year - b.year});
displayCars();

function displayCars() {
  document.getElementById("demo").innerHTML =
  cars[0].type + " " + cars[0].year + "<br>" +
  cars[1].type + " " + cars[1].year + "<br>" +
  cars[2].type + " " + cars[2].year;
}
</script>

</body>
</html>

比较字符串属性有点复杂：

例子

cars.sort(function(a, b){
  let x = a.type.toLowerCase();
  let y = b.type.toLowerCase();
    if (x < y) {return -1;}
  
 if (x > y) {return 1;}
  return 0;
});

自己尝试一下→

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>

<p>Click the buttons to sort car objects on type.</p>

<button onclick="myFunction()">Sort</button>
<p id="demo"></p>

<script>
const cars = [
  {type:"Volvo", year:2016},
  {type:"Saab", year:2001},
  {type:"BMW", year:2010}
];

displayCars();

function myFunction() {
  cars.sort(function(a, b){
    let x = a.type.toLowerCase();
    let y = b.type.toLowerCase();
    if (x < y) {return -1;}
    if (x > y) {return 1;}
    return 0;
  });
  displayCars();
}

function displayCars() {
  document.getElementById("demo").innerHTML =
  cars[0].type + " " + cars[0].year + "<br>" +
  cars[1].type + " " + cars[1].year + "<br>" +
  cars[2].type + " " + cars[2].year;
}
</script>

</body>
</html>

稳定数组`sort()`

ES2019 修订了 Array sort() 方法。

在 2019 年之前，规范允许不稳定的排序算法，例如 QuickSort。

ES2019之后，浏览器必须使用稳定的排序算法：

当对某个值的元素进行排序时，这些元素必须保持其与具有相同值的其他元素的相对位置。

例子

const myArr = [
  {name:"X00",price:100 },
  {name:"X01",price:100 },
  {name:"X02",price:100 },
  {name:"X03",price:100 },
  {name:"X04",price:110 },
  {name:"X05",price:110 },
  {name:"X06",price:110 },
  {name:"X07",price:110 }
];

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Stable Sort</h1>

<p>From ES2019, browsers must use a stable sorting algorithm.</p>
<p>When sorting elements on a key, the elements must keep their relative position to other objects with the same key.</p>

<p id="demo"></p>

<script>

const myArr = [
  {name:"X00",price:100 },
  {name:"X01",price:100 },
  {name:"X02",price:100 },
  {name:"X03",price:100 },
  {name:"X04",price:110 },
  {name:"X05",price:110 },
  {name:"X06",price:110 },
  {name:"X07",price:110 },
  {name:"X08",price:120 },
  {name:"X09",price:120 },
  {name:"X10",price:120 },
  {name:"X11",price:120 },
  {name:"X12",price:130 },
  {name:"X13",price:130 },
  {name:"X14",price:130 },
  {name:"X15",price:130 },
  {name:"X16",price:140 },
  {name:"X17",price:140 },
  {name:"X18",price:140 },
  {name:"X19",price:140 }
];

myArr.sort( (p1, p2) => {
  if (p1.price < p2.price) return -1;
  if (p1.price > p2.price) return 1;
  return 0;
});

let txt = "";
myArr.forEach(myFunction);

function myFunction(value) {
  txt += value.name + " " + value.price + "<br>"; 
}
document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

上例中，按价格排序时，结果不允许带名字出来在另一个相对位置，如下所示：

完整的数组参考

有关完整的数组参考，请访问我们的：

完整的 JavaScript 数组参考。

该参考包含所有数组的描述和示例属性和方法。

JavaScript 数组排序

目录

对数组进行排序

例子

反转数组

例子

数字排序

例子

例子

比较功能

以随机顺序对数组进行排序

例子

费希尔耶茨方法

例子

查找最低（或最高）数组值

例子

例子

在数组上使用 Math.max()

例子

在数组上使用 Math.min()

例子

我的最小/最大 JavaScript 方法

示例（查找最大值）

示例（求最小值）

对对象数组进行排序

例子

例子

例子

稳定数组sort()

例子

完整的数组参考

稳定数组`sort()`