FreeCodeCamp( FCC)前端工程師 基礎算法練習 分析與解答

FreeCodeCamp 前端工程師 基礎算法練習 全解 詳解

本人屬於很水的前端程序員中的一員，若文中有誤，敬請指正！ 爲了提高本身，同時看到基礎的還能應付，故而試之分享之！本文純屬於原創，轉載請聯繫 wusuai1995@qq.com！

 

// 第一章 反轉字符串

實現思路

先將字符串切分紅數組 String.prototype.split('') 這裏括號中的 '' 必要 不然切分無效  相似的用法還有 String.prototype.join('')

而後將該數組 Array.prototype.reverse() 返回翻轉後的數組 

而後 Array.prototype.join('') 從新拼接數組並返回修改後的新的字符串

function reverseString(str) {
  return str.split('').reverse().join('');
}

reverseString("hello");

 

//第二章 判斷是否迴文字符串

實現思路: 階乘 !n 

遞歸調用自身直到 num === 0 再閉包往上返回每一層的結果

在 debugger 模式下(上帝視角)  咱們能夠清晰看到函數執行過程  JavaScript 解析器開始執行函數 在 call stack 中 壓入當前 factorialize  函數及其 local scope 數據

直到 num === 0 時 函數開始 retrun value 層層返回 並在調用函數完成以後從 call stack 中清除當前調用函數 並返回上次調用反正結果給當前 棧頂的 factorialize 使用

function factorialize(num) {
  // 在非嚴格模式下可使用 arguments.callee 調用自身 
  // TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
　// return num === 0 ? 1 : arguments.callee(num-1) * num;
　debugger;  //（博主的 debugger 由於 freeCodeCamp 的 setTimeOut 進入了無限循環！！！ WTF!）
  return num === 0 ? 1 : factorialize(num - 1) * num;
}

factorialize(5);  //120

 
// 第三章 檢查字符串是不是迴文字符串

實現思路：

先處理原字符串 去掉非字符以外的內容 String.prototype.replace()

而後講字符串所有轉換成小寫字符方便比較 String.prototype.toLowerCase()

在用變量 str1 來緩存翻轉以後的字符串 思路與第一章一致 

最後在 return str === str1 便可

function palindrome(str) {
  str = str.replace(/[^a-zA-Z0-9]/g, '').toLowerCase();
  var str1 = str.split('').reverse().join('');
  return str === str1;
}

palindrome("eye");

 

// 第四章 找到句子中最長的字符串

實現思路:

先將函數參數 str 根據 /\s/ 切分紅數組 strArr

聲明一個哨兵變量 strLen = 0 

再使用 Array.prototype.forEach() 判斷當前 item 的長度是否大於變量 strLen 若是大於 strLen 則對 strLen 從新賦值

最後在 forEach 循環完成以後 return strLen

function findLongestWord(str) {
  var strArr = str.split(/\s/);
  var strLen = 0;
  strArr.forEach(function(item){
    if (item.length > strLen) {
      strLen = item.length;
    }
  });
  return strLen;
}

findLongestWord("The quick brown fox jumped over the lazy dog");

 

// 第五章 將句中每一個單詞首字母大寫

實現思路: 其實這個在不少支持組件 (component) 的庫中都有實現 好比：vue angualr react 錯了 汗  他們實現的是 屬性駝峯 和 a-b-c 此類組件名轉駝峯

通上一章 第一步先將函數參數 str 根據 /\s/ 切分紅數組 strArr 隨後狀況參數 str = ''

而後遍歷 strArr 中每一項 item.substr(0, 1).toUpperCase() 將每一項的第一個字母取出來並大寫 String.prototype.substr() 再調用 String.prototype.toUpperCase()

而後將每一項 字符串中除去第一個後 的字符並所有轉成小寫  item.slice(1).toLowerCase() String.prototype.slice()

若是當前項的索引不等於最後一項則 str += item + ' ' 不然 str += item

function titleCase(str) {
  var strArr = str.split(/\s/);
  str = '';
  strArr.forEach(function(item, idx) {
　　// 這一步用這正則來實現應該更加舒心 有時間在去玩正則吧
    item = item.substr(0, 1).toUpperCase() + item.slice(1).toLowerCase();
    idx !== strArr.length -1 && (str += item + ' ') || (str += item);
  });
  return str;
}

titleCase("I'm a little tea pot");

 

// 第六章 返回傳入數組中的最大數字

實現思路: 思路與第四章基本一致

