首页 > 其他分享 >前端八种去重方法

前端八种去重方法

时间:2023-02-11 21:26:18浏览次数:29  
标签:arr console log newArr 前端 八种 item const 方法

<script>
        // 第一种 ES6 new Set 
        let arr = [1, 2, 3, 2, 1, 4, 5, 4]
        const result = Array.from(new Set(arr));
        const result1 = [...new Set(arr)];
        console.log(result);
        console.log(result1);
        // 第二种 双重for循环与splice
        function uniqueFun2(arr) {
            let len = arr.length;
            for (let i = 0; i < len; i++) {
                for (let j = i + 1; j < len; j++) {
                    if (arr[i] === arr[j]) {
                        arr.splice(j, 1);
                        len--;
                        j++;
                    }
                }
            }
            return arr;
        }
        console.log(uniqueFun2(arr));

        // 第三种 indexOf
        function uniqueFun3(arr) {
            const newarr = [];
            arr.forEach(item => {
                // 等于-1 表示不存在 
                if (newarr.indexOf(item) === -1) {
                    newarr.push(item);
                }
            })
            return newarr;
        }
        console.log(uniqueFun3(arr));

        // 第四种 includes
        function uniqueFun4(arr) {
            const newArr = [];
            arr.forEach(item => {
                if (!newArr.includes(item)) {
                    newArr.push(item);
                }
            });
            return newArr;
        }
        console.log(uniqueFun4(arr));

        //第五种 filter()+indexOf()
        function uniqueFun5(arr) {
            return arr.filter(function(item, index) {
                return arr.indexOf(item) == index;
            })
        }
        console.log(uniqueFun5(arr));

        //第六种 Map() 数据结构
        function uniqueFun6(arr) {
            const map = new Map();
            const newArr = [];
            arr.forEach(item => {
                if (!map.has(item)) {
                    map.set(item, true);
                    newArr.push(item)
                }
            });
            return newArr;
        }
        console.log(uniqueFun6(arr));

        //第七种 对象属性特征(不推荐)
        function uniqueFun7(arr) {
            const newArr = [];
            const obj = {};

            arr.forEach(item => {
                if (!obj[item]) {
                    newArr.push(item);
                    obj[item] = true;
                }
            });
            return newArr;
        }
        console.log(uniqueFun7(arr));

        //第八种 reduce与includes方法
        function uniqueFun8(arr) {
            return arr.reduce(
                (prev, cur) => (prev.includes(cur) ? prev : [...prev, cur]), []
            )
        }
        console.log(uniqueFun8(arr));
</script>

 

标签:arr,console,log,newArr,前端,八种,item,const,方法
From: https://www.cnblogs.com/i269/p/17112573.html

相关文章