當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

刷算法题常用的 JS 基础扫盲

發布時間：2023/12/20 javascript 23 豆豆

生活随笔收集整理的這篇文章主要介紹了刷算法题常用的 JS 基础扫盲小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

大廠技術??高級前端??Node進階

點擊上方?程序員成長指北，關注公眾號

回復1，加入高級Node交流群

介紹

此篇屬于前端算法入門系列的第一篇，主要介紹常用的數組方法、字符串方法、遍歷方法、高階函數、正則表達式以及相關數學知識。

前端算法入門一：刷算法題常用的JS基礎掃盲^[1]
前端算法入門二：時間空間復雜度\&8大數據結構的JS實現^[2]
前端算法入門三：5大排序算法\&2大搜索\&4大算法思想^[3]
前端面試算法高頻100題（附答案，分析思路，一題多解）^[4]

文章主要包含以下內容：

數組常用方法
字符串常用方法
常用遍歷方法&高階函數
常用正則表達式
數學知識

一、數組常用方法

1.push()

在尾部追加，類似于壓棧，原數組會變。

const?arr?=?[1,?2,?3] arr.push(8) console.log(arr)?//?[1,?2,?3,?8] 復制代碼

2.pop()

在尾部彈出，類似于出棧，原數組會變。數組的 push & pop 可以模擬常見數據結構之一：棧。

const?arr?=?[1,?2,?3] const?popVal?=?arr.pop() console.log(popVal)?//?3 console.log(arr)?//?[1,?2]//?數組模擬常見數據結構之一：棧 const?stack?=?[0,?1] stack.push(2)?//?壓棧 console.log(stack)?//?[0,?1,?2]const?popValue?=?stack.pop()?//?出棧 console.log(popValue)?//?2 console.log(stack)?//?[0,?1] 復制代碼

3.unshift()

在頭部壓入數據，類似于入隊，原數組會變。

const?arr?=?[1,?2,?3] arr.unshift(0) console.log(arr)?//?[0,?1,?2,?3] 復制代碼

4.shift()

在頭部彈出數據，原數組會變。數組的 push（入隊） & shift（出隊）可以模擬常見數據結構之一：隊列。

const?arr?=?[1,?2,?3] const?shiftVal?=?arr.shift() console.log(shiftVal)?//?1 console.log(arr)?//?[2,?3]//?數組模擬常見數據結構之一：隊列 const?queue?=?[0,?1] queue.push(2)?//?入隊 console.log(queue)?//?[0,?1,?2]const?shiftValue?=?queue.shift()?//?出隊 console.log(shiftValue)?//?0 console.log(queue)?//?[1,?2] 復制代碼

5.concat()

concat會在當前數組尾部拼接傳入的數組，然后返回一個新數組，原數組不變。

const?arr?=?[1,?2,?3] const?arr2?=?arr.concat([7,?8,?9]) console.log(arr)?//?[1,?2,?3] console.log(arr2)?//?[1,?2,?3,?7,?8,?9] 復制代碼

6.indexOf()

在數組中尋找該值，找到則返回其下標，找不到則返回-1。

const?arr?=?[1,?2,?3] console.log(arr.indexOf(2))?//?1 console.log(arr.indexOf(0))?//?-1 復制代碼

7.includes()

在數組中尋找該值，找到則返回true，找不到則返回false。

const?arr?=?[1,?2,?3] console.log(arr.includes(2))?//?true console.log(arr.includes(4))?//?false 復制代碼

8.join()

將數組轉化成字符串，并返回該字符串，不傳值則默認逗號隔開，原數組不變。

const?arr?=?[1,?2,?3] console.log(arr.join())?//?‘1,?2,?3’ console.log(arr)?//?[1,?2,?3] 復制代碼

9.reverse()

翻轉原數組，并返回已完成翻轉的數組，原數組改變。

const?arr?=?[1,?2,?3] console.log(arr.reverse())?//?[3,?2,?1] console.log(arr)?//?[3,?2,?1] 復制代碼

10.slice(start，end)

從start 開始截取到end，但是不包括end

const?arr?=?[1,?2,?3,?4,?5] console.log(arr.slice(1,?4))?//?[2,?3,?4] console.log(arr)?//?[1,?2,?3,?4,?5] 復制代碼

11.splice(start, deleteCount, item1, item2……)

