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'));//trueconsole.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 objecthas(target,key){if(key === 'name'){return target[key];}else{return false;}},//拦截 deletedeleteProperty(target,key){if(key === 'name'){delete target[key];return true;}else{return target[key];}},//拦截Object.keys,Object.getOwnPropertySymbols,Object.getPropertyNamesownKeys(target){return Object.keys(target).filter(item => item !='time');}});monitor.name = '华为公司';console.log('get',monitor.time);//get 2019-04-30console.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()获取代理对象的所有属性键时触发该操作。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！