javascript
刷算法题常用的 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位置開始添加后面的幾個元素到原始的數組里面。
返回值為由被刪除的元素組成的一個數組。如果只刪除了一個元素，則返回只包含一個元素的數組。如果沒有刪除元素，則返回空數組。
這個方法會改變原始數組，數組的長度會發生變化
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。
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來實現。
4.for...in
for...in 是 ES5 標準， 此方法遍歷數組效率低，主要是用來循環遍歷對象的屬性。
遍歷數組的缺點：數組的下標index值是數字，for-in遍歷的index值"0","1","2"等是字符串。
Object.defineProperty，建立的屬性，默認不可枚舉。
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...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的成員組成一個新數組返回。
該方法不會改變原數組。
8.map()
map即是 “映射”的意思 ，原數組被“映射”成對應新數組。
map：支持return，相當與原數組克隆了一份，把克隆的每項改變了，也不影響原數組。
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) } 復制代碼持續更新，敬請期待……
參考文章
JavaScript 之字符串常用方法[8]
JavaScript 循環遍歷大全[9]
刷算法題必備的數學考點匯總[10]
關于本文
作者：擺草猿
https://juejin.cn/post/7087134135193436197
Node 社群我組建了一個氛圍特別好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你對Node.js學習感興趣的話（后續有計劃也可以），我們可以一起進行Node.js相關的交流、學習、共建。下方加 考拉 好友回復「Node」即可。如果你覺得這篇內容對你有幫助，我想請你幫我2個小忙：1. 點個「在看」，讓更多人也能看到這篇文章2. 訂閱官方博客?www.inode.club?讓我們一起成長點贊和在看就是最大的支持??總結
以上是生活随笔為你收集整理的刷算法题常用的 JS 基础扫盲的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python绘制同心圆代码_使用Pyth
- 下一篇： netscape.javascript.