ES6学习二

29
五月
2021

扩展的对象功能

  1. 可以直接写入变量和函数,作为对象的属性和方法
  2. 对象的方法扩展

💕is():比较两个值是否严格相等(和===差不多)

Object.is(NaN,NaN) '/输出true,这是和===的不同点

💕assign():对象的合并,浅拷贝

Object. assgin(newobj,obj1,obj2,obj3,obj4)
//obj为要合并的对象,它返回的就是合并以后的新对象,也就是newobj

数组的扩展

数组的方法

💕from():能将伪数组转换成真正的数组

function add(){
    console.log(arguments)//这个打印出来的就是一个伪数组
    let arr = [].slice.call(arguments)//es5写法
    
    let arr = Array.from(arguments)//这就是es6写法
    let arr =[...arguments]//最简单写法
    let arr = Array.from(arguments,ele=>ele+ele)
    //接收第二个参数,用来对每个元素进行处理,类似数组的map方法映射
}
add(1,2,3)

💕Of():将任意的数据类型,转换成数组

💕find()和findIndex():查找数组元素,和元素下标

[1,2,3,4,5,6,7].find(n=>n>3)//找出第一个符合条件的数组成员,这里是4

💕entries()(对键值对的遍历)

💕value()(对值的遍历)

💕keys()(对键的遍历)

上面三个都返回一个遍历器,可以使用for...of循环进行遍历

for(let i of [1,2,3,4,5,6,7].entries() ){
    console.log(i)//打印出[0,1] [1,2]........
}
let arr = [1,2,3,4,5,6,7].entries()
arr.next().value//遍历第一次
arr.next().value//遍历第二次
arr.next().value//遍历第三次

💕includes()表示某个数组是否包含给定的值

if([1,2,3,4,5,6,7].indexOf(0)===1)//之前的写法
[1,2,3,4,5,6,7].includes(2)//true

💕copyWithin()将指定位置的成员复制到其他位置(会覆盖原有成员),用的不多

interator迭代器,新接口

是一种新的遍历机制,有两个核心
💕迭代器是一个接口,能快捷的访问数据,通过Symbol. interator来创建迭代器,通过迭代器的next()
方法,获取迭代之后的结果
💕迭代器是用于遍历数据结构的指针(数据库的游标)

const arr = ["aa","bb","cc"]

const items = art[Symbol.interator]()//创建新的迭代器

items. next()//会发现这个迭代器上面拥有唯一的一个方法next()

//返回的是一个包含value和done属性的对象
//其中done表示是否遍历完成true为已完成,value表示“aa”

Generator生成器,新的函数

💕可以通过yield关键字,将函数挂起,为了改变执行流提供了可能性,同时为了做异步编程也提供了方案。
💕和普通函数的区别:

  • 在function后面,函数名前面有个*
  • 只能在函数内部使用yield,将函数挂起

 💕当调用这个生成器的时候,会返回一个遍历对象,可以调用next()
💕总结:Generator函数是分段执行的,yield语录就是暂停执行,而next方法就是继续执行。一个yield对应一个next()

function* add(){
      //x可真的不是yield 2的返回值,它是next()调用,恢复当前yield执行传入的实参
      console.log('开始')
      let x = yield 2;
      console.log('x:'+x)
      let y = yield 3;
      console.log('y:'+y)
      console.log(x+y)
 }
 const fu = add()

console.log(fu.next())
//打印出开始和value: 2, done: false
/**
next表示开始执行了,进去add方法打印出开始,(next这里不能传值,会报无效或意外标记错),然后继续走,碰到yield打印出来,然后把let x = ...这个语句挂起,未执行。
*/

fu.next(10)
//这里的next表示可以继续走,然后碰到第二个yield在把y=..挂起,let x = 10这里可以打印x:10

fu.next(20)//打印y:20。并打印出30

使用场景:
💕为不具备interator接口的对象提供了遍历操作
💕异步应用

function* main(){
      let res1 = yield request('url1')//yield需要在一行
    
      console.log(res1) //打印出'url1'接口返回的值,然后继续后面的操作
    
      let res2 = yield request('url2')
      console.log(res2) //打印出'url2'接口返回的值,然后继续后面的操作

}
const ite = main()
ite.next() //这时候开始进去main,并把let res= ...挂起

function request(url){
    let res = this.http.yhaoPostBeta(url)
    if(!res){ //如果接口访问成功
    ite.next(res)
    /**
        这时候就继续走main里面的打印语句
        并且res拿到了赋值,这个值就是'url'接口返回的值
    */
     }
}

还可以用于加载Loading...页面
数据加载完成......(异步操作)
Loading关闭

