雖說我們很多時候前端很少有機會接觸到演算法。大多都互動性的操作，然而從各大公司面試來看，演算法依舊是考察的一方面。實際上學習資料結構與演算法對於工程師去理解和分析問題都是有幫助的。如果將來當我們面對較為複雜的問題，這些基礎知識的積累可以幫助我們更好的優化解決思路。下面羅列在前端面試中經常撞見的幾個問題吧。
Q1 判斷一個單詞是否是迴文？
迴文是指把相同的詞彙或句子，在下文中調換位置或顛倒過來，產生首尾迴環的情趣，叫做迴文，也叫回環。比如 mamam redivider .
很多人拿到這樣的題目非常容易想到用for 將字串顛倒字母順序然後匹配就行了。其實重要的考察的就是對於reverse的實現。其實我們可以利用現成的函式，將字串轉換成陣列，這個思路很重要，我們可以擁有更多的自由度去進行字串的一些操作。
|
1 2 3 |
function checkPalindrom(str) { return str == str.split('').reverse().join(''); } |
Q2 去掉一組整型陣列重複的值
|
1 2 3 |
比如輸入: [1,13,24,11,11,14,1,2] 輸出: [1,13,24,11,14,2] 需要去掉重複的11 和 1 這兩個元素。 |
這道問題出現在諸多的前端面試題中，主要考察個人對Object的使用，利用key來進行篩選。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/** * 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 統計一個字串出現最多的字母
給出一段英文連續的英文字元竄，找出重複出現次數最多的字母
|
1 2 3 |
輸入 ： afjghdfraaaasdenas 輸出 ： a |
前面出現過去重的演算法，這裡需要是統計重複次數。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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 排序演算法
如果抽到演算法題目的話，應該大多都是比較開放的題目，不限定演算法的實現，但是一定要求掌握其中的幾種，所以氣泡排序，這種較為基礎並且便於理解記憶的演算法一定需要熟記於心。氣泡排序演算法就是依次比較大小，小的的大的進行位置上的交換。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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)：
演算法參考某個元素值，將小於它的值，放到左陣列中，大於它的值的元素就放到右陣列中，然後遞迴進行上一次左右陣列的操作，返回合併的陣列就是已經排好順序的陣列了。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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; |
安利大家一個學習的地址，通過動畫演示演算法的實現。
HTML5 Canvas Demo: Sorting Algorithms
Q5 不借助臨時變數，進行兩個整數的交換
|
1 |
輸入 a = 2, b = 4 輸出 a = 4, b =2 |
這種問題非常巧妙，需要大家跳出慣有的思維，利用 a , b進行置換。
主要是利用 + – 去進行運算，類似 a = a + ( b – a) 實際上等同於最後 的 a = b;
|
1 2 3 4 5 6 7 8 |
function swap(a , b) { b = b - a; a = a + b; b = a - b; return [a,b]; } module.exports = swap; |
Q6 使用canvas 繪製一個有限度的斐波那契數列的曲線？
數列長度限定在9.
斐波那契數列，又稱黃金分割數列，指的是這樣一個數列：0、1、1、2、3、5、8、13、21、34、……在數學上，斐波納契數列主要考察遞迴的呼叫。我們一般都知道定義
|
1 |
fibo[i] = fibo[i-1]+fibo[i-2]; |
生成斐波那契陣列的方法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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方法進行曲線繪製了
Q7 找出下列正陣列的最大差值比如:
|
1 2 3 |
輸入 [10,5,11,7,8,9] 輸出 6 |
這是通過一道題目去測試對於基本的陣列的最大值的查詢，很明顯我們知道，最大差值肯定是一個陣列中最大值與最小值的差。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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 隨機生成指定長度的字串
實現一個演算法，隨機生成指制定長度的字元竄。
|
1 |
比如給定 長度 8 輸出 4ldkfg9j |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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 實現類似getElementsByClassName 的功能
自己實現一個函式，查詢某個DOM節點下面的包含某個class的所有DOM節點？不允許使用原生提供的 getElementsByClassName querySelectorAll 等原生提供DOM查詢函式。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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 實現二叉查詢樹(Binary Search Tree)
一般叫全部寫完的概率比較少，但是重點考察你對它的理解和一些基本特點的實現。 二叉查詢樹，也稱二叉搜尋樹、有序二叉樹（英語：ordered binary tree）是指一棵空樹或者具有下列性質的二叉樹：
- 任意節點的左子樹不空，則左子樹上所有結點的值均小於它的根結點的值；
- 任意節點的右子樹不空，則右子樹上所有結點的值均大於它的根結點的值；
- 任意節點的左、右子樹也分別為二叉查詢樹；
- 沒有鍵值相等的節點。二叉查詢樹相比於其他資料結構的優勢在於查詢、插入的時間複雜度較低。為O(log n)。二叉查詢樹是基礎性資料結構，用於構建更為抽象的資料結構，如集合、multiset、關聯陣列等。
在寫的時候需要足夠理解二叉搜素樹的特點，需要先設定好每個節點的資料結構
|
1 2 3 4 5 6 7 8 |
class Node { constructor(data, left, right) { this.data = data; this.left = left; this.right = right; } } |
樹是有節點構成，由根節點逐漸延生到各個子節點，因此它具備基本的結構就是具備一個根節點，具備新增，查詢和刪除節點的方法.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
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; |
擴充套件閱讀
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