Js数组去重的几种方式

最新推荐文章于 2025-12-20 12:23:55 发布

原创最新推荐文章于 2025-12-20 12:23:55 发布 · 235 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

本文展示了在Vue应用中，使用多种方法（如Set、循环遍历、filter、Map等）对数组进行去重的过程，对比了不同方法的性能和适用场景。

<template>
  <div >
    <ul>
        <li v-for="(num, index) in arr" :key="index">
            {{ num }}
        </li>
    </ul>
    <button @click="noRepeat">去重</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
let arr = ref([1,2,3,4,5,6,7,8,9,10,1,3,4,5,2,3,12,6,2]);
function noRepeat(){

    // arr.value = [...new Set(arr.value)]

    /*for(let i = 0; i < arr.value.length; i++){
        for(let j = i + 1; j < arr.value.length; j++){
            if(arr.value[i] == arr.value[j]){
                arr.value.splice(j, 1);
                j--;
            }
        }
    }*/

    /*let uniqueArr = [];
    for(let i = 0; i < arr.value.length; i++){
        if(uniqueArr.indexOf(arr.value[i]) === -1){
            uniqueArr.push(arr.value[i]);
        }
    }
    arr.value = uniqueArr;*/

    /*arr.value.sort((a,b) => a-b);
    let uniqueArr = [arr[0]];
    for(let i = 1; i < arr.value.length; i++){
        if(arr.value[i] === arr.value[i-1]){
            uniqueArr.push(arr.value[i]);
        }
    }
    arr.value = uniqueArr;*/

    /*let uniqueArr = [];
    for(let i = 0; i < arr.value.length; i++){
        if(!uniqueArr.includes(arr.value[i]))
            uniqueArr.push(arr.value[i])
    }
    arr.value = uniqueArr;*/

    /*arr.value = arr.value.filter(function(item, index, arr){
        return arr.indexOf(item, 0) === index;
    })*/

    /*let map = new Map();
    let array = new Array();
    for(let i = 0; i < arr.value.length; i++){
        if(!map.has(arr.value[i])){
            map.set(arr.value[i], false);
            array.push(arr.value[i]);
        }
    }
    arr.value = array;*/
    
    arr.value = arr.value.reduce((prev,curr) => prev.includes(curr) ? prev : [...prev, curr] ,[])
}
</script>

<style scoped lang='less'>
</style>