前面一篇大概说了下let const 数组以及对象的结构解析,以及扩展运算符
今天主要说一下set map 数据结构,symbol,class,箭头函数,下一篇在专门说一下Promise
Set
类似于数组,但值唯一的数据结构
Set对象的size属性返回Set实例的值的总数
Set对象的操作方法
add(value) =>添加某个值,返回Set结构本身
delete(value) =>删除某个值,返回一个布尔值,表示是否删除成功
has(value) =>返回一个布尔值,表示该值是否是Set的成员
clear() =>清除所有值,没有返回值
Set对象的遍历
keys() =>返回键名的遍历器
values() =>返回键值的遍历器
entries() =>返回键值对的遍历器
forEach((value,key)=>{}) =>使用回调遍历
Set数组去重
let arr = [11,22,33,44,55,11];
let set = new Set(arr);
let newArr = [...set]; //利用扩展运算符转换为数组
console.log(newArr);//[11, 22, 33, 44, 55]
注:Set只存值,所以key(),value() 返回的值是一样的。
Map
类似于对象,但键的返回不限制于字符串,各种数据类型都可以当做键的数据结构
Map的size属性返回Map实例的键值对总数
Map对象的操作方法
set(key,value) =>设置键名key,对应的键值为value。然后返回整个Map结构,如果key已有值,则键值会被更新,否则就新生成该键
get(key) =>读取key对象的键值,如果找不到对应的key,返回undefined
delete(key) =>删除某个某个键,返回一个布尔值,表示是否删除成功
has(key) =>返回一个布尔值,表示该键是否在当前Map中
clear() =>清除所有键值,没有返回值
Symbol
Symbol是一种新的数据类型,标识独一无二的值。
Symbol值通过Symbol函数生成
Symbol函数接受一个字符串为参数,标识对Symbol实例的描述
Symbol的主要作用是标识对象的属性名
注:Symbol值作为对象属性名时,不能用点运算符,在对象内部也不可以
let s1 = Symbol()
let s2 = Symbol()
colsole.log(s1 == s2 ) //false 说明Symbol是独一无二的值
Symbol遍历
let s1 = Symbol()
let s2 = Symbol()
let obj = {[s1]:'tom'}
obj[s2] = '张三'
let keys = Reflect.ownKeys(obj) //获取所有的key
class
class Person {
constructor (name,age){ //接受参数
this.name = name;
this.age = age
}
showName (){
console.log(`我的名字是${this.name}`)
}
showAge (){
console.log(`我的年纪是${this.age}`)
}
static sayHi(){ //静态方法
console.log('Hi......')
}
}
let p = new Person('张三',18);
p.showName();
p.showAge();
p.sayHi(); //报错
Person.sayHi() //正确
跟后端语音class一样,也拥有继承,使用class 代码会比较清晰
箭头函数
let sum = (x,y)=>{ //箭头函数取代function
console.log(x,y);
return x+y
}
sum(3,7)
箭头函数的this
function Timer(id) {
this.id = id; //this指向time
setTimeout(function () {
//输出undefined this指向window对象 其原因在于setTimeout挂载在window对象上。当调用setTimeout方法时 是window对象在调用
console.log(this,this.id)
},500)
}
let time = new Timer('500')
在上面的代码中为啥是输出undefined。 其原因是this的指向。上面代码中的两个this指向不同的对象,第一个this是指向Timer('500')实例 第二个this指向window对象。
es5中可通过bind改变this指向来完成绑定id
setTimeout(function () {console.log(this,this.id) }.bind({id:id}),500)
将上面代码改造为
function Timer(id) {
this.id = id;
setTimeout(()=> {
console.log(this,this.id)//正常输出500
},500)
}
let time = new Timer('500')
function跟箭头函数的区别
function 调用的时候 谁调用 this指向谁
箭头函数 定义的时候 this属于谁,就指向谁。上面代码中是在new Timer的时候被定义
网友评论