介紹

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

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

文章主要包含以下內(nèi)容：
數(shù)組常用方法
字符串常用方法
常用遍歷方法&高階函數(shù)
常用正則表達式
數(shù)學(xué)知識

一、數(shù)組常用方法

1.push()

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

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

2.pop()

在尾部彈出，類似于出棧，原數(shù)組會變。數(shù)組的 push & pop 可以模擬常見數(shù)據(jù)結(jié)構(gòu)之一：棧。

const arr = [1, 2, 3]
const popVal = arr.pop()
console.log(popVal) // 3
console.log(arr) // [1, 2]

// 數(shù)組模擬常見數(shù)據(jù)結(jié)構(gòu)之一：棧
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]
復(fù)制代碼

3.unshift()

在頭部壓入數(shù)據(jù)，類似于入隊，原數(shù)組會變。

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

4.shift()

在頭部彈出數(shù)據(jù)，原數(shù)組會變。數(shù)組的 push（入隊） & shift（出隊）可以模擬常見數(shù)據(jù)結(jié)構(gòu)之一：隊列。

const arr = [1, 2, 3]
const shiftVal = arr.shift()
console.log(shiftVal) // 1
console.log(arr) // [2, 3]

// 數(shù)組模擬常見數(shù)據(jù)結(jié)構(gòu)之一：隊列
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]
復(fù)制代碼

5.concat()

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

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]
復(fù)制代碼

6.indexOf()

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

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

7.includes()

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

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

8.join()

將數(shù)組轉(zhuǎn)化成字符串，并返回該字符串，不傳值則默認逗號隔開，原數(shù)組不變。

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

9.reverse()

翻轉(zhuǎn)原數(shù)組，并返回已完成翻轉(zhuǎn)的數(shù)組，原數(shù)組改變。

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

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]
復(fù)制代碼

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

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

const arr3 = [1, 2, 3, 4, 5, 6, 7, "f1", "f2"];
const arr4 = arr3.splice(2, 3) // 刪除第三個元素以后的三個數(shù)組元素(包含第三個元素)
console.log(arr4); // [3, 4, 5];
console.log(arr3); // [1, 2, 6, 7, "f1", "f2"]; 原始數(shù)組被改變

const arr5 = arr3.splice(2, 0, "wu", "leon"); 
// 從第2位開始刪除0個元素，插入"wu","leon"
console.log(arr5); // [] 返回空數(shù)組
console.log(arr3); // [1, 2, "wu", "leon", 6, 7, "f1", "f2"]; 原始數(shù)組被改變

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]
復(fù)制代碼

12.sort()

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

可參考 MDN：Sort^[5]

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

13.toString()

將數(shù)組轉(zhuǎn)化成字符串，并返回該字符串，逗號隔開，原數(shù)組不變。

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

二、字符串常用方法

1.charAt()

返回指定索引位置處的字符。類似于數(shù)組用中括號獲取相應(yīng)下標位置的數(shù)據(jù)。

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

2.concat()

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

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

3.indexOf()、lastIndexOf()

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

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

4.slice()

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

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

5.split()

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

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

6.substr(), substring()

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

7.match()

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

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

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

8.replace()

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

const str = '2018年結(jié)束了，2019年開始了，2020年就也不遠了'
const rex = /\d+/g  // 這里是定義匹配規(guī)則，匹配字符串里的1到多個數(shù)字
const str1 = str.replace(rex, '****') 
console.log(str1) // 輸出："****年結(jié)束了，****年開始了,****年也不遠了"
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) // 輸出：貳零壹捌年結(jié)束了，貳零壹玖年開始了,貳零貳零年也不遠了
復(fù)制代碼

9.search()

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

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

10.toLowerCase(),toUpperCase()

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

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

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

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

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
復(fù)制代碼

12.repeat()

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

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

三、常用遍歷方法&高階函數(shù)

1.for()

最常用的for循環(huán)，經(jīng)常用的數(shù)組遍歷，也可以遍歷字符串。

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

2.while() / do while()

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

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

3.forEach()

拷貝一份遍歷原數(shù)組。

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

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

4.for...in

for...in 是 ES5 標準，此方法遍歷數(shù)組效率低，主要是用來循環(huán)遍歷對象的屬性。
遍歷數(shù)組的缺點：數(shù)組的下標index值是數(shù)字，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}`)
// 打印結(jié)果：
// 可枚舉屬性：name
// 可枚舉屬性：sex
// age屬性：18
復(fù)制代碼

5.for...of

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

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

for-of循環(huán)也支持字符串遍歷

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

面試官：說一下 for...in 和 for...of 區(qū)別？

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

6.every / some

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

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

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

7.filter()

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

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

8.map()

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

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

9. reduce() / reduceRight()

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

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

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

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

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

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

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

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

以上遍歷方法的區(qū)別：

一：map()，forEach()，filter()循環(huán)的共同之處：
  1.forEach，map，filter循環(huán)中途是無法停止的，總是會將所有成員遍歷完。
  2.他們都可以接受第二個參數(shù)，用來綁定回調(diào)函數(shù)內(nèi)部的 this 變量，將回調(diào)函數(shù)內(nèi)部的 this 對象，指向第二個參數(shù)，間接操作這個參數(shù)（一般是數(shù)組）。

二：map()、filter()循環(huán)和forEach()循環(huán)的不同：
   forEach 循環(huán)沒有返回值；map，filter 循環(huán)有返回值。

三：map()和filter()都會跳過空位，for 和 while 不會

四：some()和every():
   some()只要有一個是true，便返回true；而every()只要有一個是false，便返回false.

五：reduce()，reduceRight()：
   reduce是從左到右處理（從第一個成員到最后一個成員），reduceRight則是從右到左（從最后一個成員到第一個成員）。

六：Object對象的兩個遍歷 Object.keys 與 Object.getOwnPropertyNames：
   他們都是遍歷對象的屬性，也是接受一個對象作為參數(shù)，返回一個數(shù)組，包含了該對象自身的所有屬性名。但Object.keys不能返回不可枚舉的屬性；Object.getOwnPropertyNames能返回不可枚舉的屬性。
復(fù)制代碼

四、常用正則表達式

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

1.判斷字符

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

2.判斷數(shù)字

數(shù)字：^[0-9]*$
復(fù)制代碼

持續(xù)更新，敬請期待……

五、數(shù)學(xué)知識

1.質(zhì)數(shù)

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

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

2.斐波那契數(shù)列

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