摘要：我們必須對數字數組進行升序排序，并找出給定數字在該數組中的位置。算法說明將值第二個參數插入到數組第一個參數中，并返回其在排序后的數組中的最低索引。我們的目標是將輸入的數字在輸入數組后中排序后，再返回它的索引。

翻譯：瘋狂的技術宅
原文：https://medium.freecodecamp.o...

本文首發微信公眾號：前端先鋒
歡迎關注，每天都給你推送新鮮的前端技術文章

編寫算法時，排序是一個非常重要的概念。它有各種各樣的種類：冒泡排序、希爾排序、分塊塊排序，梳排序，雞尾酒排序，侏儒排序 —— 這些可不是我瞎編的！

這個算法題能夠讓我們一睹精彩的世界。我們必須對數字數組進行升序排序，并找出給定數字在該數組中的位置。

將值（第二個參數）插入到數組（第一個參數）中，并返回其在排序后的數組中的最低索引。返回的值應該是一個數字。
例如 getIndexToIns([1,2,3,4], 1.5) 應該返回 1，因為 1.5 大于 1（索引0），但小于 2（索引1）。
同樣，getIndexToIns([20,3,5], 19) 應該返回 2，因為數組排序后應該是 [3,5,20] ， 19 小于 20 （索引2）且大于 5（索引1）。

function getIndexToIns(arr, num) {
  return num;
}

getIndexToIns([40, 60], 50);

本算法題原題

getIndexToIns([10, 20, 30, 40, 50], 35) 應該返回一個數字 3。

getIndexToIns([10, 20, 30, 40, 50], 30) 應該返回一個數字 2.

getIndexToIns([40, 60], 50) 應該返回一個數字 1.

getIndexToIns([3, 10, 5], 3) 應該返回一個數字 0.

getIndexToIns([5, 3, 20, 3], 5) 應該返回一個數字 2.

getIndexToIns([2, 20, 10], 19) 應該返回一個數字 2.

getIndexToIns([2, 5, 10], 15) 應該返回一個數字 3.

getIndexToIns([], 1) 應該返回一個數字 0.

理解問題：有兩個輸入：一個數組和一個數字。我們的目標是將輸入的數字在輸入數組后中排序后，再返回它的索引。
示例/測試用例：我們不知道輸入的數組是以哪種方式排序的，但是提供的測試用例清楚地表明，輸入的數組應該從小到大進行排序。

請注意，在最后一個測試用例中存在邊界問題，其中輸入數組是一個空數組。

數據結構：由于我們最終將會返回索引，因此應該堅持使用數組。

我們將會用一個名為 .indexOf() 的方法：

.indexOf() 返回元素在數組中出現的第一個索引，如果元素根本不存在則返回 -1。例如：

let food = ["pizza", "ice cream", "chips", "hot dog", "cake"]
food.indexOf("chips")
// returns 2
food.indexOf("spaghetti")
// returns -1

我們將使用 .concat() 而不是 .push()。為什么呢？因為當使用 .push() 向數組添加元素時，它會返回新數組的長度。而使用 .concat() 向數組添加元素時，它會返回新數組本身。例如：

let array = [4, 10, 20, 37, 45]
array.push(98)
// returns 6
array.concat(98)
// returns [4, 10, 20, 37, 45, 98]

算法：

將num 插入 arr。

將 arr 進行升序排序。

返回 num 的索引。

代碼：

function getIndexToIns(arr, num) {
  // Insert num into arr, creating a new array.
     let newArray = arr.concat(num)
  //             [40, 60].concat(50)
  //             [40, 60, 50]

  // Sort the new array from least to greatest.
     newArray.sort((a, b) => a - b)
  // [40, 60, 50].sort((a, b) => a - b)
  // [40, 50, 60]

  // Return the index of num which is now
  // in the correct place in the new array.
     return newArray.indexOf(num);
  // return [40, 50, 60].indexOf(50)
  // 1
}

getIndexToIns([40, 60], 50);

去掉局部變量和注釋后的代碼：

function getIndexToIns(arr, num) {
  return arr.concat(num).sort((a, b) => a - b).indexOf(num);
}

getIndexToIns([40, 60], 50);

理解問題：有兩個輸入：一個數組和一個數字。我們的目標是將輸入的數字在輸入數組后中排序后，再返回它的索引。
示例/測試用例：我們不知道輸入的數組是以哪種方式排序的，但是提供的測試用例清楚地表明，輸入的數組應該從小到大進行排序。

這個解決方案需要考慮兩個邊界情況：

如果輸入數組為空，則我們需要返回 0，因為 num 將是該數組中的唯一元素，所以它在索引為 0 的位置。

如果 num 的位置處于升序排序后的 arr 的末尾，那么我們需要返回 arr 的長度。

數據結構：由于我們最終將會返回索引，因此應該堅持使用數組。

讓我們看看.findIndex() 并了解它將如何幫助解決這一挑戰：

.findIndex() 返回數組中第一個滿足條件的元素索引。否則它將返回 -1，這表示沒有元素通過測試。例如：

let numbers = [3, 17, 94, 15, 20]
numbers.findIndex((currentNum) => currentNum % 2 == 0)
// returns 2
numbers.findIndex((currentNum) => currentNum > 100)
// returns -1

這對我們很有用，因為我們可以用 .findIndex() 將輸入 num 與輸入 arr 中的每個數字進行比較，并找出它從最小到最大的順序。

算法：

如果 arr 是一個空數組，則返回 0。

如果 num 處于排序后數組的末尾，則返回 arr 的長度。

否則，返回索引 num。

代碼：

function getIndexToIns(arr, num) {
  // Sort arr from least to greatest.
    let sortedArray = arr.sort((a, b) => a - b)
  //                  [40, 60].sort((a, b) => a - b)
  //                  [40, 60]

  // Compare num to each number in sortedArray
  // and find the index where num is less than or equal to 
  // a number in sortedArray.
    let index = sortedArray.findIndex((currentNum) => num <= currentNum)
  //            [40, 60].findIndex(40 => 50 <= 40) --> falsy
  //            [40, 60].findIndex(60 => 50 <= 60) --> truthy
  //            returns 1 because num would fit like so [40, 50, 60]

  // Return the correct index of num.
  // If num belongs at the end of sortedArray or if arr is empty 
  // return the length of arr.
    return index === -1 ? arr.length : index
}

getIndexToIns([40, 60], 50);

去掉局部變量和注釋的代碼：

function getIndexToIns(arr, num) {
  let index = arr.sort((a, b) => a - b).findIndex((currentNum) => num <= currentNum)
  return index === -1 ? arr.length : index
}

getIndexToIns([40, 60], 50);

如果你有其他解決方案或建議，請在評論中分享！

12個令人驚嘆的CSS實驗項目

必須要會的 50 個React 面試題

世界頂級公司的前端面試都問些什么

11 個最好的 JavaScript 動態效果庫

CSS Flexbox 可視化手冊

從設計者的角度看 React

過節很無聊？還是用 JavaScript 寫一個腦力小游戲吧！

CSS粘性定位是怎樣工作的

一步步教你用HTML5 SVG實現動畫效果

程序員30歲前月薪達不到30K，該何去何從

14個最好的 JavaScript 數據可視化庫

8 個給前端的頂級 VS Code 擴展插件

Node.js 多線程完全指南

把HTML轉成PDF的4個方案及實現