.jpg)
本文深入探討了在JavaScript數(shù)組中識(shí)別并提取僅出現(xiàn)一次的元素的方法。通過(guò)詳細(xì)解析Array.prototype.indexOf()和Array.prototype.lastIndexOf()的巧妙結(jié)合，我們展示了如何精確篩選出數(shù)組中的唯一項(xiàng)，并區(qū)分其與傳統(tǒng)去重操作的區(qū)別。文章提供了清晰的代碼示例和分步解釋，旨在幫助開(kāi)發(fā)者高效處理數(shù)組數(shù)據(jù)，尤其是在需要精確識(shí)別非重復(fù)元素時(shí)。
引言：精確識(shí)別數(shù)組中的唯一元素
在javascript開(kāi)發(fā)中，我們經(jīng)常需要處理數(shù)組數(shù)據(jù)。一個(gè)常見(jiàn)的需求是從數(shù)組中找出那些只出現(xiàn)過(guò)一次的元素，即非重復(fù)（non-multiple occurrence）元素。這與簡(jiǎn)單的數(shù)組去重（移除重復(fù)項(xiàng)，保留每個(gè)元素的第一個(gè)副本）有所不同。例如，給定數(shù)組 [100, 123, 100, 122, 119, 203, 123, 76, 89]，我們期望的輸出是 [122, 119, 203, 76, 89]。
常見(jiàn)誤區(qū)：indexOf(val) === ind 的局限性
一些開(kāi)發(fā)者可能會(huì)嘗試使用 Array.prototype.Filter() 結(jié)合 indexOf() 來(lái)實(shí)現(xiàn)去重：
const arr = [100, 123, 100, 122, 119, 203, 123, 76, 89]; const removeDuplicates = (data) => { return data.filter((val, ind) => data.indexOf(val) === ind); }; console.log(removeDuplicates(arr)); // 預(yù)期輸出：[100, 123, 122, 119, 203, 76, 89] // 實(shí)際輸出：[100, 123, 122, 119, 203, 76, 89]
這種方法的作用是移除重復(fù)項(xiàng)，但它會(huì)保留每個(gè)元素第一次出現(xiàn)的實(shí)例。例如，對(duì)于數(shù)組 [1, 2, 3, 1, 2]，上述方法會(huì)返回 [1, 2, 3]。然而，如果我們的目標(biāo)是僅提取那些在整個(gè)數(shù)組中只出現(xiàn)過(guò)一次的元素，那么 1 和 2 都不應(yīng)該被包含在內(nèi)，因?yàn)樗鼈兌汲霈F(xiàn)了多次。在這種情況下，我們期望的結(jié)果是 [3]。顯然，這種方法不適用于我們當(dāng)前的需求。
核心策略：indexOf 與 lastIndexOf 的巧妙結(jié)合
要精確識(shí)別數(shù)組中只出現(xiàn)一次的元素，我們可以巧妙地利用 Array.prototype.indexOf() 和 Array.prototype.lastIndexOf() 這兩個(gè)方法。
- Array.prototype.indexOf(searchElement)：返回在數(shù)組中可以找到給定元素的第一個(gè)（最小）索引。
- Array.prototype.lastIndexOf(searchElement)：返回在數(shù)組中可以找到給定元素的最后一個(gè)（最大）索引。
原理闡述： 如果一個(gè)元素在數(shù)組中只出現(xiàn)一次，那么它第一次出現(xiàn)的索引 (indexOf) 和最后一次出現(xiàn)的索引 (lastIndexOf) 必然是相同的。反之，如果一個(gè)元素在數(shù)組中出現(xiàn)了多次，那么它的第一次出現(xiàn)索引和最后一次出現(xiàn)索引將不同。我們可以利用這一特性來(lái)篩選出唯一的元素。
實(shí)現(xiàn)代碼：
立即學(xué)習(xí)“Java免費(fèi)學(xué)習(xí)筆記（深入）”；
const arr = [100, 123, 100, 122, 119, 203, 123, 76, 89]; /** * 提取數(shù)組中僅出現(xiàn)一次的元素 * @param {Array} data - 輸入數(shù)組 * @returns {Array} - 僅包含出現(xiàn)一次的元素的數(shù)組 */ const getUniqueOccurrences = (data) => { return data.filter((val) => data.indexOf(val) === data.lastIndexOf(val)); }; console.log(getUniqueOccurrences(arr)); // 預(yù)期輸出：[122, 119, 203, 76, 89]
逐步解析示例： 讓我們以一個(gè)更簡(jiǎn)單的數(shù)組 [1, 2, 3, 1, 2] 為例，詳細(xì)解釋 filter 函數(shù)的判斷過(guò)程：
-
處理元素 1 (第一個(gè))：
- val 為 1。
- data.indexOf(1) 返回 0 (第一個(gè) 1 的索引)。
- data.lastIndexOf(1) 返回 3 (最后一個(gè) 1 的索引)。
- 比較：0 === 3 為 false。因此，第一個(gè) 1 不會(huì)被保留。
-
處理元素 2 (第一個(gè))：
- val 為 2。
- data.indexOf(2) 返回 1 (第一個(gè) 2 的索引)。
- data.lastIndexOf(2) 返回 4 (最后一個(gè) 2 的索引)。
- 比較：1 === 4 為 false。因此，第一個(gè) 2 不會(huì)被保留。
-
處理元素 3：
- val 為 3。
- data.indexOf(3) 返回 2 ( 3 的索引)。
- data.lastIndexOf(3) 返回 2 ( 3 的索引)。
- 比較：2 === 2 為 true。因此，3 會(huì)被保留。
-
處理元素 1 (第二個(gè))：
- val 為 1。
- data.indexOf(1) 返回 0 (第一個(gè) 1 的索引)。
- data.lastIndexOf(1) 返回 3 (最后一個(gè) 1 的索引)。
- 比較：0 === 3 為 false。因此，第二個(gè) 1 不會(huì)被保留。
-
處理元素 2 (第二個(gè))：
- val 為 2。
- data.indexOf(2) 返回 1 (第一個(gè) 2 的索引)。
- data.lastIndexOf(2) 返回 4 (最后一個(gè) 2 的索引)。
- 比較：1 === 4 為 false。因此，第二個(gè) 2 不會(huì)被保留。
經(jīng)過(guò)整個(gè)過(guò)濾過(guò)程，最終結(jié)果為 [3]，這正是我們期望的單次出現(xiàn)元素。
性能考量與優(yōu)化方案
盡管 indexOf 和 lastIndexOf 的結(jié)合方法簡(jiǎn)潔直觀，但其性能在處理大型數(shù)組時(shí)可能成為瓶頸。
時(shí)間復(fù)雜度分析： 在 Array.prototype.filter() 內(nèi)部，對(duì)于數(shù)組中的每一個(gè)元素，我們都調(diào)用了 indexOf() 和 lastIndexOf()。這兩個(gè)方法在最壞情況下都需要遍歷整個(gè)數(shù)組。因此，這種方法的整體時(shí)間復(fù)雜度為 O(n^2)，其中 n 是數(shù)組的長(zhǎng)度。對(duì)于包含成千上萬(wàn)個(gè)元素的大型數(shù)組，O(n^2) 的復(fù)雜度會(huì)導(dǎo)致執(zhí)行時(shí)間急劇增加。
優(yōu)化方案（使用 map 或對(duì)象統(tǒng)計(jì)頻率）： 為了提高性能，我們可以采用基于哈希表（如 Map 或普通對(duì)象）的方法來(lái)統(tǒng)計(jì)每個(gè)元素的出現(xiàn)頻率。這種方法通常具有 O(n) 的時(shí)間復(fù)雜度，因?yàn)樗恍枰獙?duì)數(shù)組進(jìn)行兩次線性遍歷。
const arr = [100, 123, 100, 122, 119, 203, 123, 76, 89]; /** * 優(yōu)化版：提取數(shù)組中僅出現(xiàn)一次的元素 * 使用 Map 統(tǒng)計(jì)元素頻率，提高性能 * @param {Array} data - 輸入數(shù)組 * @returns {Array} - 僅包含出現(xiàn)一次的元素的數(shù)組 */ const getUniqueOccurrencesOptimized = (data) => { const counts = new Map(); // 使用 Map 存儲(chǔ)元素及其出現(xiàn)次數(shù) // 第一次遍歷：統(tǒng)計(jì)每個(gè)元素的出現(xiàn)次數(shù) for (const item of data) { counts.set(item, (counts.get(item) || 0) + 1); } // 第二次遍歷：過(guò)濾出出現(xiàn)次數(shù)為 1 的元素 return data.filter(item => counts.get(item) === 1); }; console.log(getUniqueOccurrencesOptimized(arr)); // 預(yù)期輸出：[122, 119, 203, 76, 89]
這個(gè)優(yōu)化方案首先通過(guò)一次遍歷構(gòu)建一個(gè)頻率映射表，然后通過(guò)另一次遍歷過(guò)濾出頻率為 1 的元素。雖然增加了 O(n) 的空間復(fù)雜度（用于存儲(chǔ) Map），但將時(shí)間復(fù)雜度降低到了 O(n)，這對(duì)于處理大型數(shù)據(jù)集來(lái)說(shuō)是一個(gè)顯著的改進(jìn)。
總結(jié)
在JavaScript數(shù)組中識(shí)別并提取僅出現(xiàn)一次的元素，可以通過(guò) Array.prototype.filter() 結(jié)合 indexOf() 和 lastIndexOf() 的相等性判斷來(lái)實(shí)現(xiàn)。這種方法簡(jiǎn)潔直觀，易于理解，適用于處理中小型數(shù)組。
對(duì)于性能要求較高的場(chǎng)景，特別是當(dāng)處理大型數(shù)組時(shí)，推薦使用基于哈希表（如 Map 或普通對(duì)象）來(lái)統(tǒng)計(jì)元素頻率，然后進(jìn)行過(guò)濾。這種優(yōu)化方案將時(shí)間復(fù)雜度從 O(n^2) 降低到 O(n)，顯著提高了處理效率。開(kāi)發(fā)者應(yīng)根據(jù)具體的數(shù)組大小和性能需求，選擇最適合的實(shí)現(xiàn)方法。
.png)
