怎樣使你的 JavaScript 程式碼簡單易讀

瘋狂的技術宅發表於2019-04-08
JavaScript

翻譯：瘋狂的技術宅

medium.freecodecamp.org/how-to-keep…

img

解決一個問題可以有很多方法，但是有些方法很複雜，甚至有些是荒謬的。在本文中，我想談談解決一個問題時的好方案和壞方案。

#1

讓我們先從怎樣刪除陣列中的重複項這個簡單問題開始。

複雜 - 使用 forEach 刪除重複項

首先，我們新建立一個空陣列，用 forEach() 在陣列的每個元素上執行一次提供的函式。最後檢查新陣列中是否存在該值，如果不存在，則新增它。

function removeDuplicates(arr) {  
   const uniqueVals = [];   
   arr.forEach((value,index) => {     
       if(uniqueVals.indexOf(value) === -1) {
           uniqueVals.push(value);
       }  
   });
  return uniqueVals;
}
複製程式碼

簡單 - 使用 filter 刪除重複項

用 filter 方法建立一個包含所有元素的新陣列，通過提供的函式進行測試。基本上我們只需要迭代陣列，並檢查當前元素在陣列中出現的第一個位置是否和當前位置相同。當然，這兩個位置對於重複元素來說是不同的。

function removeDuplicates(arr) {
  return arr.filter((item, pos) => arr.indexOf(item) === pos)
}
複製程式碼

簡單 - 使用 Set 刪除重複項

ES6 提供了 **Set ** 物件，這使事情變得更加容易。 Set 僅允許存在唯一值，所以當你傳入陣列時，它會自動刪除重複的值。 但是，如果你需要一個包含唯一元素的陣列，為什麼不一開始就用 Set 呢？

function removeDuplicates(arr) {
   return [...new Set(arr)];
}
複製程式碼

#2

接下來讓我們解決第二個問題：寫一個函式，向該函式傳入一組非負整數，其中的值各不不同，要求使它們連續，並返回缺失的數字個數。

對於const arr = [4,2,6,8]，輸出應為

countMissingNumbers（arr）= 3

你可以看到 3，5 和 7 是缺失的。

複雜 - 使用 sort 和 for 迴圈解決

要獲得最小和最大的數字，我們需要用用 sort方法按升序進行排序來達到這個目的，然後從最小的數字迴圈到最大的數字。每次檢查陣列中是否存在應該出現的序號，如果不存在，就對計數器加一。

function countMissingNumbers(arr) {
    arr.sort((a,b) => a-b);    
    let count = 0;    
    const min = arr[0];    
    const max = arr[arr.length-1];
    for (i = min; i<max; i++) {
      if (arr.indexOf(i) === -1) {
          count++;         
      }      
    }        
    return count;
}
複製程式碼

簡單 - 使用 Math.max 和 Math.min 求解

這個解決方案有一個簡單的解釋：Math.max()函式返回陣列中最大的數字，而Math.min() 返回陣列中最小的數字。

首先，如果沒有丟失數字，我們能知道陣列中有多少個數字。所以可以用以下公式 maxNumber - minNuber + 1，並用這個結果減去陣列長度，得到的差就是缺失數字的個數。

function countMissingNumbers(arr) {
      return Math.max(...arr) - Math.min(...arr) + 1 - arr.length;
}
複製程式碼

#3

最後一個問題是檢查字串是否為迴文。所謂 迴文 是一個從左到右和從右到左讀起來都一樣的字串。

複雜 - 使用 for 迴圈檢查

這個方法的迴圈從字串的第一個字元開始，一直到字串長度的一半。字串中最後一個字元的索引是 string.length-1，倒數第二個字元的索引是string.length-2，依此類推。所以在這裡我們檢查從左邊開始的指定索引處的字元是否等於右邊指定索引處的字元。如果它們不相等，就返回false。

function checkPalindrome(inputString) { 
   let length = inputString.length
   for (let i =0; i<length / 2; i++) {
        if (inputString[i] !== inputString[length - 1 -i]) {
             return false        
        }
   }
  return true
}
複製程式碼

簡單 - 用 reverse 和 join 檢查

我認為這個解決方案簡單到不需要解釋，因為程式碼本身說明了一切。我們只需使用 spread operator 從字串建立一個陣列，然後reverse陣列，最後用 join 方法將其再次轉換為字串，並與原始字串進行比較。

function checkPalindrome(string) {
   return string === [...string].reverse().join('');
}
複製程式碼

保持簡單！

當有更簡單的方法時，為什麼要搞得那麼複雜？希望你能從這篇文章中學到一些很有意思的思路。祝你有一個美好的編碼時間，儘量不要讓生活中簡單的事情複雜化。

歡迎關注公眾號：前端先鋒，獲取更多前端乾貨。

怎樣使你的 JavaScript 程式碼簡單易讀

相關文章