小码哥的IT人生

JavaScript Array sort() 方法

JavaScript基础 2022-05-13 16:30:05小码哥的IT人生shichen

JavaScript Array sort() 方法

实例

排序数组:

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

完整实例:

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组</h1>
<p>sort() 方法对数组的项目进行排序。</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.sort();
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

页面下方有更多 TIY 实例。

定义和用法

sort() 方法对数组的项目进行排序。

排序顺序可以是按字母或数字,也可以是升序(向上)或降序(向下)。

默认情况下,sort() 方法将按字母和升序将值作为字符串进行排序。

这适用于字符串("Apple" 出现在 "Banana" 之前)。但是,如果数字按字符串排序,则 "25" 大于 "100" ,因为 "2" 大于 "1"。

正因为如此,sort() 方法在对数字进行排序时会产生不正确的结果。

您可以通过提供“比较函数”来解决此问题(请参阅下面的“参数值”)。

注释:sort() 方法会改变原始数组。

浏览器支持

所有浏览器都完全支持 sort() 方法:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Yes Yes Yes Yes Yes Yes

语法

array.sort(compareFunction)

参数值

参数 描述
compareFunction

可选。定义替代排序顺序的函数。该函数应返回负值、零值或正值,具体取决于参数,例如:

sort() 方法比较两个值时,将值发送给比较函数,根据返回的(负、零、正)值对值进行排序。

举例:

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

该函数计算 40-100,并返回 -60(负值)。

sort 函数会将 40 排序为小于 100 的值。

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

技术细节

返回值: Array 对象,其中的项目已排序。
JavaScript 版本: ECMAScript 1

更多实例

示例代码:

按升序对数组中的数字进行排序:

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

完整实例:

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组</h1>
<p>sort() 方法对数组的项目进行排序。</p>
<p id="demo"></p>
<script>
const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});
document.getElementById("demo").innerHTML = points;
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

示例代码:

按降序对数组中的数字进行排序:

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

完整实例:

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组</h1>
<p>sort() 方法对数组的项目进行排序。</p>
<p id="demo"></p>
<script>
const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b-a});
document.getElementById("demo").innerHTML = points;
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

示例代码:

获取数组中的最小值:

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});    // 按升序对数组中的数字进行排序
// 数组中的第一项 (points[0]) 现在是最低值

完整实例:

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组</h1>
<p>sort() 方法对数组的项目进行排序。</p>
<p id="demo"></p>
<script>
const points = [40, 100, 1, 5, 25, 10];
// Sort the numbers in ascending order:
points.sort(function(a, b){return a-b});
// points[0] is now the lowes value:
document.getElementById("demo").innerHTML = points[0];
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

示例代码:

获取数组中的最大值:

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b-a});    // 按降序对数组中的数字进行排序
// 数组中的第一项 (points[0]) 现在是最高值

完整实例:

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组</h1>
<p>sort() 方法对数组的项目进行排序。</p>
<p id="demo"></p>
<script>
const points = [40, 100, 1, 5, 25, 10];
// Sort the numbers in descending order:
points.sort(function(a, b){return b-a});
// points[0] is now the highest value:
document.getElementById("demo").innerHTML = points[0];
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

示例代码:

获取数组中的最大值:

const points = [40, 100, 1, 5, 25, 10];
// 按升序对数字进行排序:
points.sort(function(a, b){return a-b});
// points[points.length-1] = 100(最高值)

完整实例:

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组</h1>
<p>sort() 方法对数组的项目进行排序。</p>
<p id="demo"></p>
<script>
const points = [40, 100, 1, 5, 25, 10];
// Sort the numbers in ascending order:
points.sort(function(a, b){return a-b});
// points[0] is now the highest value:
document.getElementById("demo").innerHTML = points[points.length-1];
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

示例代码:

按字母顺序对数组进行排序,然后反转排序项的顺序(降序):

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

完整实例:

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组</h1>
<p>Array.sort() 方法对数组的项目进行排序。</p>
<p>Array.reverse() 方法颠倒顺序。</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
fruits.reverse();
document.getElementById("demo").innerHTML = fruits;
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024