数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在JavaScript中根据多个列排序数组？
多列数组是指在一个索引或位置处包含多个元素的数组，或者可以说它是一个数组的数组，每个索引处包含多个数组，我们需要根据这些包含数组的元素对该数组进行排序。
在本文中，我们将学习使用sort()方法对数组的数组进行排序的方法。我们将使用比较器函数来比较内部数组的元素，并相应地对它们进行排序。
让我们看看如何创建包含用户输入的数组的数组，然后对数组进行排序。
语法
以下语法将向您展示如何使用JavaScript创建数组的数组：
var first_array = []; var second_array = [ userInput1, userInput2 ]; first_array.push(second_array);
在上述语法中，我们创建了两个不同的数组，名为first_array和second_array。在second_array中，我们放入用户输入的值，然后使用push()方法将second_array推入first_array。
现在让我们讨论如何使用sort()方法根据包含数组的数值对数组元素进行排序。
步骤
步骤1 - 在第一步中，我们将在HTML文档中添加两个不同的文本和数字类型输入元素，以获取用户的输入，然后将它们推入稍后将排序的原始数组。
步骤2 - 在下一步中，我们将添加两个不同的按钮，并关联onclick事件，第一个按钮将输入的值推入子数组（稍后将推入原始数组），第二个按钮将排序原始数组并在用户屏幕上显示结果。
步骤3 - 在这一步中，我们将定义一个JavaScript函数，该函数将输入的值添加到子数组中，并将该子数组推入原始数组，并将此函数作为值分配给上一步中定义的第一个按钮的onclick事件。
步骤4 - 在第四步中，我们将定义另一个JavaScript函数，该函数将使用比较器函数根据子数组的数值对数组元素进行排序，并在用户屏幕上显示结果。
步骤5 - 在最后一步中，我们将上一步中声明的函数作为值分配给第三步中定义的第二个按钮的onclick事件。
示例
下面的示例将解释如何使用sort()方法根据其中存储的数值对数组的数组进行排序：
<!DOCTYPE html>
<html lang = "en">
<body>
<h2>Sort an array on multiple columns using JavaScript</h2>
<p>Enter your Name and Age to insert into array:</p>
<input type = "text" id = "inp1" placeholder = "Name"> <br><br>
<input type = "number" id = "inp2" placeholder = "Age"> <br><br>
<button id = "add" onclick = "insertArr()"> Add Item to array</button>
<button id = "btn" onclick = "sortArr()"> click to sort </button>
<p id = "prev">The initial order of values in array of arrays is:</p>
<p id = "result">The final sorted order of values in array of arrays is:</p>
<script>
var result = document.getElementById("result");
var prev = document.getElementById("prev");
var myArr = [];
function insertArr() {
var inp1 = document.getElementById("inp1");
var val1 = inp1.value;
var name = val1;
var inp2 = document.getElementById("inp2");
var val2 = inp2.value;
var age = Number(val2);
var arr = [
name,
age
]
myArr.push(arr);
inp1.value = " ";
inp2.value = " ";
}
function sortArr() {
for (var item of myArr) {
prev.innerHTML += " <b> [ " + item + " ] </b> ";
}
function cmp(a, b) {
var xa = a[1];
var xb = b[1];
if (xa < xb)
return -1;
if (xa > xb)
return 1;
return 0;
}
myArr.sort(cmp);
for (var item of myArr) {
result.innerHTML += " <b> [ " + item + " ] </b> ";
}
}
</script>
</body>
</html>
在上面的示例中，我们根据原始数组中包含的子数组中存储的数值对数组的数组进行了排序。
让我们再看一个代码示例，在这个示例中，我们将根据原始数组的子数组中包含的字符串元素的长度对数组进行排序。
算法
此示例的算法与前一个示例的算法类似。您可以通过对上一个示例中的比较器函数cmp进行一些更改来根据原始数组子数组中包含的字符串值的长度对数组进行排序。需要进行的更改如下：
将变量xa和xb的值从a[1]和b[1]更改为a[0].length和b[0].length，完成这些更改后，就可以根据字符串值的长度对数组进行排序了。
示例
下面的示例将帮助您实际理解在上一个算法中需要进行的更改，它还将根据原始数组子数组中包含的字符串值对数组进行排序：
<!DOCTYPE html>
<html>
<body>
<h2>Sort an array on multiple columns using JavaScript</h2>
<p>Enter your Name and Age to insert into array:</p>
<input type="text" id="inp1" placeholder="Name"><br><br>
<input type="number" id="inp2" placeholder="Age"><br><br>
<button id="add" onclick="insertArr()"> Add Item to array</button>
<button id="btn" onclick="sortArr()"> click to sort </button>
<p id="prev">The initial order of values in array of arrays is:</p>
<p id="result">The final sorted order of values in array of arrays is:</p>
<script>
var result = document.getElementById("result");
var prev = document.getElementById("prev");
var myArr = [];
function insertArr() {
var inp1 = document.getElementById("inp1");
var val1 = inp1.value;
var name = val1;
var inp2 = document.getElementById("inp2");
var val2 = inp2.value;
var age = Number(val2);
var arr = [
name,
age
]
myArr.push(arr);
inp1.value = "";
inp2.value = " ";
}
function sortArr() {
for (var item of myArr) {
prev.innerHTML += " <b> [ " + item + " ] </b> ";
}
function cmp(a, b) {
var xa = a[0].length;
var xb = b[0].length;
if (xa < xb)
return -1;
if (xa > xb)
return 1;
return 0;
}
myArr.sort(cmp);
for (var item of myArr) {
result.innerHTML += " <b> [ " + item + " ] </b> ";
}
}
</script>
</body>
</html>
在上面的示例中，我们使用了带有比较器函数的sort()方法，以便它根据子数组中包含的字符串值的长度对原始数组进行排序。
结论
在本文中，我们讨论了对包含不同类型值的数组的数组进行排序。我们借助代码示例实际理解了这一点，在这些示例中，我们使用了包含字符串和数值的子数组，并分别根据数值和字符串值的长度对它们进行排序。
345 次浏览