start參數開始的位置
deleteCount要截取的個數
后面的items為要添加的元素
如果deleteCount為0，則表示不刪除元素，從start位置開始添加后面的幾個元素到原始的數組里面。
返回值為由被刪除的元素組成的一個數組。如果只刪除了一個元素，則返回只包含一個元素的數組。如果沒有刪除元素，則返回空數組。
這個方法會改變原始數組，數組的長度會發生變化

const?arr3?=?[1,?2,?3,?4,?5,?6,?7,?"f1",?"f2"]; const?arr4?=?arr3.splice(2,?3)?//?刪除第三個元素以后的三個數組元素(包含第三個元素) console.log(arr4);?//?[3,?4,?5]; console.log(arr3);?//?[1,?2,?6,?7,?"f1",?"f2"];?原始數組被改變const?arr5?=?arr3.splice(2,?0,?"wu",?"leon");? //?從第2位開始刪除0個元素，插入"wu","leon" console.log(arr5);?//?[]?返回空數組 console.log(arr3);?//?[1,?2,?"wu",?"leon",?6,?7,?"f1",?"f2"];?原始數組被改變const?arr6?=?arr3.splice(2,?3,?"xiao",?"long"); //?從第?2?位開始刪除?3?個元素，插入"xiao",?"long" console.log(arr6);?//?["wu",?"leon",?6] console.log(arr3);?//[?1,?2,?"xiao",?"long",?7,?"f1",?"f2"]const?arr7?=?arr3.splice(2);?//?從第三個元素開始刪除所有的元素 console.log(arr7);//?["xiao",?"long",?7,?"f1",?"f2"] console.log(arr3);?//?[1,?2] 復制代碼

12.sort()

對數組的元素進行排序，并返回數組。
默認排序順序是在將元素轉換為字符串，然后比較它們的UTF-16代碼單元值序列時構建的。
由于它取決于具體實現，因此無法保證排序的時間和空間復雜性。

可參考 MDN：Sort^[5]

const?arr?=?[1,?2,?3] arr.sort((a,?b)?=>?b?-?a) console.log(arr)?//?[3,?2,?1] 復制代碼

13.toString()

將數組轉化成字符串，并返回該字符串，逗號隔開，原數組不變。

const?arr?=?[1,?2,?3,?4,?5] console.log(arr.toString())?//?‘1,?2,?3,?4,?5’ console.log(arr)?//?[1,?2,?3,?4,?5] 復制代碼

二、字符串常用方法

1.charAt()

返回指定索引位置處的字符。類似于數組用中括號獲取相應下標位置的數據。

var?str?=?'abcdefg' console.log(str.charAt(2))?//?輸出?'c'? console.log(str[2])?//?輸出?'c' 復制代碼

2.concat()

類似數組的concat()，用來返回一個合并拼接兩個或兩個以上字符串。原字符串不變。

const?str1?=?'abcdefg' const?str2?=?'1234567' const?str3?=?str1.concat(str2) console.log(str3)?//?輸出?'abcdefg1234567' 復制代碼

3.indexOf()、lastIndexOf()

indexOf,返回一個字符在字符串中首次出現的位置,lastIndexOf返回一個字符在字符串中最后一次出現的位置。

const?str?=?'abcdcefcg' console.log(str.indexOf('c'))?//?輸出?'2' console.log(str.lastIndexOf('c'))?//?輸出?'7' 復制代碼

4.slice()

提取字符串的片斷，并把提取的字符串作為新的字符串返回出來。原字符串不變。

const?str?=?'abcdefg' console.log(str.slice())?//?輸出?'abcdefg',?不傳遞參數默認復制整個字符串 console.log(str.slice(1))?//?輸出?'bcdefg',傳遞一個，則為提取的起點，然后到字符串結尾 console.log(str.slice(2,?str.length-1))?//?輸出'cdef',傳遞兩個，為提取的起始點和結束點復制代碼

5.split()

使用指定的分隔符將一個字符串拆分為多個子字符串數組并返回，原字符串不變。

const?str?=?'A*B*C*D*E*F*G' console.log(str.split('*'))?//?輸出?["A",?"B",?"C",?"D",?"E",?"F",?"G"] 復制代碼

6.substr(), substring()

