• Array API
  • 靜態方法
  • 陣列首尾元素處理
  • 陣列遍歷（重要）
  • 陣列查找
  • 陣列過濾（重要）
  • 陣列合并
  • 陣列洗掉與截取
  • 陣列排序
• String API
  • 字串查找與匹配
  • 字串替換
  • 字串合并
  • 字串首尾空格去除
  • 字串大小寫轉化
  • 字串洗掉與截取（重要）

Array API

陣列方法在JS中是一個重要的知識點，本文將重點講解一些方法的使用細節和使用場景，以下是對陣列方法的分類

靜態方法

應用場景：Array.from()這個方法常用于轉化NodeList類陣列物件，讓DOM集合也能擁有陣列方法，

陣列首尾元素處理

應用場景：我們可以利用上述方法能夠非常簡單的模擬堆疊和佇列這兩種資料結構，如下：

let arr = [ 1, 2, 3, 4, 5 ]
// 堆疊資料結構，后進先出，
arr.pop(5) // 出堆疊操作 [ 1, 2, 3, 4 ]
arr.push(5) // 入堆疊操作 [ 1, 2, 3, 4, 5 ]
// 佇列資料結構，先進先出，
arr.shift(1) // 出隊操作 [ 2, 3, 4, 5 ]
arr.push(1) // 入隊操作 [ 1, 2, 3, 4, 5 ]

其中pop和push方法分別對應堆疊的出堆疊與入堆疊操作，shift和push方法分別對應佇列的出隊和入隊操作，

當然，我們也可以進一步基于以上方法利用面向物件編程分別封裝堆疊和佇列這樣的資料結構進行操作，

陣列遍歷（重要）

應用場景：以上兩個方法都十分常用，其中NodeList自帶forEach方法，在DOM編程中可以應用， 此外，在vue中我們常常會設計這樣一個資料結構用于v-for回圈，

let arr = [
    { id: 0, name: "小紅", age: 22 },
    { id: 1, name: "小華", age: 18 },
    { id: 2, name: "小明", age: 24 },
]
arr.forEach((element) => {
    console.log(element.name) // 結果："小紅" "小明" "小華"
})
let result = arr.map((element) => { // 方法回傳一個新陣列，我們使用result變數接收
    return element.id * 2 // 回傳的element會作為result陣列中的元素
})
console.log(result) // 結果：[ 0, 2, 4 ]

使用以上方法可以非常簡便的訪問陣列中每個物件的屬性，以此對每個物件屬性值進行統計、運算和賦值等操作，

陣列查找

應用場景：需要根據條件獲取索引或值的元素，一般根據回傳值用于判斷陣列內是否存在符合條件的元素，

陣列過濾（重要）

應用場景：這里重點講解filter和reduce兩個最常用的方法，

1. reduce方法應用廣泛，可用于陣列去重、陣列扁平化等操作，基本使用方法如下：

reduce((previousValue, currentValue) => { /* … */ } , initialValue)

其中reduce方法接收兩個引數：一個是回呼函式，一個是初始值，若已設定初始值initialValue，回呼函式中的第一個引數previousValue等于initialValue，第二個引數為陣列的第一個元素，在reduce方法遍歷程序中，回呼函式的第二個引數currentValue將會按順序訪問陣列元素，第一個引數previousValue則為上一次return的結果，來看一個陣列去重的應用例子：

let a = [1, 2, 2, 3, 3, 3]
function unique(arr) {
    return arr.reduce((pre, cur) => {
        return pre.includes(cur) === true ? pre : pre.concat(cur) // concat會回傳一個新陣列
        // 判斷上一次return的結果（pre）是否存在相同元素，
        // 如果存在pre不變直接return回傳；若不存在pre合并當前元素后return回傳
    }, []) // [] 空陣列作為初始值
}
console.log(unique(a)) // 結果：[ 1,2,3 ]

