JavaScript数组合并与排序操作详解
本文介绍JavaScript中数组的常用操作方法，包括使用concat()合并两个或多个数组，以及利用sort()进行字母和数字排序（升序与降序）。此外，还演示了如何使用reverse()方法反转数组元素顺序，并提供HTML交互示例代码。
数组合并方法
在JavaScript中，可以使用concat()方法来合并两个数组。该方法不会修改现有数组，而是返回一个新数组。
<!DOCTYPE html>
<html>
<body>
<p id="demo">点击按钮合并数组。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction()
{
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var children = hege.concat(stale);
var x=document.getElementById("demo");
x.innerHTML=children;
}
</script>
</body>
</html>
点击按钮后，页面将显示合并后的数组结果。
Cecilie,Lone,Emil,Tobias,Linus
concat()方法同样支持同时合并三个或更多数组。只需在调用时依次传入需要合并的数组即可。
<!DOCTYPE html>
<html>
<body>
<script>
var parents = ["Jani", "Tove"];
var brothers = ["Stale", "Kai Jim", "Borge"];
var children = ["Cecilie", "Lone"];
var family = parents.concat(brothers, children);
document.write(family);
</script>
</body>
</html>
执行上述代码后，页面会输出包含所有源数组元素的新数组。
Jani,Tove,Stale,Kai Jim,Borge,Cecilie,Lone
数组排序技巧
使用sort()方法可以对数组元素进行排序。默认情况下，sort()会将元素转换为字符串并按字母顺序进行升序排列。
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to sort the array.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
</body>
</html>
排序后的数组元素将按字母顺序显示在页面上。
Apple,Banana,Mango,Orange
对于数字数组，默认的sort()行为可能不符合预期，因为它是按字符串Unicode码点排序的。要实现数字升序排列，需要传入一个比较函数作为参数。
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to sort the array.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b});
var x=document.getElementById("demo");
x.innerHTML=points;
}
</script>
</body>
</html>
通过传入比较函数(a, b) => a - b，数组将按数值大小进行升序排列。
1,5,10,25,40,100
若要实现数字降序排列，只需调整比较函数中的返回值顺序，即使用(b, a) => b - a或(a, b) => b - a。
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to sort the array.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return b-a});
var x=document.getElementById("demo");
x.innerHTML=points;
}
</script>
</body>
</html>
应用上述比较函数后，数组元素将按数值大小进行降序排列。
100,40,25,10,5,1数组反转操作
使用reverse()方法可以将数组中元素的顺序完全反转。该方法直接修改原数组并返回反转后的数组引用。
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to reverse the order of the elements in the array.</p>
<button onclick="myFunction()">Try it</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction()
{
fruits.reverse();
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
</body>
</html>
调用reverse()后，原数组最后一个元素变为第一个，依此类推，实现顺序反转。
Mango,Apple,Orange,BananaJavaScript异步发送HTTP请求时怎么优雅地处理错误
2026-11-05 17:10:44
5款主流JS在线运行工具对比：CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑：这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00