日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 前端技术 > HTML >内容正文

HTML

WEB前端必须掌握的一些算法题

發布時間:2023/12/31 HTML 27 豆豆
生活随笔 收集整理的這篇文章主要介紹了 WEB前端必须掌握的一些算法题 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

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

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

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

Q2 去掉一組整型數組重復的值

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

這道問題出現在諸多的前端面試題中,主要考察個人對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 統計一個字符串出現最多的字母

給出一段英文連續的英文字符竄,找出重復出現次數最多的字母

輸入 : afjghdfraaaasdenas 輸出 : a

前面出現過去重的算法,這里需要是統計重復次數。

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 排序算法

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

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):

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

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 不借助臨時變量,進行兩個整數的交換

輸入 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 繪制一個有限度的斐波那契數列的曲線?

數列長度限定在9.

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

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

生成斐波那契數組的方法

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

Q7 找出下列正數組的最大差值比如:

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

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

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

實現一個算法,隨機生成指制定長度的字符竄。

比如給定 長度 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 實現類似getElementsByClassName 的功能

自己實現一個函數,查找某個DOM節點下面的包含某個class的所有DOM節點?不允許使用原生提供的 getElementsByClassName querySelectorAll 等原生提供DOM查找函數。

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、關聯數組等。

在寫的時候需要足夠理解二叉搜素樹的特點,需要先設定好每個節點的數據結構

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

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

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;










前言

javascript是一門非常靈活的語言,實際的開發過程中我們也可以靈活的使用它而給我們的工作帶來便利,這篇文章記錄了自己平時學習過程中經常用到的一些小技巧,整理出來作為筆記,也希望對感興趣的同學有所幫助。( 持續更新… )

1 獲取指定范圍內的隨機數

當我們需要獲取指定范圍(min,max)內的整數的時候,下面的代碼非常適合。

123function?getRadomNum(min,max){return?Math.floor(Math.random() * (max - min +?1)) + min;}

測試

2 隨機獲取數組中的元素

123function?getRadomFromArr(arr){return arr[Math.floor(Math.random()*arr.length)];}

測試

3 生成從0到指定值的數字數組

123var arr=[],length=100,i=1;for(;arr.push(i++)<length;){}console.log(arr)

測試

4 打亂數字數組的順序

12var arr = [1,2,3,4,5,6,7,'a','dsfs',8,9,'v'];arr.sort(function(){return?Math.random()-0.5});

測試

5 對象轉換為數組

1234567891011//注意對象必須是以下格式的才可以通過此方式轉化為數組//獲取的DOM集合,以及函數的arguments也可以通過此方式轉化為數組var obj={0:'qian',1:'long',2:'chu',3:'tian',length:4}var _slice=[].slice;var objArr=_slice.call(obj);

測試

6 驗證是否為數組

123function?isArray(obj){return?Object.prototype.toString.call(obj) ===?'[object Array]' ;}

測試

7 獲取數組中最大或者最小值

123456function?maxAndMin(arr){return {max:Math.max.apply(null,arr.join(',').split(',')),min:Math.min.apply(null,arr.join(',').split(','))}}

該方法適合一維或者多維數組求最大最小值的情況

測試

8 清空數組

1234567891011//方式一 通過將長度設置為0var arr=[1,2,3,4,5];arr.length=0;//方式二 通過splice方法var arr=[1,2,3,4,5];arr.splice(0,arr.length);//方式三 通過將空數組 [] 賦值給數組(嚴格意義來說這只是將ary重新賦值為空數組,之前的數組如果沒有引用在指向它將等待垃圾回收。)var arr=[1,2,3,4,5];arr=[];

9 保留指定小數位

12var num =4.345678;num = num.toFixed(4);?// 4.3457 第四位小數位以四舍五入計算

10 不要直接使用delete來刪除數組中的元素

數組在js中也是對象,有時候我們可能會通過delete來刪除數組中的元素,但是其實僅僅是將數組的元素的值賦值為了undefined。

123var arr=[1,2,3,4,5,'謙龍','雛田'];delete arr[5];console.log(arr,arr[5],arr.length);

?

測試

可以通過splice來刪除數組中的某一項

123var arr=[1,2,3,4,5,'謙龍','雛田'];arr.splice(5,1);console.log(arr,arr[5],arr.length);

?

測試

11 生成指定長度的隨機字母數字字符串

12345function?getRandomStr(len) {var str =?"";for( ; str.length < len; str +=?Math.random().toString(36).substr(2));return str.substr(0, len);}

測試

12 null 與 undefined

null == undefined,null == null 返回true,有時候我們為了排除null 和 undefined可以使用如下的代碼

12345function?test(obj){if(obj!=null){// obj除了undefined 和 null 之外都會走這里....這里寫代碼邏輯}}

13 找出數組中出現次數最的元素,并給出其出現過的位置

12345678910111213141516171819202122232425function?getMaxAndIndex(?arr ){var obj = {};arr.forEach(function(item,index){if(!obj[item]){obj[item]= {indexs: [index]}}else{obj[item]['indexs'].push(index);}});var num=0;//記錄出現次數最大值var str='';//記錄出現次數最多的字符var reArr;//返回最大值的位置數組for(var attr?in obj){var temp=obj[attr]['indexs'];if(temp.length>num){num=temp.length;str=attr;reArr=temp;}}return {maxStr:str,indexs:reArr}}

測試結果

總結

以上是生活随笔為你收集整理的WEB前端必须掌握的一些算法题的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。