這兩個方法的功能都是截取一個字符串的片段，并返回截取的字符串。
substr和substring這兩個方法不同的地方就在于參數二，substr的參數二是截取返回出來的這個字符串指定的長度，substring的參數二是截取返回這個字符串的結束點，并且不包含這個結束點。而它們的參數一，都是一樣的功能，截取的起始位置。
注意事項：substr的參數二如果為0或者負數，則返回一個空字符串，如果未填入，則會截取到字符串的結尾去。substring的參數一和參數二為NAN或者負數，那么它將被替換為0。

const?str?=?'ABCDEFGHIJKLMN' console.log(str.substr(2))??//?輸出?'CDEFGHIJKLMN' console.log(str.substring(2))?//?輸出?'CDEFGHIJKLMN'console.log(str.substr(2,?9))??//?輸出?'CDEFGHIJK' console.log(str.substring(2,?9))??//?輸出?'CDEFGHI' 復制代碼

7.match()

match()方法可在字符串內檢索指定的值，或找到一個或多個正則表達式的匹配，并返回一個包含該搜索結果的數組。

const?str?=?'2018年結束了，2019年開始了，2020年就也不遠了' const?reg?=?/\d+/g??//?這里是定義匹配規則，匹配字符串里的1到多個數字 console.log(str.match(reg))??//?輸出符合匹配規則的內容，以數組形式返回?['2018',?'2019',?'2020'] console.log(str.match('20'))??//?不使用正則?["20",?index:?0,?input:?"2018年結束了，2019年開始了"] 復制代碼

注意事項:如果match方法沒有找到匹配，將返回null。如果找到匹配，則 match方法會把匹配到以數組形式返回，如果正則規則未設置全局修飾符g，則 match方法返回的數組有兩個特性：input和index。input屬性包含整個被搜索的字符串。index屬性包含了在整個被搜索字符串中匹配的子字符串的位置。

8.replace()

replace接收兩個參數，參數一是需要替換掉的字符或者一個正則的匹配規則，參數二，需要替換進去的字符，仔實際的原理當中，參數二，你可以換成一個回調函數。

const?str?=?'2018年結束了，2019年開始了，2020年就也不遠了' const?rex?=?/\d+/g??//?這里是定義匹配規則，匹配字符串里的1到多個數字 const?str1?=?str.replace(rex,?'****')? console.log(str1)?//?輸出："****年結束了，****年開始了,****年也不遠了" const?str2?=?str.replace(rex,?function(item){console.log(arguments)??//?看下面的圖片const?arr?=?['零',?'壹',?'貳',?'叁',?'肆',?'伍',?'陸',?'柒',?'捌',?'玖']let?newStr?=?''item.split('').map(function(i){newStr?+=?arr[i]})?????return?newStr??????? }) console.log(str2)?//?輸出：貳零壹捌年結束了，貳零壹玖年開始了,貳零貳零年也不遠了復制代碼

9.search()

在目標字符串中搜索與正則規則相匹配的字符，搜索到，則返回第一個匹配項在目標字符串當中的位置，沒有搜索到則返回一個-1。

const?str?=?'2018年結束了，2019年開始了，2020年就也不遠了' const?reg?=?/\d+/i??//?這里是定義匹配規則,匹配字符串里的1到多個數字 console.log(str.search(reg))?//?輸出?0??這里搜索到的第一項是從位置0開始的復制代碼

10.toLowerCase(),toUpperCase()

toLowerCase把字母轉換成小寫，toUpperCase()則是把字母轉換成大寫。

const?str1?=?'abcdefg' const?str2?=?'ABCDEFG' console.log(str2.toLowerCase())??//?輸出：'abcdefg' console.log(str1.toUpperCase())??//?輸出：'ABCDEFG' 復制代碼

11.includes(), startsWith(), endsWith()

includes、startsWith、endsWith，es6的新增方法，includes 用來檢測目標字符串對象是否包含某個字符，返回一個布爾值，startsWith用來檢測當前字符是否是目標字符串的起始部分，相對的endwith是用來檢測是否是目標字符串的結尾部分。

const?str?=?'Excuse?me,?how?do?I?get?to?park?road?' console.log(str.includes('how'))?//?輸出：true console.log(str.startsWith('Excuse'))?//?輸出：true console.log(str.endsWith('?'))?//?輸出：true 復制代碼

12.repeat()

