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