快捷導(dǎo)航

JavaScript實(shí)現(xiàn)數(shù)組去重的十種方法分享

更新時(shí)間：2022年11月30日 14:41:01 作者：接著奏樂(lè)接著舞。

去重是開發(fā)中經(jīng)常會(huì)碰到的一個(gè)熱點(diǎn)問(wèn)題，這篇文章主要介紹了JavaScript中實(shí)現(xiàn)數(shù)組去重的10種方法，文中的示例代碼講解詳細(xì)，感興趣的可以了解一下

方法1

利用 ES6的set 方法和解構(gòu)賦值——最常用、最簡(jiǎn)單。

這個(gè)方法是es6之后加入的，是最簡(jiǎn)單的一種方法。

Set是一種結(jié)構(gòu)，是一種不重復(fù)值的集合，如：{1,2,3}。它的特性之一就是里面的每一個(gè)值都是不重復(fù)的；

[...new Set(arr)] 意思是將Set結(jié)構(gòu)解構(gòu)賦值為數(shù)組。

        function Unrepeated1(arr) {
           return [...new Set(arr)]
        }
        console.log(Unrepeated1([1,1,2,2,3,3]));
        // 結(jié)果是[1, 2, 3]

方法2

利用數(shù)組原型對(duì)象上的 lastIndexOf 方法——以前常用，逐漸被include代替

思路：定義一個(gè)空數(shù)組，遍歷這個(gè)原數(shù)組，如果空數(shù)組沒(méi)有這個(gè)數(shù)就往空數(shù)組里加入，有的話就不操作。

lastIndeOf():返回指定字符串值最后出現(xiàn)的位置，從后向前搜索,找不到返回-1

        function Unrepeated2(arr) {
            var res = [];
            for (var i = 0; i < arr.length; i++) {
                res.lastIndexOf(arr[i]) !== -1 ? '' : res.push(arr[i]);
            }
            return res;
        }
        console.log(Unrepeated2([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
        // 結(jié)果是[1, 2, 3, 5, 6, 7, 4]

方法3

利用數(shù)組原型對(duì)象上的 splice 方法。

思路是：雙層遍歷數(shù)組，舉例：如果第一項(xiàng)是數(shù)字1，那么第二層遍歷從第二項(xiàng)開始，如果后面也找到1，就把1刪除。

splice（）：用于刪除數(shù)組元素，splice（j，1）j代表數(shù)組索引是j,1代表刪除1個(gè)

        function Unrepeated3(arr) {
            var i,j,len = arr.length;
            for (i = 0; i < len; i++) {
                for (j = i + 1; j < len; j++) {
                    if (arr[i] == arr[j]) {
                        arr.splice(j, 1);
                        len--;
                        j--;
                    }
                }
            }
            return arr;
        }
        console.log(Unrepeated3([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));

方法4

利用數(shù)組原型對(duì)象上的 forEach 和 includes方法——includes很強(qiáng)大

思路：定義一個(gè)空數(shù)組，遍歷原數(shù)組，再遍歷空數(shù)組，如果空數(shù)組里面含有原數(shù)組的項(xiàng)就添加進(jìn)空數(shù)組，如果空數(shù)組已經(jīng)有了，就不再操作。

includes：表示是否含有，返回布爾值，說(shuō)的也是它以后會(huì)替代indexof。是es6新增的很強(qiáng)大的一個(gè)api，不止數(shù)組可以用，對(duì)象，字符串都可以用。

          function Unrepeated4(arr) {
            let newArr = [];
            arr.forEach(item => {
                return newArr.includes(item) ? '' : newArr.push(item);
            });
            return newArr;
        }
        console.log(Unrepeated4([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
        // 結(jié)果是[1, 2, 3, 4, 5, 6, 7]

方法5

利用數(shù)組原型對(duì)象上的 filter 和 includes方法。

和方法4類似的思路，只不過(guò)foreach+includes換成了filter+includes

        function Unrepeated5(arr) {
            var newArr = []
            newArr = arr.filter(function (item) {
                return newArr.includes(item) ? '' : newArr.push(item)
            })
            return newArr
        }
        console.log(Unrepeated5([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
        // 結(jié)果是[1, 2, 3, 5, 6, 7, 4]

方法6

利用數(shù)組原型對(duì)象上的includes方法。

這個(gè)方法可以作為一般性解法，代碼可以進(jìn)一步簡(jiǎn)化。

        function Unrepeated6(arr) {
            var newArr = []
            for (var i = 0; i < arr.length; i++) {
                if (!newArr.includes(arr[i])) {
                    newArr.push(arr[i])
                }
            }
            return newArr
        }
        console.log(Unrepeated6([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
        // 結(jié)果是[1, 2, 3, 5, 6, 7, 4]

方法7

利用數(shù)組的indexOf下標(biāo)屬性來(lái)查詢。

思路和上面的類似

        function Unrepeated7(arr) {
            var newArr = []
            for (var i = 0; i < arr.length; i++) {
                if (newArr.indexOf(arr[i])===-1) {
                    newArr.push(arr[i])
                }
            }
            return newArr
        }
        console.log(Unrepeated7([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
        // 結(jié)果是[1, 2, 3, 5, 6, 7, 4]

方法8

利用對(duì)象屬性存在的特性，如果沒(méi)有該屬性則存入新數(shù)組。

這個(gè)方法兼容性比較好。思路是用一個(gè)空對(duì)象來(lái)標(biāo)記，通過(guò)遍歷，動(dòng)態(tài)的設(shè)置對(duì)象的屬性，以此來(lái)區(qū)分是否重復(fù)。

        function Unrepeated8(arr) {
            var obj={}
            var newArr=[]
            for (let i = 0; i < arr.length; i++) {
                if (!obj[arr[i]]) {
                    obj[arr[i]] = 1
                    newArr.push(arr[i])
                }   
            }
            return newArr
        }
        console.log(Unrepeated8([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
        // 結(jié)果是[1, 2, 3, 5, 6, 7, 4]

方法9

思路：先將原數(shù)組排序，在與相鄰的進(jìn)行比較，如果不同則存入新數(shù)組。

        function Unrepeated9(arr) {
            var formArr = arr.sort()
            var newArr=[formArr[0]]
            for (let i = 1; i < formArr.length; i++) {
                if (formArr[i]!==formArr[i-1]) {
                    newArr.push(formArr[i])
                }
            }
            return newArr
        }
        console.log(Unrepeated9([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
        // 結(jié)果是[1, 2, 3,  4,5, 6, 7]

方法10

思路：定義一個(gè)新數(shù)組，并存放原數(shù)組的第一個(gè)元素，然后將元素組一一和新數(shù)組的元素對(duì)比，若不同則存放在新數(shù)組中。

        function Unrepeated10(arr) {
            let newArr = [arr[0]];
            for (let i = 1; i < arr.length; i++) {
                let repeat = false;
                for (let j = 0; j < newArr.length; j++) {
                    if (arr[i] === newArr[j]) {
                        repeat = true;
                        break;
                    }else{
                        
                    }
                }
                if (!repeat) {
                    newArr.push(arr[i]);
                }
            }
            return newArr;
        }
 
        console.log(Unrepeated10([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
        // 結(jié)果是[1, 2, 3, 5, 6, 7, 4]

到此這篇關(guān)于JavaScript實(shí)現(xiàn)數(shù)組去重的十種方法分享的文章就介紹到這了,更多相關(guān)JavaScript數(shù)組去重內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: