一、利用indexOf()方法去重

接下來我們通過一個(gè)案例來演示數(shù)組索引的使用。要求在一組數(shù)據(jù)中，去除重復(fù)的元素。其中數(shù)組為['blue', 'reen', 'blue']。示例代碼如下。

<script>
    arr = ['blue', 'green', 'blue', 'yellow', 'black', 'yellow', 'blue', 'green', 'blue', 'blue', 'blue'];
    function unique(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(unique(arr));          // 輸出結(jié)果: (4) ["blue", "green", "yellow", "black"]
</script>

上述代碼中，第2行代碼定義了新數(shù)組newArr，用來存放數(shù)組中不重復(fù)的元素。第3~7行代碼遍歷了舊數(shù)組arr，然后拿著舊數(shù)組元素去查詢新數(shù)組，如果該元素在新數(shù)組中沒有出現(xiàn)過，那么就添加到新數(shù)組中，否則不添加。其中第4行代碼利用新數(shù)組的indexOf()方法，判斷如果返回值為-1就說明新數(shù)組里面沒有該元素。

二、利用splice()方法去重

splice()方法可以刪除數(shù)組內(nèi)容，用法為：

splice(元素下標(biāo), 刪除元素個(gè)數(shù)(可以為0), 要添加的元素(可以不寫))

<script>
    arr = ['blue', 'green', 'blue', 'yellow', 'black', 'yellow', 'blue', 'green', 'blue', 'blue', 'blue'];
    function unique(arr) {
        for (let i = 0; i < arr.length; i++) {
            for (let j = i + 1; j < arr.length; j++) {
                if (arr[i] == arr[j]) {
                    arr.splice(j, 1);
                    j--;
                }
            }
        }
        return arr;
    }
    console.log(unique(arr));          // 輸出結(jié)果: (4) ["blue", "green", "yellow", "black"]
</script>

三、利用ES6 Set去重

ES6提供了新的數(shù)據(jù)結(jié)構(gòu)Set。它類似于數(shù)組，但是成員的值都是唯一的，沒有重復(fù)的值。

<script>
    arr = ['blue', 'green', 'blue', 'yellow', 'black', 'yellow', 'blue', 'green', 'blue', 'blue', 'blue'];
    function unique (arr) {
        return Array.from(new Set(arr));
    }
    console.log(unique(arr));       //輸出：(4) ["blue", "green", "yellow", "black"]
</script>

四、利用sort()方法排序，然后對(duì)比前后元素

<script>
    arr = ['blue', 'green', 'blue', 'yellow', 'black', 'yellow', 'blue', 'green', 'blue', 'blue', 'blue'];
    function unique(arr) {
        if (!Array.isArray(arr)) {
            console.log('type error!')
            return;
        }
        arr = arr.sort()
        var arrry= [arr[0]];
        for (var i = 1; i < arr.length; i++) {
            if (arr[i] !== arr[i-1]) {
                arrry.push(arr[i]);
            }
        }
        return arrry;
    }
    console.log(unique(arr));       //輸出: (4) ["blue", "green", "yellow", "black"]
</script>

五、利用includes()方法檢測(cè)數(shù)組是否有某個(gè)元素

<script>
    arr = ['blue', 'green', 'blue', 'yellow', 'black', 'yellow', 'blue', 'green', 'blue', 'blue', 'blue'];
    function unique(arr) {
        if (!Array.isArray(arr)) {
            console.log('type error!')
            return;
        }
        var array =[];
        for(var i = 0; i < arr.length; i++) {
                if(!array.includes(arr[i])) {        //includes檢測(cè)數(shù)組是否有某個(gè)值
                        array.push(arr[i]);
                }
        }
        return array;
    }
    console.log(unique(arr));       // 輸出：(4) ["blue", "green", "yellow", "black"]
</script>

六、利用filter去重

<script>
    var arr = ['blue', 'green', 'blue', 'yellow', 'black', 'yellow', 'blue', 'green', 'blue', 'blue', 'blue'];
    function unique(arr) {
        return arr.filter(function(item, index, arr) {
            //當(dāng)前元素，在原始數(shù)組中的第一個(gè)索引==當(dāng)前索引值，否則返回當(dāng)前元素
            return arr.indexOf(item, 0) === index;});
    }
    console.log(unique(arr));   // 輸出：(4) ["blue", "green", "yellow", "black"]
</script>

七、利用Map數(shù)據(jù)結(jié)構(gòu)去重

<script>
    let arr = ['blue', 'green', 'blue', 'yellow', 'black', 'yellow', 'blue', 'green', 'blue', 'blue', 'blue'];
    let unique = (arr)=> {
        let seen = new Map();
        return arr.filter((item) => {
            return !seen.has(item) && seen.set(item,1);
        });
    };
    console.log(unique(arr));       //輸出： (4) ["blue", "green", "yellow", "black"]
</script>

猜你喜歡：

JS數(shù)組如何添加或刪除數(shù)組元素？

JavaScript數(shù)組類型檢測(cè)的方法

Javascript如何改變數(shù)組的長(zhǎng)度?

Javascript多維數(shù)組介紹

黑馬程序員web前端開發(fā)高手班