javascript-ES6一

let、var、const的区别

let const没有变量提升
有着严格的作用域
同一个作用域下不能重复定义同一个名称

ES6中的类,其实是函数的一种。class Person{…}做了什么呢?

  1. 创建一个名为Person的函数,该函数将成为类声明的结果。
  2. 在Person.prototype中存储了所有方法,例如changeName,同时,constructor属性也指向Person。
    如果没有new,无法调用类构造函数。
    类中的方法是不可枚举的,对于原型中的所有方法,类定义将enumberable枚举设为false。
    类总是使用严格模式。

之前的的语法类

function Person(name){
this.name=name;
}
//静态方法
Person.getClassName=function(){
return 'Person';
}
Person.prototype.changeName=function(name){
this.name=name;
}
//var p=new Person('leo');
//console.log(p)
//定义一个新的属性
Object.defineproperty('Person.prototype','info',{
  get(){
   return 'name'+this.name;
  }
});
//子类
function Son(name,age){
Person.call(this,name);
this.age=age;
}
//继承原型上的方法
Son.prototype=Person.prototype;
//添加新方法
Son.prototype.changeage=function(){
  this.age=age;
}
var son=new Son('leo',22);
son.changeName('wangsan');
console.log(son.name)//wangsan

es6的定义类

知识点:super的用处:

  • super指的是父类的构造函数,用来改变this指向的,相当于call、apply方法。
  • 为什么要调用?如果没有调用super,直接去获取this.name是没有定义的,javascript不会让你再没有执行父构造函数就去使用this。
'use strict'
//function Person(name){
//this.name=name;
}
class Person{
  constructor(name){//默认自定加入constructor
  this.name=name;
  }

//静态方法
//Person.getClassName=function(){
//return 'Person';
//}
static getClassName(){
   return 'Person'
}
//原型上加方法
//Person.prototype.changeName=function(name){
//this.name=name;
//}
changeName(name){
 this.name=name;
}
//定义一个新的属性
//Object.defineproperty('Person.prototype','info',{
//  get(){
  // return 'name'+this.name;
 // }
//});
get info(){
return 'name'+this.name
}
}
//子类
//function Son(name,age){
//Person.call(this,name);
//this.age=age;
//}
class Son extends Person{
  constructor(name,age){
    super(name);//有extends就固定加上super,super()负责初始化this,相当于call apply  添加都父对象中
    this.age=age;
}
//添加新方法
//Son.prototype.changeage=function(age){
 // this.age=age;
//}
changeage(age){
this.age=age;
}
get info(){
  var info=super.info;
  console.log(info);//父类的
}
}
//var son=new Son('leo',22);
//son.changeName('wangsan');
//console.log(son.name)//wangsan

promise的认识

  • promise.all():将多个promise实例包装成一个新的promise实例。成功时返回一个数组,失败时只返回reject的值。输出结果的顺序按照all的顺序输出。适合发送多个请求,并根据请求的顺序获取和使用数据。
  • promise.race():哪个快,就返回哪个。无论失败还是成功。适合测试接口的反应速度。
function asyncFun(a,b, time){
return new Promise(function(resolve,reject){
if(typeof a !==' Number'||typeof b!=='Number'){
   reject(new Error('no number'));//异常捕获 通过.catch或者resolve的第二参数捕获到,两者区别是:如果在resolve发生错误,那么catch才能捕获到,then的第二个参数捕获不到。
   
}
  setTimeout(function(){
   return a+b;
},time);
});

};
//.then无论返回任何都会成为promise继续往后走
 asyncFun(1,2).then(function(result){//f返回的是promise对象
   if(result>2){
   return asyncFun(result,2);
},function(err){
  console.log('first:',err);//1.如果捕获到后面的就不运行了
}

}).then(function(result){
   if(result>4){
   console.log('ok')
   }
}).catch(function(error){
console.log('second:',error); //2.asyncFun(1,'a') no number
});

//promise的all方法 成的话返回的是一个数组。如果有错也会在catch中捕获
var promise=Promise.all(asyncFun(1,2),asyncFun(2,3),asyncFun(1,22));
promise.then(function(result){
  console.log(result);//和all中的顺序一致 不管时间[3,5,23]
});
//promise的race方法会排序 哪个先得到 就先打印哪个 返回是单一的,如果有错也会在catch中捕获
var promise=Promise.race(asyncFun(1,2,50),asyncFun(2,3,20),asyncFun(1,22,22));
promise.then(function(result){
  console.log(result);//5
});
//promise的静态方法resolve
var promise=Promise.resolve('hello');
//var promise=new Promise(resolve,reject){
// resolve('hello')
//}
promise.then(
function(result){
console.log(result);
});
//promise的reject
var promise2=Promise.reject('error');
promise2.then(null,function(err){
  console.log(err);
})