2. filter方法主要應用于有條件需要進行資料篩選的陣列，還是上上面的陣列結構，如下：

let arr = [
    { id: 0, name: "小紅", age: 22 },
    { id: 1, name: "小華", age: 18 },
    { id: 2, name: "小明", age: 24 },
]
// 這里做一個篩選，我們只要大于18歲的人作為新陣列資料

// 使用filter方法
let filterResult = arr.filter(element => element.age > 18) // 不用花括號會直接return運算式
console.log(filterResult)
// 結果：[{ id: 0, name: "小紅", age: 22 }, { id: 2, name: "小明", age: 24 }]

// 使用map方法
let mapResult = arr.map(element => element.age > 18) // 不用花括號會直接return運算式
console.log(mapResult)
  // 結果：[ true, false, true ]

這里做一個比較：filter相比map的區別，當陣列內元素的不符合條件時，map方法內部不符合條件的元素仍然會根據return的內容占據原來的位置；而filter方法則根據return的條件（true或false）去掉不符合的元素，回傳符合條件元素組成的陣列，

陣列合并

說明：concat方法可以進行陣列合并，如下：

let arr = [].concat([1, 2], [3, 4])
console.log(arr)
// 輸出結果：[1, 2, 3, 4]

值得注意的點：

1. concat方法不會改變陣列，而是回傳一個新陣列，需要使用變數接收這個新陣列，

2. concat方法傳入的引數如果是嵌套陣列會展開其第一層進行合并，如下：

let arr = [].concat(1, 2, [3, 4, [5, 6, [7, 8]]])
console.log(arr)
// 輸出結果：[1, 2, 3, 4, Array(3)]

應用場景：我們利用上面concat方法傳入引數是嵌套陣列會展開一層進行合并的特點，再加上擴展運算子和遞回的思想可以非常巧妙的實作陣列扁平化，如下：

// 三行代碼實作陣列扁平化
function flatten(arr, deep) {
    return deep > 0 ? flatten([].concat(...arr), deep - 1) : arr
}
// 引數說明：arr = 原陣列，deep = 展開的深度（從0開始，完全展開可以設為Infinity）
let a = [1, 2, [3, 4, [5, 6, [7, 8]]]] // 原陣列
let result = flatten(a, 3) // 傳入陣列執行方法，展開深度為3
console.log(result)
// 輸出結果：[1, 2, 3, 4, 5, 6, 7, 8]

程序分析如下：

原始陣列：[1, 2, [3, 4, [5, 6, [7, 8]]]]

擴展運算子將原始陣列展開后：1, 2, [3, 4, [5, 6, [7, 8]]]

concat方法的傳入引數合并后：[1, 2, 3, 4, [5, 6, [7, 8]]]

重復上面的展開與合并程序，可以深度拍平陣列，

陣列洗掉與截取

說明：我們重點關注slice和splice的引數說明，如下：

let a = [1, 2, 3, 4, 5, 6]
let b = a.slice(2, 4) // 提取位置2到位置4的元素，回傳一個新陣列用變數b接收
console.log(b) // [3， 4]

引數說明：slice(start, end)方法可接收兩個引數，一般用于提取陣列中的元素，

1. start是陣列開始提取的位置，若是負值則代表倒數第幾位開始（等價array.length - n），若start超出陣列長度則會回傳空陣列，

2. end代表陣列終止提取的位置，若end被省略或end超出陣列長度slice()方法都會從start開始提取到陣列末尾，

3. slice() 會提取原陣列中索引從 begin 到 end 的所有元素（包含 begin，但不包含 end）作為新陣列回傳，

let a = [1, 2, 3, 4, 5, 6]
a.splice(2, 4, 7) // 從位置2開始洗掉4個元素，洗掉后在原陣列位置2添加元素7
console.log(a) // [1，2, 7]

引數說明：splice(start, deleteCount, item1, item2, itemN)方法可接收三個以上引數，可用于洗掉陣列中的元素，

