JavaScript 如何根据迭代器函数获取应将值插入到排序数组中的索引

在本文中，我们将学习如何根据迭代器函数获取应将值插入到排序数组的索引。在此我们使用排序函数对数组进行排序，并打印数组和新元素在DOM中的位置。

方法：

创建一个空数组。
现在创建一个排序函数，参数为一个数组。
创建一个onClick函数，当按钮被按下时自动运行该函数。
在onClick函数中，首先将元素添加到数组中，然后使用迭代器函数找到元素的位置。
在查找元素位置时，如果数组元素大于元素，则标记该位置并终止循环。
最后，我们将打印数组和新添加的元素在DOM中的位置。
示例： 在此示例中，我们将使用上述方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="gfg.js"></script>
    <style>
        input {
            width: 300px;
            height: 25px;
        }
        button {
            width: 100px;
            height: 31px;
        }
    </style>
</head>
 
<body>
    <p style="font-size: 35px;">
        Input the elements in the array : 
    </p>
    <input type="text" id="element">
    <button type="button" onclick="add()">ADD</button>
    <br>
    <span id="array" style="font-size: 25px;"></span>
    <br>
    <span id="new-position-array"
          style="font-size: 25px;">
    </span>
</body>
</html>

JavaScript代码

//filename:gfg.js
// Creating an empty array and when we add the
// elements we increase the number of elements
// by 1
const arr = Array();
let numberOfElements = 0;
 
// Sorting function to sort the array
// Here we use the selection sort
// algorithm for sorting
function sort(arr) {
    for (let i = 0; i < arr.length; i++) {
        let min = i;
        for (let j = i + 1; j < arr.length; j++) {
            if (arr[j] < arr[min])
                min = j;
        }
        let temp = arr[min];
        arr[min] = arr[i];
        arr[i] = temp;
    }
}
// onClick function add
function add() {
 
    // Taking the input from the text box to
    // add the element to the given array
    arr[numberOfElements] = parseInt(
        document.getElementById("element").value);
 
    // Increasing the array length to add
    // next number to the array
    numberOfElements++;
 
    // Variables to find the position of
    // the newly added element
    let position = 0;
    let flag = false;
 
    // Finding the position of the newly added
    // element in the sorted array
    let newElement = arr[numberOfElements - 1];
    for (let i = 0; i < arr.length; i++) {
 
        // If the array element is greater then
        // the newly added element then mark that
        // position and break the loop as this is
        // the position of newly added element in
        // the given sorted array
        if (arr[i] > newElement) {
            position = i;
            flag = true;
            break;
        }
    }
    // If the newly added element is highest among
    // the elements in the array then its position
    // would be the array length - 1
    if (flag == false)
        position = arr.length - 1;
 
    // Now calling the sort function to sort the
    // given array after insertion
    sort(arr);
 
    // For printing into the DOM
    document.getElementById("element").value = "";
 
    let print = "Array is : ";
 
    for (let i = 0; i < arr.length; i++) {
        print += arr[i] + " ";
    }
    document.getElementById("array").innerHTML = print;
    document.getElementById("new-position-array").innerHTML
        = "New element: " + newElement + " at Position: "
        + position;
}

使用的函数：

sort()函数： 这个函数接受一个希望排序的数组作为参数，并实现了选择排序，并将排序后的数组作为结果返回。

add()函数： 这个函数是一个点击事件函数，当按钮被点击时触发。它从输入框中获取值，并将其存储到排序后的数组中，并将数组索引值增加1。然后，它通过与数组的每个元素进行比较，找到新添加元素在排序后数组中的位置，如果找到比它大的值，则中断循环并存储该位置的索引，然后调用sort()函数再次对数组进行排序。最后，在DOM中输出结果。

输出：

JavaScript 如何根据迭代器函数获取应将值插入到排序数组中的索引