ES6入门(3)

ES6基本用法(3)

今天学习了ES6中的Set、WeakSet、Proxy,Reflect
Set听名称就和Java中的HashSet一样,以前在JS中是去除重复值,在Java中也是去除重复值,那么下面我们就来看看。

{
    let list = new Set();
    list.add(1);
    list.add(2);
    list.add(1);
    console.log('list',list);//1,2
}

上面是一种先创建Set在进行赋值的操作,可以看到添加了3个元素:1,2,1 那么里面有2个1那么就会把重复的1给去掉

下面是第二种赋值方式

{
    let arr = [1,2,1];
    let list = new Set(arr);
    console.log('list',list);//1,2
}

上面是另一种赋值方式,已构造器的形式进行赋值

那么来说一下Set中的方法,除了add增加元素,那么还有has、delete、clear

{
    let arr = ['juqianwei','zhengshuang','zhoujielun','liyifeng'];
    let list = new Set(arr);
    console.log('has',list.has('juqianwei'));//true
    console.log('delete',list.delete('liyifeng'),list);//{"juqianwei", "zhengshuang", "zhoujielun"}
    console.log('clear',list.clear(),list);//{}
}

has是判断集合里面有没有这个值的存在,如果有返回true,没有就返回false,delete是删除元素,如果元素并且存在那么就删除返回true,如果不存在那么删除失败返回false,clear是清除集合中的所有元素 清除完后返回一个空集合{}

下面来讲一下Set集合中的遍历

{
   let arr = ['juqianwei','zhengshuang','zhoujielun','liyifeng'];
   let list = new Set(arr);
    
   for(let key of list.keys()){
       console.log('keys',key);//keys juqianwei keys zhengshuang keys zhoujielun keys liyifeng
   }

   for(let value of list.values()){
       console.log('value',value);//keys juqianwei keys zhengshuang keys zhoujielun keys liyifeng
   }

   for(let [key,value] of list.entries()){
       console.log('key-value',key,value);//keys juqianwei juqianwei keys zhengshuang zhengshuang keys zhoujielun  zhoujielun keys liyifeng liyifeng
   }
}

上面的遍历方式来看key,value都是集合元素中的值。我们试着将对象添加到set进行遍历

{
    let obj = {
        username: 'zhangsan'
    };

    let list = new Set();
    list.add(obj);

    for(let [key,value] of list.entries()){
        console.log('key--value',key,value);//key--value {username: "zhangsan"} {username: "zhangsan"}
    }
}

key和value获取到的还是一样的

WeakSet用的不是特别多,WeakSet的添加的元素只能是对象 方法和Set是一样的

{   
    let obj = {a: 1,b: 2};
    let weakList = new WeakSet();
    weakList.add(obj);
    console.log(weakList);
}

下面来讲一下Proxy和Reflect,看单词的意思代理和反射

{
    let obj = {
        time: '2019-04-30',
        name: 'apple',
        author: 'Jobs'
    };

    //上面定义了一个源数据
    let monitor = new Proxy(obj,{
        //拦截对象属性的读取
       
        // 拦截对象设置属性
        set(target,key,value){
            if(key === 'name'){
                return target[key] = value;
            }else{
                return target[key];
            }
        },
        get(target,key){
            return target[key];
        },
        //拦截key in object
        has(target,key){
            if(key === 'name'){
                return target[key];
            }else{
                return false;
            }
        },
        //拦截 delete
        deleteProperty(target,key){
            if(key === 'name'){
                delete target[key];
                return true;
            }else{
                return target[key];
            }
        },
        //拦截Object.keys,Object.getOwnPropertySymbols,Object.getPropertyNames
        ownKeys(target){
            return Object.keys(target).filter(item => item !='time');
        }
    });

    monitor.name = '华为公司';
    console.log('get',monitor.time);//get 2019-04-30
    console.log('set',monitor);//{time: "2019-04-30", name: "华为公司", author: "Jobs"}
    console.log('has','time' in monitor);//false

    // delete monitor.name;
    // console.log('delete',monitor);

    console.log('ownKeys',Object.keys(monitor));//["name", "author"]
}

Proxy实现了对源数据进行了代理,操作不会影响源数据,对数据进行了间接的保护,Proxy经常用到的几个方法、get、set、has、deleteProperty、ownKeys
get()设置获取拦截,set()设置修改拦截,deleteProperty()设置删除拦截,ownKeys()获取代理对象的所有属性键时触发该操作。