目錄
一、雙層循環遍歷
1.1、雙循環錯誤示范
1.2、正確的做法
①使用array.includes()
②使用set
二、array.includes()的使用與技巧
2.1、基本語法
2.2、返回值
2.3、使用技巧
2.3.1、用戶輸入驗證
2.3.2、權限檢查
2.4、兼容問題
三、總結
一、雙層循環遍歷
1.1、雙循環錯誤示范
????????前幾天看項目，發現有個新舊數組對比，尋找新增元素的需求竟然是用for寫的雙循環。大概就像下面這樣：
// 假設這是兩個數組的真實數據
const array1 = [1, 2, 3, 4, 5, 6, 7, 8];
const array2 = [4, 5, 6, 7, 8];// 用來存儲不重復的元素
const uniqueElements = [];// 雙重循環遍歷兩個數組
for (let i = 0; i < array1.length; i++) {for (let j = 0; j < array2.length; j++) {// 檢查array1中的元素是否不在array2中if (array1[i] !== array2[j]) {uniqueElements.push(array1[i]);}}
}// 打印不重復的元素
console.log(uniqueElements);????????太抽象了，這樣代碼的？給我一種21世紀用木頭刀槍打獵的感覺。還有的是這樣寫的：
// 假設這是兩個數組的真實數據
const array1 = [1, 2, 3, 4, 5, 6, 7, 8];
const array2 = [4, 5, 6, 7, 8];// 用來存儲不重復的元素
let uniqueElements = [];// 遍歷array1中的每個元素
array1.forEach(item1 => {// 用另一個forEach來檢查array1中的元素是否不在array2中let isUnique = array2.forEach((item2, index, array) => {return item1 === item2;});// 如果isUnique為false，說明item1不在array2中if (!isUnique) {uniqueElements.push(item1);}
});// 打印不重復的元素
console.log(uniqueElements); // 輸出: [1, 2, 3]? ? ? ? 可是有什么區別嗎？forEach看起來是高級一點，但是沒有擺脫最基礎的邏輯啊，重點是雙循環很干，一點都不巧妙。基本的邏輯就是在滿足功能、需求和時間效率的基礎上，要盡可能少用循環，少用回調，大幅提高代碼的可讀性和可維護性。
1.2、正確的做法
①使用array.includes()
????????最基本的就是要會用array.includes()方法，可以少一次循環。
????????在這段代碼中，我們使用 forEach 方法遍歷 array1 中的每個元素。對于 array1 中的每個元素 item1，我們使用 includes 方法檢查它是否不在 array2 中。如果 item1 不在 array2 中，我們就將它添加到 uniqueElements 數組中。最后，我們打印出 uniqueElements 數組，它包含了 array1 中不在 array2 中的所有元素。
// 假設這是兩個數組的真實數據
const array1 = [1, 2, 3, 4, 5, 6, 7, 8];
const array2 = [4, 5, 6, 7, 8];// 用來存儲不重復的元素
let uniqueElements = [];// 遍歷array1中的每個元素
array1.forEach(item1 => {// 檢查array1中的元素是否不在array2中if (!array2.includes(item1)) {uniqueElements.push(item1);}
});// 打印不重復的元素
console.log(uniqueElements); // 輸出: [1, 2, 3]②使用set
????????使用集合先去重，然后通過Set.has（）方法來判斷新增元素。
????????在這個代碼中，我們首先創建了一個 Set 對象 set2 來存儲 array2 中的所有元素。然后，我們使用 forEach 方法遍歷 array1 中的每個元素 item1。對于 array1 中的每個元素，我們檢查它是否不在 set2 中。如果不在，我們將其添加到 uniqueElements 數組中。最后，我們打印出 uniqueElements 數組，它包含了 array1 中不在 array2 中的所有元素。
// 假設這是兩個數組的真實數據
const array1 = [1, 2, 3, 4, 5, 6, 7, 8];
const array2 = [4, 5, 6, 7, 8];// 創建一個集合來存儲array2中的元素，以便快速查找
const set2 = new Set(array2);// 用來存儲不重復的元素
const uniqueElements = [];array1.forEach(item1 => {// 檢查item1是否不在array2的集合中if (!set2.has(item1)) {uniqueElements.push(item1);}
});// 打印不重復的元素
console.log(uniqueElements); // 應該輸出: [1, 2, 3]????????這樣是不是優雅很多？并且時間效率上也有提高。
? ? ? ? 既然談到這里，就簡單聊一下array.includes()吧。
二、array.includes()的使用與技巧
2.1、基本語法
arr.includes(searchElement[, fromIndex])
- searchElement：需要檢查是否包含在數組中的元素。
- fromIndex（可選）：開始搜索的索引位置，默認值為 0。如果該值大于數組長度，則返回?false?并且不執行搜索。
2.2、返回值
- 如果 searchElement 存在于數組中，返回 true。
- 如果 searchElement 不存在于數組中，返回 false。
2.3、使用技巧
????????array.includes()用于判斷一個數組是否包含一個指定的值，根據情況返回 true 或 false。
2.3.1、用戶輸入驗證
????????在表單驗證中，我們可能需要檢查用戶輸入是否包含某些特定的字符或單詞。
const userInput = "Hello, World!";
const bannedWords = ["badword", "offensiveword"];if (bannedWords.some(word => userInput.includes(word))) {console.log("輸入包含禁止詞匯！");
} else {console.log("輸入有效。");
}2.3.2、權限檢查
????????在權限管理系統中，includes() 可以用來檢查用戶是否具有執行特定操作的權限。
const userPermissions = ["read", "write", "delete"];
const requiredPermission = "delete";if (userPermissions.includes(requiredPermission)) {console.log("用戶有權限執行刪除操作。");
} else {console.log("用戶沒有權限執行刪除操作。");
}2.4、兼容問題
????????array.includes() 方法在現代瀏覽器中得到廣泛支持，包括最新版本的 Chrome、Firefox、Safari、Edge 和 Opera。對于不支持 includes() 的舊瀏覽器，可以使用 Array.prototype.indexOf() 方法作為替代：
if (!Array.prototype.includes) {Array.prototype.includes = function(searchElement /*, fromIndex*/){'use strict';var O = Object(this);var len = parseInt(O.length, 10) || 0;if (len === 0) {return false;}var fromIndex = !fromIndex || fromIndex < 0 ? 0 : Math.floor(fromIndex);for (; fromIndex < len; fromIndex++) {if (fromIndex in O && O[fromIndex] === searchElement) {return true;}}return false;};
}三、總結
? ? ? ? 這類問題的重點在于能不能突破基礎思路，突破基礎思路是從程序員入門變成中級甚至高級的第一步，如果所有需求都通過最基礎的業務邏輯來做，是得不到成長的。
????????豐富的前端內容請看：各種前端問題的技巧和解決方案
? ? ? ? 博客不應該只有代碼和解決方案，重點應該在于給出解決方案的同時分享思維模式，只有思維才能可持續地解決問題，只有思維才是真正值得學習和分享的核心要素。如果這篇博客能給您帶來一點幫助，麻煩您點個贊支持一下，還可以收藏起來以備不時之需，有疑問和錯誤歡迎在評論區指出~
)