function largestOfFour(arr) {
  // 首先傳入的是一個二維數組
  // 其次比較傳入數組中每項數組的最大值而後push到新數組中
  // 返回新數組
  var maxArr = [];
  arr.forEach(function(arr) {
    // 局部變量或者稱之爲哨兵變量
    var maxNum = 0;
    arr.forEach(function(num){
      if (num > maxNum) {
        maxNum = num;
      }
    });
    // 內部arr forEach完成以後 maxNum 必定會是數組中最大值
    maxArr.push(maxNum);
  });
  // You can do this!
  return maxArr;
}

largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]);

 

// 第七章 檢查一個字符串(str)是否以指定的字符串(target)結尾。
實現思路: 在代碼中
實際上我認爲個人寫法有點複查 若是各位看官有更好更簡單明瞭的寫法還請留言。

function confirmEnding(str, target) {
  // 首先判斷 str 是句子仍是單詞
  // 咱們簡單根據 是否有 空格 來判斷
  var isSentence = /\s/.test(str);
  // 而後判斷 target 是字母仍是單詞
  // 咱們簡單根據 target.length 來判斷 若是 length > 1 則認爲是單詞
  var isWord = target.length !== 1;
  
  var strArr = [], lastChar = '';
  
  // 若是是句子 則 target 應該是個單詞
  // 不然判斷無效 或者 return null 或者 false
  // 若是 lastChar.length === targetLenth 咱們則直接判斷 lastChar===target
  // 不然 咱們截取 lastChar 指定的 target.length 再判斷
  if (isSentence && isWord) {
    strArr = str.split(/\s/);
    lastChar = strArr.slice(-1)[0];
    
    // 根據 target 長度來取 lastChar 的長度
    if (lastChar.length !== target.length) {
      lastChar = lastChar.slice(target.length);
    }
  } else {
    // lastChar = str.substr(str.length-1, str.length);
    lastChar = str.slice(str.length-1);
  }
  // "Never give up and good luck will find you."
  // -- Falcor
  
  return lastChar === target;
}

confirmEnding("Bastian", "n");

 

// 第八章 重複一個指定的字符串 num次，若是num是一個負數則返回一個空字符串。

function repeat(str, num) {
  var oldStr = str;
  str = '';
  // 確定須要循環當前的 num 
  if (num > 0) {
    for(var i=0; i<num; i++) {
      str += oldStr;
    }
  }
  // repeat after me
  return str;
}

repeat("abc", 3);

 

// 第八章 若是字符串的長度比指定的參數num長，則把多餘的部分用...來表示。

function truncate(str, num) {
  // Clear out that junk in your trunk
  // 首先判斷給出的 num 是否大於 3  
  // 其次判斷給出的 num 是否大於 str.length 若是大於則返回原str
  if (num > 3) {
    if (num >= str.length) {
      return str;
    }
    str = str.replace(str.slice(num - 3), '...');
  } else {
    str = str.replace(str.slice(num), '...');
  }
  return str;
}

truncate("A-tisket a-tasket A green and yellow basket", 11);

 

// 第九章 把一個數組arr按照指定的數組大小size分割成若干個數組塊。

function chunk(arr, size) {
  // 定義將返回的新數組
  var newArr = [];
  // 求出新數組 根據 arr.length / size 的長度
  // Math.ceil() 向上取整
  var newArrLen = size < arr.length ? Math.ceil(arr.length / size) : 0;
  
  // 判斷 newArrLen 是否有效
  if (newArrLen) {
    // 循環 Array.prototype.slice() 到新數組中
    for (var i=0; i<newArrLen; i++) {
      newArr.push(arr.slice(i * size, (i+1) * size));
    }
  } else {
    return arr;
  }
  // Break it up.
  return newArr;
}

chunk(["a", "b", "c", "d"], 2);

 

// 第九章 返回一個數組被截斷n個元素後還剩餘的元素，截斷從索引0開始。

function slasher(arr, howMany) {
  // it doesn't always pay to be first
  return arr.slice(howMany);
}

slasher([1, 2, 3], 2);

 

// 第十章 若是數組第一個字符串元素包含了第二個字符串元素的全部字符，函數返回true。

function mutation(arr) {
  // 由於測試中全部的結果都有兩項 
  // 因此不考慮 arr存在大於兩項的狀況
  // 首先咱們要分割 arr[0] 與 arr[1] 所有轉換成小寫 再使用 String.protottype.indexOf() 判斷
  // 假設 isSame 爲 true
  var str2Arr = arr[1].toLowerCase().split('');
  var isSame = true;
  // 遍歷數組 str2Arr 
  // 若是循環中檢測到 當前字段不存在則 isSame = false
  for (var i=0, l=str2Arr.length; i<l; i++) {
    var str = str2Arr[i];
    if (arr[0].toLowerCase().indexOf(str) < 0) {
      isSame = false;
      break;
    }
  }
  return isSame;
}

