Es6(Symbol,set,map,filter)
首先再讲这几个新东西之前,先说一个Es6中新出的扩展运算符(...)
1.展开运算符,就是把东西展开,可以用在array和object上
比如:
let a=[1,2] let b=[0,...a,3]//[0,1,2,3]
第二个是剩余操作符,是解构的一种,把剩余的东西放到一个array里面赋值给他,一般只针对array的解构
let a=[1,2,4] let [b,...c]=a;//b:1,c:[2,4] let a=[1,2,3] let [b,...[c,d,e]]=a;//b:1,c:2,d:3,e:undefined
Symbol
Symbol是一个新的基本数据类型,而且是一个值类型的
使用Symbol函数执行得到一个Symbol数据类型
Symbol跟字符串差不多,但是使用Symbol函数得到一个数据,每一个是完全不同的
Symbol可以接受一个参数()是对这个symbol数据的描述
即使描述一样但是,值也是不同
一般当做对象的属性,任意一个Symbol()得到的值都是不同的
let sym1=Symbol(); let sym2=Symbol(); console.log(typeof sym1);//symbol console.log(typeof sym1);//symbol console.log(sym1===sym2);//false
symbol值不可以跟其他值计算,即不可以转为数字,也不可以进行字符串的拼接,但是可以转为布尔值,也可以调用toString方法,显示字符串
let obj={ sym1:"jeo",[sym1]:"jack"} console.log(obj); obj[sym2]="rose"; console.log(obj); console.log(Symbol("js").toString());//返回一个Symbol类型的字符串
Symbol.for()如果之前有相同参数的Symbol的值,找到这个值返回,如果没有就创建一个新的Symbol值
使用Symbol.for()参数相同,值就是相同
let s1=Symbol.for("js") let s2=Symbol.for("js") console.log(s1==s2);//true
Symbol.keyFor(symbol值)找到使用Symbol.for创建的值的描述
console.log(Symbol.keyFor(s1));//js
Set
- 类似数组,只有值value,没有键key
- 通过构造函数方式创建一个Set实例(对象)
- 参数是一个数组(或者是类似数组,只是有iterable接口)
- 有iterable接口:数组,arguments,元素集合,set,map,字符串
- 默认去重
console.log(new Set([1,2,3,4]));//Set(4) {1, 2, 3, 4} console.log(new Set("1234"));//Set(4) {"1", "2", "3", "4"} function fn(){ console.log(new Set(arguments)) } fn(1,2,3,4)//Set(4) {1, 2, 3, 4}
- size set实例大小的个数
- add(如果之前有就加上,如果没有就不增加,返回值是增加后的实例,参数默认增加一个) clear(清空,没有返回值,undefined,没有参数) delete(返回布尔值) has(判断有没有此项,返回值true/false)
//add可以实现链式写法 let set1=new Set([1,2,3]) console.log(set1.add(4).add(5));
- forEach(遍历)
let set1=new Set([1,2,3]); set1.forEach((...rest)=>{ console.log(rest); })
let set1=new Set([1,2,3]); set1.forEach((item, index,input)=>{ //set实例只有value没有key
//item,index:当前项value
//input:当前set实例
})
- keys
let set1=new Set([1,2,3]);
for(let key of set1.keys()){
//拿到的还是value值
console.log(key);
}
- values
let set1=new Set([1,2,3]); for(let val of set1.values()){ console.log(val); }
- entries(拿到的是value值)
let set1=new Set([1,2,3]); for(let [item,val] of set1.entries()){ //item,val都是value值
console.log(item,val); }
应用场景:
1.数组去重
let arr=[1,23,4,35,23,12,3,1,2]; function arrPure(arr){ // return [...new Set(arr)]; return Array.from(new Set(arr)) } arr=arrPure(arr); console.log(arr);
2.求两个集合的并集
let a=[1,23,45,4,3,2,1]; let b=[2,23,5,3,5,6,78]; function add(a,b){ let arr=[...a,...b]; console.log(...new Set(arr)); } add(a,b)
3.求两个集合的交集
function same(a,b){ return a.filter(item=>b.includes(time))
4.求两个集合的差集
function diff(a,b){ return a.filter(item=>!b.includes(item))+b.filter(item=>!a.includes(item))
Map
- 构造函数创建一个Map实例,返回一个
- new Map([[key,value],[]])
- 参数是一个数组,数组每一项也是一个数组,有两项key,value
- 一个对象 属性名必须是字符串,如果你写的不是字符串也默认转为字符串
let ary=[1,2],o={}; let obj={ name:'jeo', ary, [o]:o, } console.log(obj) /** *{name: "jeo", ary: Array(2), [object Object]: {…}} [object Object]: {} ary: (2) [1, 2] name: "jeo" __proto__: Object */
- Map实例的key可以是任意数据类型
let m1=new Map([[1,"jeo"],[true,'rose'],[{name:"jack"},{name:23}]]) console.log(m1)
size:键值对的个数
let m1=new Map([[1,"jeo"],[true,'rose'],[{name:"jack"},{name:23}]]) m1.get(1)//jeo
get(获取值),set(可以实现链式写法),has判断key有没有对应的value,有就是true,没有就是false
let m1=new Map([[1,"jeo"],[true,'rose'],[{name:"jack"},{name:23}]]) m1.forEach((key,value,input)=> { console.log(key) console.log(value) console.log(input) })//key是属性名,value是属性值,input是Map实例
给定一个数组变成Map实例
let arr=['js','vue','react','node'] let m1=new Map(); for(let [index,item] arr.entries()){ m1.set(index, item)} console.log(m1);/*Map(4) {0 => "js", 1 => "vue", 2 => "react", 3 => "node"} size: (...) __proto__: Map [[Entries]]: Array(4) 0: {0 => "js"} 1: {1 => "vue"} 2: {2 => "react"} 3: {3 => "node"} length: 4 */
map():
map和forEach等遍历方法不同,在forEach中return语句是没有任何效果的,而map则可以改变当前循环的值,返回一个新的被改变过值之后的数组,一般用来处理需要修改某一个数组的值
filter用于吧Array的某些元素过滤掉,然后返回剩下的元素(filert()接收一个函数,把传入的函数依次作用域每个元素,然后在根据返回值是true还是false决定保留还是丢弃元素)
- 用filter选择数组中的奇数
function filterUse(){ let arr=[1,2,3,7,9,3]; var r=arr.filter(x=>x%2!==0) console.log(r); } filterUse();
- 利用filter实现去除重复元素,思想是:indexOf
总是返回第一个元素的位置,后续的重复元素位置与indexOf
返回的位置不相等,因此被filter
滤掉了。
function filterUse(){ let arr=[1,2,3,7,9,3]; let r=arr.filter(function(element,index,self){ return self.indexOf(element)===index; }) console.log(r); } filterUse();