資料結構
網路
關係資料庫管理系統
作業系統
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 次瀏覽
