[TOC] #### 1. 前言 --- 本文提供兩個數(shù)組變量供測試使用 ```javascript const array = ['html', 'css', 'js', 'css'] const resArr = ['html', 'css', 'css', [1], [1]] ``` #### 2. 普通方法數(shù)組去重 --- 下面列舉幾種數(shù)組去重的方法思路都一樣: 遍歷數(shù)組，將數(shù)組元素添加到新數(shù)組中，新數(shù)據(jù)中已有該元素，則不添加到新數(shù)組 ```javascript // for + indexOf const res = []; for (let index = 0; index < array.length; index++) { res.indexOf(array[index]) === -1 && res.push(array[index]) } // forEach + indexOf const res = []; array.forEach(item => { res.indexOf(item) === -1 && res.push(item) }) // reduce + includes const res = array.reduce((total, item) => { !total.includes(item) && total.push(item) return total; }, []) ``` #### 3. filter + indexOf --- 使用 `filter + indexOf` 的方式可以使代碼變?yōu)楦啙? `filter()` 方法過濾數(shù)組，只保留滿足條件的元素。`indexOf()` 方法判斷元素首次出現(xiàn)的下標(biāo)是否為當(dāng)前遍歷的下標(biāo) ```javascript // ['html', 'css', 'js'] const res = array.filter((item, index) => array.indexOf(item) === index) ``` #### 4. ES6 的 new Set() --- 利用 Set 結(jié)構(gòu)不能接收重復(fù)數(shù)據(jù)的特點 ```javascript const res = [...new Set(array)] ``` #### 5. 需要注意的問題 --- 當(dāng)數(shù)組中存在引用類型的元素時，引用類型元素?zé)o法保持唯一性 ```javascript const resArr = ['html', 'css', 'css', [1], [1]] // ['html', 'css', 'css', [1], [1]] const res = resArr.filter((item, index) => resArr.indexOf(item) === index) ```