返回一個新的字符串對象，新字符串等于重復了指定次數的原始字符串。接收一個參數，就是指定重復的次數。原字符串不變。

const?str?=?'http' const?str2?=?str.repeat(3) console.log(str)?//?輸出：'http' console.log(str2)?//?輸出：'httphttphttp' 復制代碼

三、常用遍歷方法&高階函數

1.for()

最常用的for循環，經常用的數組遍歷，也可以遍歷字符串。

const?arr?=?[1,?2,?3] const?str?=?'abc' for?(let?i?=?0;?i?<?arr.length;?i++)?{console.log(arr[i])console.log(str[i]) } 復制代碼

2.while() / do while()

while、do while主要的功能是，當滿足while后邊所跟的條件時，來執行相關業務。這兩個的區別是，while會先判斷是否滿足條件，然后再去執行花括號里面的任務，而do while則是先執行一次花括號中的任務，再去執行while條件，判斷下次還是否再去執行do里面的操作。也就是說 do while至少會執行一次操作.

while(條件){執行... } ------------ do{執行... } while(條件) 復制代碼

3.forEach()

拷貝一份遍歷原數組。

return無法終止循環。不過可以起到continue效果。
本身是不支持的continue與break語句的我們可以通過some和?every來實現。

const?arr?=?[5,1,3,7,4] arr.forEach((item,?index)?=>?{if?(item?<?2)?returnconsole.log(`索引：${index}，數值：${item}`)arr[5]?=?0 }) console.log(arr) //?打印結果： //?索引：0，數值：5 //?索引：2，數值：3 //?索引：3，數值：7 //?索引：4，數值：4 //?[5,?1,?3,?7,?4,?0] 復制代碼

4.for...in

for...in 是 ES5 標準，此方法遍歷數組效率低，主要是用來循環遍歷對象的屬性。
遍歷數組的缺點：數組的下標index值是數字，for-in遍歷的index值"0","1","2"等是字符串。
Object.defineProperty，建立的屬性，默認不可枚舉。

const?foo?=?{name:?'bar',sex:?'male' } Object.defineProperty(foo,?"age",?{?value?:?18?}) for(const?key?in?foo){console.log(`可枚舉屬性：${key}`) } console.log(`age屬性：${foo.age}`) //?打印結果： //?可枚舉屬性：name //?可枚舉屬性：sex // age屬性：18 復制代碼

5.for...of

for…of是ES6新增的方法，但是for…of不能去遍歷普通的對象，**for…of的好處是可以使用break跳出循環。**

for-of這個方法避開了for-in循環的所有缺陷
與forEach()不同的是，它可以正確響應break、continue和return語句
for-of循環不僅支持數組，還支持大多數類數組對象，例如DOM?NodeList對象^[6]。
- for-of循環也支持字符串遍歷

//?for?of?循環直接得到的就是值 const?arr?=?[1,?2,?3] for?(const?value?of?arr)?{console.log(value) } 復制代碼

面試官：說一下 for...in 和 for...of 區別？

（1）for…in?用于可枚舉數據，如對象、數組、字符串（2）for…of?用于可迭代數據，如數組、字符串、Map、Set 復制代碼

6.every / some

返回一個布爾值。當我們需要判定數組中的元素是否滿足某些條件時，可以使用every / some。這兩個的區別是，every會去判斷判斷數組中的每一項，而 some則是當某一項滿足條件時返回。

//?every const?foo?=?[5,1,3,7,4].every((item,?index)?=>?{console.log(`索引：${index}，數值：${item}`)return?item?>?2 }) console.log(foo) // every 打印： //?索引：0，數值：5 //?索引：1，數值：1 //?false 復制代碼//?some const?foo?=?[5,1,3,7,4].some((item,?index)?=>?{console.log(`索引：${index}，數值：${item}`)return?item?>?2 }) console.log(foo) // some 打印： //?索引：0，數值：5 //?true 復制代碼

7.filter()

filter方法用于過濾數組成員，滿足條件的成員組成一個新數組返回。
它的參數是一個函數，所有數組成員依次執行該函數，返回結果為true的成員組成一個新數組返回。
該方法不會改變原數組。

const?foo?=?[5,1,3,7,4].filter((item,index)?=>?{console.log(`索引：${index}，數值：${item}`)return?item?>?2 }) console.log(foo) //?打印結果： //?索引：0，數值：5 //?索引：1，數值：1 //?索引：2，數值：3 //?索引：3，數值：7 //?索引：4，數值：4 //?[5,?3,?7,?4] 復制代碼

