ES6学习二

扩展的对象功能

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())