mutation(["hello", "hey"]);

 

// 第十一章 刪除數組中的全部假值

function bouncer(arr) {
  // Don't show a false ID to this bouncer.
  // 使用 Array.prototype.filter()  自動過濾掉 boolean(item) 爲假的值
  return arr.filter(function(item){
    return item;
  });
}

bouncer([7, "ate", "", false, 9]);

 

// 第十二章 實現一個摧毀(destroyer)函數，第一個參數是待摧毀的數組，其他的參數是待摧毀的值。

function destroyer(arr) {
  // 參數數組
  var args;
  // Remove all the values
  if (arguments.length > 1) {
    // Function.prototype.call() or Function.prototype.apply()
    args = Array.prototype.slice.call(arguments, 1, arguments.length);
  } else {
    return arr;
  }
  return arr.filter(function(item) {
    // 只有在args數組中的參數不存在arr中時才返回 Array.prototype.indexOf()
    // 這樣就過濾掉了那些待摧毀的值
    return args.indexOf(item) < 0;
  });
}

destroyer([1, 2, 3, 1, 2, 3], 2, 3);

 

// 第十三章 先給數組排序，而後找到指定的值在數組的位置，最後返回位置對應的索引。

function where(arr, num) {
  // Find my place in this sorted array.
  // 首先調用 Array.prototype.sort() 升序數組 傳入參數 compareFn
  // 而後循環數組 插入 num 返回當時的插入位置的索引 插入用 Array.prototype.splice()
  arr.sort(function(a, b){
    return a>b ? 1 : -1;
  });
  
  for (var i=0,l=arr.length; i<l; i++) {
    var previous = i !== 0 ? arr[i-1] : 0;
    var current = arr[i];
    // 若是 num 大於 上一個值 小於 當前值
    // 則就在該 i-1 處插入 num
    // 若是相等 就在 相等的值後面插入 num
    // 若是 num 一直大於數組中的每一項 那麼 num 就應該數組的最後一項插入
    if (((num > previous && num < current) || num === current) || (i === l-1 && num > current)) {
      if (i === l-1 && num > current) {
        arr.splice(l, 0, num);
        num = l;
      } else {
        arr.splice(i, 0, num);
        num = i;
      }
      break;
    }
    
  }
  return num;
}

where([40, 60], 50);

 

寫到這裏真的很累了，不寫了。留下一題？no！ 那仍是作了吧！

 

// 第十四章  密碼中的字母會按照指定的數量來作移位。

// 這個趕時間 回去弄 下吃飯  身體重要 朋友！

 

function rot13(str) { // LBH QVQ VG!
  // 僅僅顯示出來方便查看
  var wordsArr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  
  // 首先將字符串切分紅數組
  var strArr = str.toUpperCase().split(''), offsetNum = 13;
  str = '';
  
  // 參與計算的字符串應該都是大寫 String.prototype.toUpperCase()
  // 因此正確的 charCode  A.charCodeAt("") <= str.charCodeAt(0) <= "Z".charCodeAt(0) - 13
  var maxCharCode = 'Z'.charCodeAt(0) - offsetNum, charCode = null, offsetCharCode = null;
  
  for (var i = 0, l = strArr.length; i<l; i++) {
    //  若是是 英語字符 則執行 轉換操做
    if (/[a-zA-Z]/.test(strArr[i])) {
      // 獲得當前項的 charCode
      charCode = strArr[i].charCodeAt(0);
      // 若是當前的 charCode > maxCharCode 則將算法改成 減去位移數字 不然仍是照常加上 位移數字
      offsetCharCode = charCode > maxCharCode ? charCode - offsetNum  : charCode + offsetNum;
      // 獲得當前字符 偏移 13 位的 字符編碼後 在調用 String.fromCharCode() 方法返回對應字符串
      strArr[i] = String.fromCharCode(offsetCharCode);
    }
  }
  
  // Array.prototype.join() 獲得修改後的字符串再返回
  str = strArr.join('');

  return str;
}

// Change the inputs below to test
rot13("SERR PBQR PNZC");

剛開始寫很細心，很用心。寫到後面時間越花越多，有點顧此失彼。故只顯示代碼，不口水話什麼思路了。

 

總結

1. 這些真的很基礎，基礎到只要熟悉API就好！

2. 固然，因爲是 JavaScript 的緣故，多多少少會有點小坑在！(畢竟我是菜鳥)

3.上面全部答案純屬我的看法，若是你有更好的解法，歡迎留言共同探討！

4. 博客純屬我的原創，轉載請聯繫本人！ wusuai1995@qq.com!