8.map()

map即是 “映射”的意思，原數組被“映射”成對應新數組。
map：支持return，相當與原數組克隆了一份，把克隆的每項改變了，也不影響原數組。

const?foo?=?[5,1,3,7,4].map((item,index)?=>?{console.log(`索引：${index}，數值：${item}`)return?item?+?2 }) console.log(foo) //?打印結果： //?索引：0，數值：5 //?索引：1，數值：1 //?索引：2，數值：3 //?索引：3，數值：7 //?索引：4，數值：4 //?[7,?3,?5,?9,?6] 復制代碼

9. reduce() / reduceRight()

reduce 從左到右將數組元素做“疊加”處理，返回一個值。reduceRight 從右到左。

const?foo?=?[5,1,3,7,4].reduce((total,?cur)?=>?{console.log(`疊加：${total}，當前：${cur}`)return?total?+?cur }) console.log(foo) //?打印結果： //?疊加：5，當前：1 //?疊加：6，當前：3 //?疊加：9，當前：7 //?疊加：16，當前：4 //?20 復制代碼

10.Object,keys遍歷對象的屬性

Object.keys方法的參數是一個對象，返回一個數組。該數組的成員都是該對象自身的（而不是繼承的）所有屬性名，且只返回可枚舉的屬性。

const?obj?=?{p1:?123,p2:?456 }; Object.keys(obj)?//?["p1",?"p2"] 復制代碼

11.Object.getOwnPropertyNames() 遍歷對象的屬性

Object.getOwnPropertyNames方法與Object.keys類似，也是接受一個對象作為參數，返回一個數組，包含了該對象自身的所有屬性名。但它能返回不可枚舉的屬性。

const?arr?=?['Hello',?'World']; Object.keys(arr)?//?["0",?"1"] Object.getOwnPropertyNames(arr)?//?["0",?"1",?"length"] 復制代碼

以上遍歷方法的區別：

一：map()，forEach()，filter()循環的共同之處：1.forEach，map，filter循環中途是無法停止的，總是會將所有成員遍歷完。2.他們都可以接受第二個參數，用來綁定回調函數內部的?this?變量，將回調函數內部的?this?對象，指向第二個參數，間接操作這個參數（一般是數組）。二：map()、filter()循環和forEach()循環的不同：forEach 循環沒有返回值；map，filter 循環有返回值。三：map()和filter()都會跳過空位，for?和?while?不會四：some()和every():some()只要有一個是true，便返回true；而every()只要有一個是false，便返回false.五：reduce()，reduceRight()：reduce是從左到右處理（從第一個成員到最后一個成員），reduceRight則是從右到左（從最后一個成員到第一個成員）。六：Object對象的兩個遍歷?Object.keys?與?Object.getOwnPropertyNames：他們都是遍歷對象的屬性，也是接受一個對象作為參數，返回一個數組，包含了該對象自身的所有屬性名。但Object.keys不能返回不可枚舉的屬性；Object.getOwnPropertyNames能返回不可枚舉的屬性。復制代碼

四、常用正則表達式

這里羅列一些我在刷算法題中遇到的正則表達式，如果有時間可認真學一下正則表達式不要背^[7]。

1.判斷字符

由26個英文字母組成的字符串：^[A-Za-z]+$ 由26個大寫英文字母組成的字符串：^[A-Z]+$ 由26個小寫英文字母組成的字符串：^[a-z]+$ 由數字和26個英文字母組成的字符串：^[A-Za-z0-9]+$ 復制代碼

2.判斷數字

數字：^[0-9]*$ 復制代碼

持續更新，敬請期待……

五、數學知識

1.質數

若一個正整數無法被除了1 和它自身之外的任何自然數整除，則稱該數為質數（或素數），否則稱該正整數為合數。

function?judgePrime(n)?{for?(let?i?=?2;?i?*?i?<=?n;?i++)?{if?(n?%?i?==?0)?return?false}return?true } 復制代碼

2.斐波那契數列

function?Fibonacci(n)?{if?(n?<=?1)?return?n??return?Fibonacci(n?-?1)?+?Fibonacci(n?-?2) } 復制代碼