Promise对象 承诺

💕相当于一个容器,保存着未来才会结束的事件(异步操作)的一个结果
💕各种异步操作都可以用同样的方法进行处理 axios内部就是用Promise
💕特点:
对象的状态不受外界影响,处理异步操作。有三个状态,pending(进行中) fulfilled(已成功)和rejected(已失败)
一旦状态改变(进行-成功或者进行-失败),就不会在变化逆转,任何时候都可以拿到这个结果(成功或者失败)
💕Promise的基本用法

new Promise(function(resolved,rejected){
  let res = {
    code:200,
    data:{
      name:'lct',
      age:20,
    },
    error:'错误'
  }
  setTimeout(()=>{ //模拟访问接口
    if(res.code === 200){ //访问成功的时候
      resolved(res.data) //返回成功,给then传res.data
    }else{
      rejected(res.error) //返回失败给then传res.error
    }
  },1000)
})
/*
    Promise实例生成以后,可以用then分别指定
    resolved和rejected状态的回调函数。
*/
.then( //也是接收2个参数,一个成功一个失败
  (val)=>{ //成功的时候
    //这里的val就相当于上面的red.data
    console.log(val) //打印出data内容
  },(err)=>{ //失败的时候
    console.log(err) //打印出error内容
  }
)

 改造上面的代码,上面的代码不能传入参数,一般我们会在外界的方法里面返回一个Promise对象,然后通过这个外界方法.then就能获取到Promise成功或者失败的数据啦

function timeOut(ms){
  return new Promise(function(resolved,rejected){
    setTimeout(function(){
      resolved('成功')
    },ms)
  })
}
timeOut(2000).then((val)=>console.log(val))

Promise的各种回调函数:

💕then()回调函数,第一个参数是resolved回调函数,第二个参数是可选的,是rejected状态回调函数,而rejected状态的回调函数一般用catch(err=>{})捕获异常。
then()返回一个新的promise函数,可以采用链式编程,一般不用
💕resolve():能将现有的任何对象转换成为一个promise对象
Promise.resolve('foo') 
等价于
new Promise(resolve => resolve('foo'))
💕reject():同上,只不过是resolve变成reject
💕all():一些游戏类的文件比较多,等待图片,flash,静态资源都加载完成,才进去页面就用这个
const p = Promise.all([p1, p2, p3]);
p的状态由p1、p2、p3决定,三个都成功才成功,三个有一个失败都是失败
💕race():给某个异步的请求设置超时的时间,并且在超时后执行相应的操作
const p = Promise.race([p1, p2, p3]);
只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。
那个率先改变的 Promise 实例的返回值,就传递给p的回调函数
可以用于图片请求超时.......,超时了,还没获取到成功回调,就直接走失败回调,报出请求超时的错误
💕finally():用于指定不管 Promise 对象最后状态如何,都会执行的操作。

async

作用:使得异步操作更方便,解决回调地狱的问题
基本操作,async它会返回一个promise对象,就可以用then(),catch()
async它是Generator的一个语法糖
await:
try...catch:

class类

    let name = 'lct'
    let age = 20
    class Person{
      constructor(name1,age1){ //构造函数,实例化的时候就会立即执行
        name = name1;
        age = age1
      }
      sayName(){
        return name
      }
      sayAge(){
        return age
      }
    }
    let p1 = new Person('lct',20)
    console.log(p1.sayName()) //lct

    console.log(p1.sayAge()) //20

    let name = 'lct'
    let age = 20
    class Person{
      constructor(name1,age1){
        name = name1;
        age = age1
      }
    }
    // 通过Object.assign方法一次性向类中添加多个方法
    Object.assign(Person.prototype,{
      sayName(){
        return name
      },
      sayAge(){
        return age
      }
    })
    let p1 = new Person('lct',20)
    console.log(p1.sayName())//lct
    console.log(p1.sayAge())//20

继承以及重写

💕继承:

let name = 'lct'
let age = 20
let color = 'red'
class Animal{
  constructor(name1,age1){
    name = name1
    age = age1
  }
  sayName(){
    return name
  }
  sayAge(){
    return age
  }
}
class Dog extends Animal{
  constructor(name,age,color1){
    super(name,age)
    // 相当于Animal.call(name,age)
    color = color1
  }
  sayColor(){
    return color
  }

💕重写 :

sayName(){
    return super.sayName()+color
  }
}
let lulu = new Dog('露露',1,'巧克力')
console.log(lulu.sayName())
console.log(lulu.sayColor())

 

TAG

网友评论

共有访客发表了评论
请登录后再发布评论,和谐社会,请文明发言,谢谢合作! 立即登录 注册会员