如何使用 JavaScript 对数值数组进行排序？
原创如何使用 JavaScript 对数值数组进行排序？
原创
在本文中，我们将学习在 JavaScript 中对数值数组进行排序的方法。数组的排序意味着以特定顺序排列数组的元素，即它们可以按升序或递增顺序排列，也可以按降序或递减顺序排列。
在 JavaScript 中，有两种方法可以按特定顺序对数值数组进行排序
- 通过在循环的帮助下遍历数组
- 通过使用 JavaScript 中提供的 sort（） 方法
让我们详细讨论上述两种方法，并对数值数组进行排序。
通过在循环的帮助下遍历数组
这是按特定顺序对数组进行排序的最朴素、最简单和最简单的方法。我们甚至可以使用这种方法对任何语言的数字数组进行排序。在这种方法中，我们使用两个不同的循环，并将每个元素相互比较以对数组进行排序。此方法将在 O（N^2） 时间和 O（1） 额外空间中工作，其中 N 将是数组的大小。
语法
以下语法将向您展示如何使用嵌套循环以递增顺序对数组进行排序
for(var i=0; i<n; i++){
for(var j=i+1; j<n; j++){
// statements inside the loops
}
}现在让我们了解此方法的实际实现，并借助 JavaScript 代码示例对数值数组进行排序。
步骤
- 步骤1 - 在第一步中，我们将向数字类型的文档添加一个输入元素，并从用户那里获取数字输入，以将其作为元素推送到数组中。
- 步骤2 - 在此步骤中，我们将在文档中添加两个按钮元素以执行不同的任务。第一个按钮将输入的值插入或推送到数组中，而第二个按钮将通过比较数组元素的数值对数组元素进行排序。
- 步骤3 - 在下一步中，我们将定义一个JavaScript函数，并将其作为值分配给上一步中添加的第一个按钮的onclick事件，以在数组中插入元素。
- 第 4 步 - 在第四步中，我们将定义另一个 JavaScript 函数，该函数将通过使用嵌套循环相互比较来对数组的元素进行排序，并将其作为值分配给第二步中添加的第二个按钮的 onclick 事件。
例
下面的示例将解释如何借助两个嵌套循环按升序对数值数组进行排序
<!DOCTYPE html>
<html>
<body>
<h2>Sort Numeric Array using JavaScript</h2>
<p>Enter elements of the array in numeric form:</p>
<input type = "number" id = "inp1" placeholder = "Number Value"><br><br>
<p id = "prev"> The initial order of the elements stored in the array is:</p>
<button id = "add" onclick = "setValues()"> Push element to the array</button>
<button id = "btn" onclick = "sortElement()"> click to sort the array</button>
<p id = "result"> </p>
<script>
var result = document.getElementById("result");
var prev = document.getElementById("prev");
var myArr = [];
function setValues() {
var inp1 = document.getElementById("inp1");
var val1 = inp1.value;
var num = Number(val1);
myArr.push(num)
inp1.value = " ";
}
function sortElement() {
var n = myArr.length;
if (n == 0) {
result.innerHTML = " <b> The array is empty, Please push the elements in the array and then try to sort. </b> "
} else {
prev.innerHTML += " <b> [ " + myArr + " ] </b> ";
for (var i = 0; i < n; i++) {
for (var j = i + 1; j < n; j++) {
if (myArr[j] < myArr[i]) {
// swap the numbers
var a = myArr[i];
myArr[i] = myArr[j];
myArr[j] = a;
}
}
}
result.innerHTML = " The array is sorted in the increasing order and the sorted order is: <b> [ " + myArr + " ]. </b> ";
}
}
</script>
</body>
</html>在这个例子中，我们已经看到了如何借助两个嵌套循环对数值数组进行排序，以遍历和比较每个元素，并按特定顺序排列它们。
通过使用 sort（） 方法
sort（） 方法是 JavaScript 提供的用于对数组元素进行排序的方法。它将数组的所有值视为字符串，然后比较它们进行排序。
sort（） 方法的问题
将数组元素视为 sort（） 方法的字符串的属性限制了它的使用。因为，当有一个元素包含零并且大于所有其他元素时，sort 方法会将该元素视为最小的字符串考虑因素。例如，如果数组包含 10 和 7 作为元素。因此，根据数学，10>7，但排序方法将通过考虑 10<7 并将 10 放在 7 之前以相反的顺序排序。
Array : [ 7, 5, 10, 12 ];
Order given by sort() method : [ 10, 12, 5, 7 ]
Correct order will be : [ 5, 7, 10, 12 ] 解决方案 - 上述问题的解决方案是使用比较器函数并将其传递到 sort（） 方法的括号内，以指定我们想要对元素进行排序的顺序。比较器函数将返回三个值
- 负数− 如果它返回负值，则意味着第一个参数小于第二个参数，因此 tit 将按排序顺序排在第一位。
- 零− 零值表示两个参数相同，它们的位置不会发生变化。
- 正值− 正值表示第一个参数大于第二个参数，因此第二个参数将按排序顺序排在第一位。
语法
以下语法将让您知道如何将 sort（） 方法与数组一起使用来对其进行排序
array_name.sort( comparator_function ); 让我们通过在 JavaScript 代码示例中实现它来实际理解它 -
算法
上一个示例的算法和这个示例的算法几乎相同。您只需要在数组上使用带有比较器函数的 sort（） 方法即可对元素进行排序。
例
下面的例子将解释使用带有比较器函数的 sort（） 方法对数组元素进行排序
<!DOCTYPE html>
<html>
<body>
<h2>Sort Numeric Array using JavaScript</h2>
<p>Enter elements of the array in numeric form:</p>
<input type = "number" id = "inp1" placeholder = "Number Value"><br><br>
<p id = "prev">The initial order of the elements stored in the array is:</p>
<button id = "add" onclick = "setValues()">Push element to the array</button>
<button id = "btn" onclick = "sortElement()">click to sort the array</button>
<p id = "result"> </p>
<script>
var result = document.getElementById("result");
var prev = document.getElementById("prev");
var myArr = [];
function setValues() {
var inp1 = document.getElementById("inp1");
var val1 = inp1.value;
var num = Number(val1);
myArr.push(num)
inp1.value = " ";
}
function sortElement() {
function cmp(a, b) {
return a - b;
}
var n = myArr.length;
if (n == 0) {
result.innerHTML = " <b> The array is empty, Please push the elements in the array and then try to sort. </b> "
}
else {
prev.innerHTML += " <b> [ " + myArr + " ] </b> ";
myArr.sort(cmp);
result.innerHTML = " The array is sorted in the increasing order and the sorted order is: <b> [ " + myArr + " ]. </b> ";
}
}
</script>
</body>
</html>在上面的例子中，我们使用了带有比较器函数的 sort（） 方法，以递增或升序对数组的元素进行排序。
注意 - 如果您将我们在比较器函数和 loops 方法中比较的值相互交换，则数组元素将以相反的顺序排序，例如降序或降序。
结论
在本文中，我们了解了对数值数组元素进行排序的两种不同方法。我们还讨论了使用 sort（） 方法对数组进行排序时出现的问题以及该问题的解决方案，并借助代码示例来理解这些方法中的每一个的实际实现。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。