雖說我們很多時候前端很少有機會接觸到算法。大多都交互性的操作，然而從各大公司面試來看，算法依舊是考察的一方面。實際上學習數(shù)據(jù)結構與算法對于工程師去理解和分析問題都是有幫助的。如果將來當我們面對較為復雜的問題，這些基礎知識的積累可以幫助我們更好的優(yōu)化解決思路。下面羅列在前端面試中經(jīng)常撞見的幾個問題吧。

Q1 判斷一個單詞是否是回文?

回文是指把相同的詞匯或句子，在下文中調換位置或顛倒過來，產(chǎn)生首尾回環(huán)的情趣，叫做回文，也叫回環(huán)。比如 mamam redivider .

很多人拿到這樣的題目非常容易想到用for 將字符串顛倒字母順序然后匹配就行了。其實重要的考察的就是對于reverse的實現(xiàn)。其實我們可以利用現(xiàn)成的函數(shù)，將字符串轉換成數(shù)組，這個思路很重要，我們可以擁有更多的自由度去進行字符串的一些操作。

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

Q2 去掉一組整型數(shù)組重復的值

比如輸入: [1,13,24,11,11,14,1,2]

輸出: [1,13,24,11,14,2]

需要去掉重復的11 和 1 這兩個元素。

這道問題出現(xiàn)在諸多的前端面試題中，主要考察個人對Object的使用，利用key來進行篩選。

/** 
* unique an array 
**/ 
let unique = function(arr) {   
  let hashTable = {}; 
  let data = []; 
  for(let i=0,l=arr.length;i<l;i++) { 
    if(!hashTable[arr[i]]) { 
      hashTable[arr[i]] = true; 
      data.push(arr[i]); 
    } 
  } 
  return data 
  
} 
  
module.exports = unique;  

Q3 統(tǒng)計一個字符串出現(xiàn)最多的字母

給出一段英文連續(xù)的英文字符竄，找出重復出現(xiàn)次數(shù)最多的字母

輸入 ： afjghdfraaaasdenas

輸出 ： a

前面出現(xiàn)過去重的算法，這里需要是統(tǒng)計重復次數(shù)。

function findMaxDuplicateChar(str) {   
  if(str.length == 1) { 
    return str; 
  } 
  let charObj = {}; 
  for(let i=0;i<str.length;i++) { 
    if(!charObj[str.charAt(i)]) { 
      charObj[str.charAt(i)] = 1; 
    }else{ 
      charObj[str.charAt(i)] += 1; 
    } 
  } 
  let maxChar = '', 
      maxValue = 1; 
  for(var k in charObj) { 
    if(charObj[k] >= maxValue) { 
      maxChar = k; 
      maxValue = charObj[k]; 
    } 
  } 
  return maxChar; 
  
} 
  
module.exports = findMaxDuplicateChar;  

Q4 排序算法

如果抽到算法題目的話，應該大多都是比較開放的題目，不限定算法的實現(xiàn)，但是一定要求掌握其中的幾種，所以冒泡排序，這種較為基礎并且便于理解記憶的算法一定需要熟記于心。冒泡排序算法就是依次比較大小，小的的大的進行位置上的交換。

function bubbleSort(arr) {   
    for(let i = 0,l=arr.length;i<l-1;i++) { 
        for(let j = i+1;j<l;j++) { 
          if(arr[i]>arr[j]) { 
                let tem = arr[i]; 
                arr[i] = arr[j]; 
                arr[j] = tem; 
            } 
        } 
    } 
    return arr; 
} 
module.exports = bubbleSort;  

除了冒泡排序外，其實還有很多諸如 插入排序,快速排序，希爾排序等。每一種排序算法都有各自的特點。全部掌握也不需要，但是心底一定要熟悉幾種算法。 比如快速排序，其效率很高，而其基本原理如圖(來自wiki)： 

算法參考某個元素值，將小于它的值，放到左數(shù)組中，大于它的值的元素就放到右數(shù)組中，然后遞歸進行上一次左右數(shù)組的操作，返回合并的數(shù)組就是已經(jīng)排好順序的數(shù)組了。

