JS数组去重7种方法

一、利用 indexOf () 方法去重

方法名	功能描述
indexOf()	返回在数组中可以找到给定值的第一个索引，如果不存在，则返回 – 1
lastIndexOf()	返回指定元素在数组中的最后一个的索引，如果不存在则返回 – 1

| 检索方法 |

接下来我们通过一个案例来演示数组索引的使用。要求在一组数据中，去除重复的元素。其中数组为 [‘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));          // 输出结果: (4) ["blue", "green", "yellow", "black"]
</script>

 

上述代码中，第 2 行代码定义了新数组 newArr，用来存放数组中不重复的元素。第 3~7 行代码遍历了旧数组 arr，然后拿着旧数组元素去查询新数组，如果该元素在新数组中没有出现过，那么就添加到新数组中，否则不添加。其中第 4 行代码利用新数组的 indexOf () 方法，判断如果返回值为 – 1 就说明新数组里面没有该元素。

二、利用 splice () 方法去重

splice () 方法可以删除数组内容，用法为：

splice(元素下标, 删除元素个数(可以为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));          // 输出结果: (4) ["blue", "green", "yellow", "black"]
</script>

 

三、利用 ES6 Set 去重

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

<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 () 方法排序，然后对比前后元素

<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 () 方法检测数组是否有某个元素

<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检测数组是否有某个值
                        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) {
            //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
            return arr.indexOf(item, 0) === index;});
    }
    console.log(unique(arr));   // 输出：(4) ["blue", "green", "yellow", "black"]
</script>

 

七、利用 Map 数据结构去重

<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>