JavaScript算法題：查找數字在數組中的索引

翻譯：瘋狂的技術宅
原文： 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.

解決方案＃1：.sort()，. indexOf()

PEDAC

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

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

數據結構：因爲咱們最終將會返回索引，所以應該堅持使用數組。

咱們將會用一個名爲 .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]

算法：

1. 將num 插入 arr。
2. 將 arr 進行升序排序。
3. 返回 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);

解決方案＃2：.sort()，.findIndex()

PEDAC

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

這個解決方案須要考慮兩個邊界狀況：

1. 若是輸入數組爲空，則咱們須要返回 0，由於 num 將是該數組中的惟一元素，因此它在索引爲 0 的位置。
2. 若是 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 中的每一個數字進行比較，並找出它從最小到最大的順序。

算法：

1. 若是 arr 是一個空數組，則返回 0。
2. 若是 num 處於排序後數組的末尾，則返回 arr 的長度。
3. 不然，返回索引 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個方案及實現