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

---

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

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

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

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

---

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

比如輸入: [1,13,24,11,11,14,1,2] 輸出: [1,13,24,11,14,2] 需要去掉重復(fù)的11 和 1 這兩個元素。

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

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}

---

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

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

輸入 ： afjghdfraaaasdenas 輸出 ： a

前面出現(xiàn)過去重的算法，這里需要是統(tǒng)計重復(fù)次數(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;}

---

Q4 排序算法

如果抽到算法題目的話，應(yīng)該大多都是比較開放的題目，不限定算法的實(shí)現(xiàn)，但是一定要求掌握其中的幾種，所以冒泡排序，這種較為基礎(chǔ)并且便于理解記憶的算法一定需要熟記于心。冒泡排序算法就是依次比較大小，小的的大的進(jì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; }

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

算法參考某個元素值，將小于它的值，放到左數(shù)組中，大于它的值的元素就放到右數(shù)組中，然后遞歸進(jìn)行上一次左右數(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)); }

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

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

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

主要是利用 + - 去進(jìn)行運(yùn)算，類似 a = a + ( b - a) 實(shí)際上等同于最后 的 a = b;

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

---

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

斐波那契數(shù)列，又稱黃金分割數(shù)列，指的是這樣一個數(shù)列：0、1、1、2、3、5、8、13、21、34、……在數(shù)學(xué)上，斐波納契數(shù)列主要考察遞歸的調(diào)用。

我們一般都知道定義

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; }

---

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 隨機(jī)生成指定長度的字符串

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

比如給定 長度 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; }

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

自己實(shí)現(xiàn)一個函數(shù)，查找某個DOM節(jié)點(diǎn)下面的包含某個class的所有DOM節(jié)點(diǎn)？不允許使用原生提供的 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 實(shí)現(xiàn)二叉查找樹(Binary Search Tree)

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

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

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

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

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

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 nodeif (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;}}

總結(jié)

以上是生活随笔為你收集整理的前端面试中常见的算法问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。