1. start：代表陣列開始修改的位置，若是負值則代表倒數第幾位開始（等價array.length - n），若start超出陣列長度則以末尾開始修改，

2. deleteCount：代表從start開始要移除的元素個數（含第 start 位）， 若deleteCount 大于 start 之后的元素的總數，則從 start 后面的元素都將被洗掉，

3. item1,item2...：代表洗掉后從原陣列start位置開始要添加的資料，會在洗掉后不指定則 splice() 方法只會洗掉陣列元素，

陣列排序

sort方法利用原地演算法對陣列進行排序，簡單來說就是在不開闊新的空間情況下，只能在原陣列內用相互替換的方法交換陣列內元素進行排序，比如冒泡排序、插入排序和希爾排序等空間復雜度為O(log n)的排序演算法，當然我們最關心的還是它的用法，sort方法接收一個回呼函式fn，回呼函式里可以傳入兩個引數a和b，排序程序中回呼函式的回傳值可以有以下情況：

1. fn(a, b) > 0：a在b之后

2. fn(a, b) < 0：a在b之前

3. fn(a, b) === 0：a和b位置保持不變

let strs = ['Axios', 'Candy', 'Mike', 'Alice']
let a = strs.sort()// 沒有回呼函式，默認按元素轉化成后字串的各個字符的Unicode代碼點進行排序
console.log(a) // ['Alice', 'Axios', 'Candy', 'Mike']
// 字母相同的元素（'Axios'和'Alice'）會利用元素下一個字串的Unicode代碼點繼續進行排序

let nums = [2, 1, 4, 3, 5, 6]
let b = nums.sort((a, b) => a - b) // 存在回呼函式，a-b為升序
console.log(b)
let c = nums.sort((a, b) => b - a) // 存在回呼函式，b-a為降序
console.log(c)

let objs = [
    { id: 0, name: "小紅", age: 22 },
    { id: 1, name: "小華", age: 18 },
    { id: 2, name: "小明", age: 24 },
]
let d = objs.sort((a, b) => a.age - b.age) // 也可以利用物件屬性值進行排序（這里是升序）
console.log(d) // 按年齡大小對元素排序

reverse()方法用于陣列逆序，如下：

let nums = [1, 2, 3, 4, 5, 6]
nums.reverse()
console.log(nums) // [6, 5, 4, 3, 2, 1]

特別注意：所有回傳新陣列的陣列方法都不會改變原有陣列，因此要用一個新變數接識訓傳的新陣列，

回傳新陣列的方法總結如下：

1. Array.prototype.map()
2. Array.prototype.filter()
3. Array.prototype.concat()
4. Array.prototype.slice()
5. Array.prototype.sort

String API

在網路上我們每天都需要利用字符進行交流，間接說明我們應該掌握字串的處理方式，這是前端開發中不可或缺的技能，以下是字串方法的分類：

字串查找與匹配

我們重點關注一下indexOf方法，indexOf方法可以搜索子字串第一次出現的索引，根據傳入引數的不同搜索的結果分別以下有三種情況：

let a = "abc";
a.indexOf("c") // 正確傳參，輸出結果：2
a.indexOf() // 不傳引數，輸出結果："undefined"
a.indexOf("d") // 傳入引數錯誤或子字串在字串中找不到，輸出結果：-1

match方法傳入一個正則運算式作為引數，與search方法的區別是：match方法會回傳結果分為兩種情況：若正則運算式設為全域匹配g會回傳一個匹配的子字串結果（陣列形式），若未設定全域匹配則會回傳一個有特定結構的結果陣列，如果都沒匹配成功則回傳null，search方法則會回傳首次匹配字串的索引，不匹配回傳-1，

