JavaScript基础方法

数组去重

基础版-双循环/循环+indexOf去重

function unique(arr) {
    if(!Array.isArray(arr)){
        console.error('type error');
        return
    }
    let result = [arr[0]]
    for(let i = 1; i < arr.length; i++) {
        let pushFlag = false;
        //方式一开始
        for(let j = 0; J < result.length; j++){
            if(arr[i] === result[j]){
                pushFlag = false;
                break;
            }
        }
        if(pushFlag){
            result.push(arr[i])
        }
        //方式一结束
        
        //方式二开始
        for(let j = 0; J < result.length; j++){
            if(result.indexOf(arr[i]) === -1){
                result.push(arr[i])
            }
        }
        //方式二结束
    }
    return result
}

排序相邻元素去重

function unique(arr){
    //arr类型前置判断省去
    arr = arr.sort()
    let result = [],
        i=0;
    for (i; i < arr.length; i++) {
        if (arr[i] !== arr[i-1]) {
            result.push(arr[i])
        }
    }
    return result
}

利用对象键值对过滤进行去重

function unique(arr){
    //arr类型前置判断省去
    let result = [],
        obj = {},
        i = 0;
    for(i;i<arr.length;i++){
        if(!obj[arr[i]]){
            result.push(arr[i])
            obj[arr[i]] = 1;
        } else {
            obj[arr[i]]++
        }
    }
    return result
}

ES5方式实现

function unique(arr){
    //arr类型前置判断省去
    return arr.filter((item,index,arrary)=>{
    //避免API被污染可以用原型方式 - Array.prototype.filter.call(arr,()=>{})
        return arrary.indexOf(item) === index
    })
}

ES6实现Set和Array.from

new Set(arr)是将结果转换为不重复的数据集，此时的数据集类型为Set格式，需要进行数组解构或者Array.from进行转换使用

//arr类型前置判断省去
let newArr = arr => [...new Set(arr)]
//Array.from替换结构，原理相同，都是将Set结构的数据转换为数组数据
let result = arr => Array.from(new Set(arr))

特殊情况分析

事件总线

class类方式

class EventEmitter {
    constructor() {
        //初始化事件列表
        this.cache = {}
    }
    //订阅事件
    subscribe(name,fn) {
        if(this.cache[name]){
            //可以采用对象的方式进行存储  删除的时候比数组的方式性能好一些
            this.cache[name].push(fn)
        } else {
            //初始化事件
            this.cache[name] = [fn]
        }
        //在订阅事件的时候可以返回唯一id的unsubscript事件进行定回调的取消订阅，代替简单通过函数对比进行卸载，订阅者在订阅的时候可以进行定向的接收，从而实现定向的回调卸载；
    }
    //卸载事件
    unSubscribe(name,fn) {
        let target = this.cache[name]
        if(!fn){
            delete this.cache[name];
            return consolr.log(name + '事件已全部卸载！')
        }
        if(target) {
            const index = target.findIndex(f => f === fn || f.callback === fn)
            if(index > -1){
                target.splice(index,1)
            }
        }
    }
    //发布事件
    publish(name,once = false,...args) {
        if(this.cache[name]) {
            //取出当前事件的所有回调函数 避免回调函数中再次注册回调函数造成死循环
            let copyCache = this.cache[name].slice();
            for(let fn of copyCache) {
                //发布时进行相关的传参
                fn(...args)
            }
            if(once) {
                //当是一次性函数时进行销毁事件
                delete this.cache[name]
            } 
        } else {
            return console.error(name + "not found!")
        }
    }
}

实例引用

const event = new EventBus(); 
event.subscribe("Lbxin", (data) => { console.log("Lbxin-A",data); }); 
event.subscribe("Lbxin", (data) => { console.log("Lbxin-B",data); }); 
event.subscribe("Lbxin", (data) => { console.log("Lbxin-C",data); }); 
event.publish("Lbxin",false,{class: 11});