function quickSort(arr) { 
  
    if(arr.length<=1) { 
        return arr; 
    } 
  
    let leftArr = []; 
    let rightArr = []; 
    let q = arr[0]; 
    for(let i = 1,l=arr.length; i<l; i++) { 
        if(arr[i]>q) { 
            rightArr.push(arr[i]); 
        }else{ 
            leftArr.push(arr[i]); 
        } 
    } 
  
    return [].concat(quickSort(leftArr),[q],quickSort(rightArr)); 
} 
  
module.exports = quickSort;  

安利大家一個學習的地址，通過動畫演示算法的實現(xiàn)。

HTML5 Canvas Demo: Sorting Algorithms(http://math.hws.edu/eck/jsdemo/sortlab.html)

Q5 不借助臨時變量，進行兩個整數(shù)的交換

輸入 a = 2, b = 4 輸出 a = 4, b =2

這種問題非常巧妙，需要大家跳出慣有的思維，利用 a , b進行置換。

主要是利用 + – 去進行運算，類似 a = a + ( b – a) 實際上等同于*** 的 a = b;

function swap(a , b) {   
  b = b - a; 
  a = a + b; 
  b = a - b; 
  return [a,b]; 
} 
  
module.exports = swap;  

Q6 使用canvas 繪制一個有限度的斐波那契數(shù)列的曲線?

數(shù)列長度限定在9.

斐波那契數(shù)列，又稱黃金分割數(shù)列，指的是這樣一個數(shù)列：0、1、1、2、3、5、8、13、21、34、……在數(shù)學上，斐波納契數(shù)列主要考察遞歸的調用。我們一般都知道定義

fibo[i] = fibo[i-1]+fibo[i-2]; 

生成斐波那契數(shù)組的方法

function getFibonacci(n) {   
  var fibarr = []; 
  var i = 0; 
  while(i<n) { 
    if(i<=1) { 
      fibarr.push(i); 
    }else{ 
      fibarr.push(fibarr[i-1] + fibarr[i-2]) 
    } 
    i++; 
  } 
  
  return fibarr; 
}  

剩余的工作就是利用canvas arc方法進行曲線繪制了

DEMO(http://codepen.io/Jack_Pu/pen/LRaxZB)

Q7 找出下列正數(shù)組的***差值比如:

輸入 [10,5,11,7,8,9]

輸出 6

這是通過一道題目去測試對于基本的數(shù)組的***值的查找，很明顯我們知道，***差值肯定是一個數(shù)組中***值與最小值的差。

function getMaxProfit(arr) { 
  
    var minPrice = arr[0]; 
    var maxProfit = 0; 
  
    for (var i = 0; i < arr.length; i++) { 
        var currentPrice = arr[i]; 
  
        minPrice = Math.min(minPrice, currentPrice); 
  
        var potentialProfit = currentPrice - minPrice; 
  
        maxProfit = Math.max(maxProfit, potentialProfit); 
    } 
  
    return maxProfit; 
}  

Q8 隨機生成指定長度的字符串

實現(xiàn)一個算法，隨機生成指制定長度的字符竄。

比如給定 長度 8 輸出 4ldkfg9j

function randomString(n) {   
  let str = 'abcdefghijklmnopqrstuvwxyz9876543210'; 
  let tmp = '', 
      i = 0, 
      l = str.length; 
  for (i = 0; i < n; i++) { 
    tmp += str.charAt(Math.floor(Math.random() * l)); 
  } 
  return tmp; 
} 
  
module.exports = randomString;  

Q9 實現(xiàn)類似getElementsByClassName 的功能

自己實現(xiàn)一個函數(shù)，查找某個DOM節(jié)點下面的包含某個class的所有DOM節(jié)點?不允許使用原生提供的 getElementsByClassName querySelectorAll 等原生提供DOM查找函數(shù)。

function queryClassName(node, name) {   
  var starts = '(^|[ \n\r\t\f])', 
       ends = '([ \n\r\t\f]|$)'; 
  var array = [], 
        regex = new RegExp(starts + name + ends), 
        elements = node.getElementsByTagName("*"), 
        length = elements.length, 
        i = 0, 
        element; 
  
    while (i < length) { 
        element = elements[i]; 
        if (regex.test(element.className)) { 
            array.push(element); 
        } 
  
        i += 1; 
    } 
  
    return array; 
}  

Q10 使用JS 實現(xiàn)二叉查找樹(Binary Search Tree)

一般叫全部寫完的概率比較少，但是重點考察你對它的理解和一些基本特點的實現(xiàn)。 二叉查找樹，也稱二叉搜索樹、有序二叉樹(英語：ordered binary tree)是指一棵空樹或者具有下列性質的二叉樹：

• 任意節(jié)點的左子樹不空，則左子樹上所有結點的值均小于它的根結點的值;
• 任意節(jié)點的右子樹不空，則右子樹上所有結點的值均大于它的根結點的值;
• 任意節(jié)點的左、右子樹也分別為二叉查找樹;
• 沒有鍵值相等的節(jié)點。二叉查找樹相比于其他數(shù)據(jù)結構的優(yōu)勢在于查找、插入的時間復雜度較低。為O(log n)。二叉查找樹是基礎性數(shù)據(jù)結構，用于構建更為抽象的數(shù)據(jù)結構，如集合、multiset、關聯(lián)數(shù)組等。

在寫的時候需要足夠理解二叉搜素樹的特點，需要先設定好每個節(jié)點的數(shù)據(jù)結構

class Node {   
  constructor(data, left, right) { 
    this.data = data; 
    this.left = left; 
    this.right = right; 
  } 
}  

樹是有節(jié)點構成，由根節(jié)點逐漸延生到各個子節(jié)點，因此它具備基本的結構就是具備一個根節(jié)點，具備添加，查找和刪除節(jié)點的方法.

class BinarySearchTree { 
  
  constructor() { 
    this.root = null; 
  } 
  
  insert(data) { 
    let n = new Node(data, null, null); 
    if (!this.root) { 
      return this.root = n; 
    } 
    let currentNode = this.root; 
    let parent = null; 
    while (1) { 
      parent = currentNode; 
      if (data < currentNode.data) { 
        currentNode = currentNode.left; 
        if (currentNode === null) { 
          parent.left = n; 
          break; 
        } 
      } else { 
        currentNode = currentNode.right; 
        if (currentNode === null) { 
          parent.right = n; 
          break; 
        } 
      } 
    } 
  } 
  
  remove(data) { 
    this.root = this.removeNode(this.root, data) 
  } 
  
  removeNode(node, data) { 
    if (node == null) { 
      return null; 
    } 
  
    if (data == node.data) { 
      // no children node 
      if (node.left == null && node.right == null) { 
        return null; 
      } 
      if (node.left == null) { 
        return node.right; 
      } 
      if (node.right == null) { 
        return node.left; 
      } 
  
      let getSmallest = function(node) { 
        if(node.left === null && node.right == null) { 
          return node; 
        } 
        if(node.left != null) { 
          return node.left; 
        } 
        if(node.right !== null) { 
          return getSmallest(node.right); 
        } 
  
      } 
      let temNode = getSmallest(node.right); 
      node.data = temNode.data; 
      node.right = this.removeNode(temNode.right,temNode.data); 
      return node; 
  
    } else if (data < node.data) { 
      node.left = this.removeNode(node.left,data); 
      return node; 
    } else { 
      node.right = this.removeNode(node.right,data); 
      return node; 
    } 
  } 
  
  find(data) { 
    var current = this.root; 
    while (current != null) { 
      if (data == current.data) { 
        break; 
      } 
      if (data < current.data) { 
        current = current.left; 
      } else { 
        current = current.right 
      } 
    } 
    return current.data; 
  } 
  
} 
  
module.exports = BinarySearchTree;  

完整代碼 Github(https://github.com/JackPu/JavaScript-Algorithm-Learning)

擴展閱讀

https://www.interviewcake.com/question/javascript/rectangular-love

http://stackoverflow.com/questions/21853967/get-elements-by-class-a-or-b-in-javascript

http://codepen.io/Jack_Pu/pen/EgrXBp

http://javascript-html5-tutorial.com/algorithms-and-data-structures-in-javascript.html