symbol的认识

*一旦定义常量就不会改变,可以用来做私有变量。
*遍历需要用Object.getOwnPropertySymbols()
*set 、map 都具有symbol.iterator接口,一个数据结构只要具有symbol.iterator属性,那么它就是可遍历的。iterator(遍历器)是一种接口,任何数据结构只要部署iterator接口,就可以完成遍历。可以为各种数据结构提供统一的遍历接口。使数据结构中的成员能够按照某种顺序排列。
详情

/*sybmol的遍历*/
'use strict';
let name=Symbol('name');
let obj={
age:22,
[name]:'leo'
};
//for(let k in obj){
//console.log(k)
//;}得不到
//console.log(Object.key(obj));false
//console.log(Object.getOwnPropertyNames(obj));false
var key=Object.getOwnPropertySymbols(obj)[0];
console.log(key);//leo
/**symbol.for he syymbol.keyFor*/
'use strict';
let name=Symbol.for('name');
let name2=Symbol.for('name');
console.log(name===name2);//true
console.log(Symbol.keyFor(name));//name 

/*Symbol.iteractor 方法 可以用来遍历对象中的值   for of 循环可以中途跳出*/
'use srict';
class Users{
constructor(user){//user对象 里面有name 那怎么获取name的值呢
/*user:{
'leo':'14141441','wangsan':'22222'
}*/
  this.user=user;
}
 [Symbol.iterator](){
//返回一个iterator
//获取user中的值
let self=this;
const names=Object.key(this.user);//遍历
const length=names.length;//usesr的长度
return {
   next:function(){
   let name=name[i];
   let qq=self.user[name];
   return {value:{name,qq} ,done:i>=length};//value是遍历的值没有就是undifined 如果都遍历完成done为true
}
}
}
let uu=new Users({'leo':'122222','wangsan':'2333444'});
let iterator=uu[Symbol.iterator]();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
}

Generactor函数的认识

generator是生成器
generator函数默认不会执行方法体内代码,会返回一个指针(指向return/yield),这个指针实现generactor,通过.next可以执行方法体。可以向同步写法一样实现异步,但是需要自己写执行器。可以通过co来简化执行器。

function * fn(){
  console.log('hello');
  yield1;//result的value为1,可以是多个值。可以没有return,如果是return 只能是一个值
}
let it=fn();
let result=it.next();//hello
//console.log(it.next());value:1,done:true
console.log(result);//value:return 回来的值。 done:函数是否执行完毕
/*yield 值默认返回undefined和赋值 只能通过next赋值访问*/
'use strict';
function * fn(name){
let name= yield _name;//yield 默认始终返回undefined 也就是name是undefined,可以通过next运行时赋值给它使其有返回值
return name;
}
let it= fn('leo');
console.log(it.next());//value:leo,done:true
console.log(it.next['wangsan']);//value:wangsan,done:true


'use strict';
/*yield 语句只能在generator中 即fn 前面必须有*  */
/*yield在什么位置*/
function * fn(){
  console.log('qq:'+(yield qq));//表达式使用需要使用(),其他时不用
}

/*yield默认情况下返回undefined值,不会抛出异常*/
function * fn(){
let qq=yield;
console.log(qq);
}
let g=fn();
g.next();
try{
g.throw('error');//捕获到异常 如果内部没有对异常try catch 会到外面进行处理
}catch(e){
 console.log('error2')}

set认识

通过new set()来创建set对象(类数组),自动去重。

/*set中的方法*/
let st=new Set();
let user={name:'leo',qq:'1222'};
st.add(user).add(user);//可以连续使用add 但是只保存一个 那NaN时,也是只能加一个
console.log(st.size);//1
let bool=st.delete(user);
console.log(bool);//true 删除了
st.add(22);
console.log(st.has(22));//tru判断有没有
st.clear();//清空

/*数组去重*/
let arr=[1,2,2,3,4];
Array.from(new Set(arr));//[1,2,3,4] 

/*set对象的遍历 数组的key==value*/
let st=new Set([1,2,3]);
let keys=st.keys();
for(let k of keys){
console.log(k)
};
/*遍历2 常用*/
let values=st.values();
for(let v in values){
console.log(v);
}
/* 可以直接遍历*/
for(let v of st){
  console.log(v);
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章