数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 JavaScript 中根据两个字段对对象数组进行排序？
对象数组是一个数组，其中所有元素都以 JavaScript 对象的形式存在。在这里，我们被要求使用具有两个字段的对象数组，这意味着必须使用具有两个元素的对象作为数组的元素。
在本文中，我们将学习如何在 JavaScript 中根据两个字段对对象数组进行排序的方法。我们可以简单地使用 JavaScript 的 sort() 方法对数组的元素进行排序，并为其提供一个 cmp 或 比较器函数来定义我们希望按什么顺序对给定数组中对象的元素进行排序。
语法
以下语法将向您展示如何使用 sort() 方法以及数组来对其元素进行排序：
array_name.sort( comparator_function );
让我们从实践角度来实现它，并使用 sort() 方法结合代码示例，在 JavaScript 中根据两个字段对对象数组进行排序。
步骤
步骤 1 - 在第一步中，我们将向 HTML 文档添加两个数字类型的输入元素，以获取用户的数字输入，然后以对象的形式将它们添加到数组中。
步骤 2 - 在下一步中，我们将添加两个不同的按钮元素来执行不同的功能。第一个按钮将以对象的形式将用户输入的元素添加到数组中，而第二个按钮将排列数组的元素，以便所有对象都根据对象的第一个属性进行排序。
步骤 3 - 在第三步中，我们将定义一个 JavaScript 函数，该函数将以对象的形式添加用户输入的值的元素，并将其作为值分配给上一步中定义的第一个按钮的 onclick 事件。
步骤 4 - 在此步骤中，我们将定义另一个 JavaScript 函数，该函数使用 sort() 方法和比较器函数来根据数组中包含的对象的第一个属性对数组的元素进行排序。
步骤 5 - 在最后一步中，我们将把上一步中定义的函数分配给第三步中定义的第二个按钮的 onclick 事件。
示例
以下示例将帮助您理解上述算法以及使用带比较器函数的 sort() 方法对对象数组进行排序：
<!DOCTYPE html>
<html lang = "en">
<body>
<h2>Sort an array of object by two fields in JavaScript</h2>
<p>Enter any two numbers to insert into objects array:</p>
<input type = "number" id = "inp1" placeholder = "Number1"> <br><br>
<input type = "number" id = "inp2" placeholder = "Number2"> <br><br>
<button id = "add" onclick = "insertArr()"> Add Item to set</button>
<button id = "btn" onclick = "sortArr()"> click to sort</button>
<p id = "prev">The initial order of values in array of objects is:</p>
<p id = "result">The final sorted order of values in array of objects 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 num1 = Number(val1);
var inp2 = document.getElementById("inp2");
var val2 = inp2.value;
var num2 = Number(val2);
var obj = {
objNum1: num1,
objNum2: num2
}
myArr.push(obj);
inp1.value = " ";
inp2.value = " ";
}
function sortArr() {
for (var item of myArr) {
prev.innerHTML += " <b> " + JSON.stringify(item) + " </b> ";
}
function cmp(a, b) {
var xa = a.objNum1;
var xb = b.objNum1;
var ya = a.objNum2;
var yb = b.objNum2;
if (xa == xb) {
return ((ya < yb) ? -1 : (ya > yb) ? 1 : 0);
} else {
return ((xa < xb) ? -1 : 1);
}
}
myArr.sort(cmp);
for (var item of myArr) {
result.innerHTML += " <b> " + JSON.stringify(item) + " </b> ";
}
}
</script>
</body>
</html>
在上面的示例中，数组的所有对象都将根据其第一个属性的值进行排序。在输入字段中输入每个值后，您必须单击“将项目添加到集合”按钮以将值设置为对象的形式插入到数组中，完成插入值后，单击“单击以排序”按钮以按给定顺序对元素进行排序。
让我们再看一个代码示例，在这个示例中，我们将根据对象的第二个属性对数组元素进行排序，并用非常简短的方式编写比较器函数。
算法
先前示例和此示例的算法类似。您只需要对先前的算法进行一些小的更改，将 cmp 函数括号中编写的整个代码替换为以下代码：
return a.objNum2 - b.objNum2 || a.objNum1 - b.objNum1;
以上代码将根据对象的第二个属性对数组进行排序，同时也将缩短我们的 cmp 函数。我们也可以通过交换使用OR 运算符的条件来在先前的示例中使用相同的 cmp 函数。
示例
以下示例将根据存储在其中的对象的第二个属性对数组的元素进行排序：
<!DOCTYPE html>
<html>
<body>
<h2>Sort an array of object by two fields in JavaScript</h2>
<p>Enter any two numbers to insert into objects array:</p>
<input type = "number" id = "inp1" placeholder = "Number1"><br><br>
<input type = "number" id = "inp2" placeholder = "Number2"><br><br>
<button id = "add" onclick = "insertArr()">Add Item to set</button>
<button id = "btn" onclick = "sortArr()">click to sort</button>
<p id = "prev">The initial order of values in array of objects is:</p>
<p id = "result">The final sorted order of values in array of objects 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 num1 = Number(val1);
var inp2 = document.getElementById("inp2");
var val2 = inp2.value;
var num2 = Number(val2);
var obj = {
objNum1: num1,
objNum2: num2
}
myArr.push(obj);
inp1.value = " ";
inp2.value = " ";
}
function sortArr() {
for (var item of myArr) {
prev.innerHTML += " <b> " + JSON.stringify(item) + " </b> ";
}
function cmp(a, b) {
return a.objNum2 - b.objNum2 || a.objNum1 - b.objNum1;
}
myArr.sort(cmp);
for (var item of myArr) {
result.innerHTML += " <b> " + JSON.stringify(item) + " </b> ";
}
}
</script>
</body>
</html>
以上示例将根据存储的对象的第二个属性对数组元素进行排序。
结论
在本文中，我们学习了如何在 JavaScript 中根据两个字段对对象数组进行排序。我们通过两个不同的示例进行了讨论，第一个示例根据对象的第一个属性对元素进行排序，第二个示例根据存储的对象的第二个属性对数组进行排序。
256 次浏览