let a = "AbCdEfG"
let regex1 = /[A-Z]/g // 設定全域匹配
a.match(regex1) // 輸出結果：['A', 'C', 'E', 'G']
let regex2 = /[A-Z]/ // 為設定全域匹配
a.match(regex2) // 輸出結果：['A', index: 0, input: 'AbCdEfG', groups: undefined]

字串替換

應用場景：可以做字符替換，replace方法接收兩個引數，第一個引數可以是正則運算式或字串，第二個引數是要替換的內容，replace方法在字串匹配成功后，會進行替換，替換如下：

let str = 'My name is Jelly';
str.replace('Jelly', 'Mary') // 輸出結果: 'My name is Mary'

字串合并

字串的concat方法跟陣列的concat方法操作基本相同，用于字串的合并操作，

字串首尾空格去除

應用場景：去掉字串的首尾空格，如下：

let str = '  Hello, World    ';
str.trim(); // 輸出結果：'Hello, World'

字串大小寫轉化

應用場景：以上的字串方法可以應用于字母的大小寫替換，可以來做一道題，實作小駝峰式命名法：將一個英語短語轉換為小駝峰式命名，例如：first name => firstName

function toConvertCase(str) {
    let result = '' // 存盤新字串，用于合并新的字符
    let count = 0 // 記錄初始狀態，因為第一個字母需要小寫
    let space = false // 記錄字符狀態，是否出現已經特殊字符
    for (let i = 0; i < str.length; i++) {
        if (str[i].search(/^[A-Za-z]+$/) === 0) {
            if (count === 0 && space === false) {
                count++
            } // 此時count恒等于1，根據下面的三元運算式第一次出現的字母為小寫
            result = space === true && count !== 0
                ? result.concat(str[i].toUpperCase())
                : result.concat(str[i].toLowerCase())
            space = false // 第一次出現的字母和首字母大寫后的字母都為小寫，設為false
        } else {
            space = true
            // 出現特殊字符space設為true，下一次若是字母則三元運算式的值為true，新字串合并首字母大寫，
        }
    }
    return result
}
// 短語輸入測驗
let a = toConvertCase('!@#  fiRst %^&*(  nAmE  !@#$  ')
let b = toConvertCase('423432 SEcOnd@3423423 NaME')
let c = toConvertCase('@ThIrd-3NAmE')
console.log(a) // 輸出結果：firstName
console.log(b) // 輸出結果：secondName
console.log(c) // 輸出結果：thirdName

只要輸入有特殊字符間隔的短語就能回傳小駝峰式命名，容錯率還是非常高的，獲取的字串特征如下：

1. 短語之間會存在特殊字符間隔，利用這個作為實作切入點，
2. 第一個單詞的首字母為小寫，后面的單詞首字母都為大寫，

可以根據上面的字串特征進行解題，不過上面的使用好像有點超綱了，我們還是重點關注它怎么用就行了，

字串洗掉與截取（重要）

字串的slice方法跟陣列的slice方法操作基本相同，接收兩個引數為開始和結束位置（不包括）進行字符提取，我們重點關注substring方法，這個是最常用的字串截取操作，substring方法接收兩個引數，這里暫且設為start和end兩個引數，分別代表開始和結束位置（不包括）的字符，使用規則如下：

1. start === end 回傳一個空字串
2. 省略end引數，substring方法直接提取到末尾
3. 任一引數小于0或為NaN，會當作0進行截取
4. 任一引數大于字串長度，則會截取到array.length
5. start > end 會進行引數調換再截取字串

let a = "abcdefg"
a.substring(2, 2)   // 輸出結果：''
a.substring(2)      // 輸出結果：'cdefg'
a.substring(2, NaN) // 輸出結果：'ab'
a.substring(8, 2)   // 輸出結果：'cdefg'
a.substring(4, 2)   // 輸出結果：'cd'

參考

MDN-Array

MDN-String

標籤：其他

上一篇：一文讀懂 HTTP/1 HTTP/2 HTTP/3

下一篇：css面試題一