如何按升序对多维数组输出进行排序？

Question

单击“确定”时，我的代码会生成一个二维矩阵。该代码将数据存储在多维数组中，但我正在尝试向代码添加一个排序函数，该函数使用第 4 个文本框按升序重新排列代码。关于我如何做到这一点的任何建议？

HTML 代码

<div class="rightDiv">
<div id = "pastcalcblock"> 
    <h3> PAST CALCULATIONS </h3>
         <input type = "text" size = "1" id = "text1"/>
         <input type = "text" size = "1" id = "text2"/>
         <input type = "text" size = "1" id = "text3"/>
         <input type = "text" size = "1" id = "text4"/><br>
         <input type = "button" value = "Ok" id = "operation" onClick = "display()"/>
         <div id = "resultTab">
                SORT<br>
                    <input type = "button" value = "As Entered" id = "enteredBut">
                    <input type = "button" value = "By Result" id = "resultBut" onClick = "sort()"><br><br>
                    <div id="expressions">
                    </div>                
            </div>
        </div>

Javascript 代码

    function display()
    {
    var arrayOne =[document.getElementById('text1').value,document.getElementById('text2').value,document.getElementById('text3').value,document.getElementById('text4').value ];

      new_array=arrayOne.join(" ");
    var para = document.createElement("p");
    var t = document.createTextNode(new_array);
    para.appendChild(t)
    document.getElementById("expressions").appendChild(para);

    }



 function sort(){
            var dispArr = [document.getElementById('text1').value, 
document.getElementById('text2').value, document.getElementById('text3').value,document.getElementById('text4').value];
            var myArray = [];
             for(var i = 0 ; i < 1 ; i ++ ) {
                 myArray[i] = [];
                 for(var j = 0 ; j < 5 ; j++ )
                 {
                     myArray[i][j] = dispArr[j];
                     console.log(myArray[i][j]);
                  } 
             }


        }

Answer 1

您最好将整个矩阵保存在内存变量中，然后添加到该变量中。还要考虑当输出被排序时，你也必须知道如何恢复到原来的顺序，这样“As Entered”按钮仍然具有预期的效果。因此，最好有一个显示功能，从头开始，清空输出并以输入或排序的顺序再现所有数据。

你可以这样做：

var matrix = []; // global value with all data

function addExpression() {
    var arrayOne = [
        document.getElementById('text1').value,
        document.getElementById('text2').value,
        document.getElementById('text3').value,
        document.getElementById('text4').value 
    ];
    // add to matrix
    matrix.push(arrayOne);
    display(false);
}

function display(byResult) {
    // Determine whether to sort or not:
    var matrix2 = byResult ? sorted(matrix) : matrix;
    // display each row:
    var expressions = document.getElementById("expressions");
    expressions.innerHTML = ''; // empty completely
    matrix2.forEach( row => {
        var para = document.createElement("p");
        var t = document.createTextNode(row.join(" "));
        para.appendChild(t)
        expressions.appendChild(para);
    });
}

function sorted(m){ // Create a copy, and sort that by last column
    return m.slice().sort( (a, b)  => a[3] - b[3] );
}

<div class="rightDiv">
    <div id = "pastcalcblock"> 
        <h3> PAST CALCULATIONS </h3>
         <input type = "text" size = "1" id = "text1"/>
         <input type = "text" size = "1" id = "text2"/>
         <input type = "text" size = "1" id = "text3"/>
         <input type = "text" size = "1" id = "text4"/><br>
         <input type = "button" value = "Ok" id = "operation" onClick = "addExpression()"/>
         <div id = "resultTab">
            SORT<br>
            <input type = "button" value = "As Entered" id = "enteredBut" onClick="display(false)">
            <input type = "button" value = "By Result" id = "resultBut" onClick = "display(true)"><br><br>
            <div id="expressions">
            </div>         
        </div>
    </div>
</div>