扩展的对象功能
- 可以直接写入变量和函数,作为对象的属性和方法
- 对象的方法扩展
💕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())