快速成为js高手-ES6语法二

一、箭头函数

1.1基本语法

【出现目的】：方便回调函数写法

语法：（形参）=>{函数体}

//函数声明式
function fn(){
console.log('普通函数')
}

//函数表达式(命名函数)  对匿名函数进行命名
var fn=funcion(){
    console.log('命名函数')
}

//创建箭头函数
var fn= ()=>{console.log('箭头函数')}

1.2箭头函数的简写方式

1.2.1无参数无返回

let fn= ()=> console.log('无参数无返回')
fn()

1.2.2无参数有返回

let fn= ()=> '无参数有返回'
fn()

1.2.3有参数无返回

let fn=a=>console.log('有参数无返回'+a)
fn(10)

1.2.4有参数有返回

let fn=(x,y)=>{let sum=x+y;return sum}

1.2.5有参数，返回一个对象的函数

function fn(x,y){
return {a:x,b:y}
}
console.log(fn(10,20))

let fn=(x,y)=>{
return {a:x,b:y}
}
console.log(fn(10,50))

1.2.6 :注意点

// 1.如果函数只有一句话，可以省略不写{}
// 2.如果函数只有一句话并且有返回值，可以不写{}并且省略return
// 3.如果函数只有一个参数可以省略不写()
// 4.有多个参数不能省略(),有多个函数体语句不能省略{}
// 5.返回一句话，并且是第一个对象，不能简写（对象的{}和函数的{} 分不清）
// 6.箭头函数内部不支持arguments参数，但是可以使用...rest参数（不能省略()）

1.3 this指向

this指针 的指向问题

1.3.1 全局使用this --- 指向window

console.log(this)

1.3.2函数全局调用 this ---- 指向window

function fn(){
console.log(this);
}
fn();

1.3.3对象方法中使用this --- 指向对象

let obj ={
	name:'lh',
	age:20,
	eat:function(){
		console.log(this)
	},
	sleep(){
		console.log(this)
	}
}
obj.eat();
obj.sleep();

1.3.4 事件中使用this --- 指向事件源

var btns =document.getElementsByTagName('button')
console.log(btns);
for(var i=0;i<btns.length;i++){
    btns[i].onclikc=function(){
        console.log(this)
    }
}

1.3.5定时器中使用this --- 指向window

setTimeout(function(){
	console.log(this);
},1000)

1.3.6总结

//1.默认（全局环境）this就是指向window
//2.在使用对象.方法() 时改变this指向

1.4箭头函数使用this

1.
2.对象.方法调用 指向该对象
3. 箭头函数中使用  （不会改变this指向）箭头函数中没有作用域 ，指向外层作用域执行环境

var name="wName";
var obj={
    neme:"oName",
    eat:funtion(){
    	console.log(this.name)
	}
    //对象方法的简写（和箭头函数没有关系）
    play(){
    	console.log(this.name)
	}
//对象的方法（包括事件绑定） 不能使用箭头函数 ---- 内部发this无法指向该对象
	sleep:()=>{//箭头函数
    	console.log(this.name)
	}
}
obj.eat();// this --obj
obj.play();// this -- obj
obj.sleep();// this --

二、promise对象

1.创建Promise对象

var p=new Promise((resolve,reject)=>{//回调函数
	//这个回调函数  接收两个参数  resolve（决定），reject（拒绝）（官方定义）
   //resolve,reject 这两个参数都是函数
})

2.三个状态

//默认  pending(悬而未决)
//成功 fulfilled(成功，完成)
//失败 rejected(拒绝)

2.1【变化过程】

var p=new Promise((resolve,reject)=>{
	resolve(); // 从pending --->  fulfilled
    reject();  // 从pending --->  rejected
})

3.[Promise特点]：

//1.状态只会在内部改变，不受外界影响
//2.一旦状态发送改变，就不再变化（以凝固，以定型）

4.完整的Promise写法

// Promise 对象 解决异步编程的问题
//假装请求返回的状态
var page = true
// Promise 是同步的
var p = new Promise((resolve, reject) => {
     if (page) {
           resolve('成功')//将状态改为成功
      }else {
           reject('失败')//将状态改为失败
     }
           console.log('p里面');
})
// 不管是resolve 还是reject 返回的结果都在外部处理
// then函数 处理 请求成功后返回的结果
// catch函数 处理 请求失败返回的结果

//本质上then 和catch 方法是异步的
p.then(res => {
       console.log('操作结果:' + res);
       console.log('then里面');
}).catch(err => {
       onsole.log('操作结果:' + err);
})
//同步
console.log('全局');

4.1简化后Promise写法

// 使用函数封装请求 ，并且使用对象的简化写法传参
function getAjaxPromise(url, type, index) {
      return new Promise((resolve, reject) => {
      $.ajax({
           url,
           type,
           success(res) {
                 resolve(index);
           },
           error(err) {
                 reject(err);
           }
       })
    })
}

var p1 = getAjaxPromise('http://kumanxuan1.f3322.net:8809/index/banners/travel', 'GET', 1)
var p2 = getAjaxPromise('http://kumanxuan1.f3322.net:8809/strategies/themes', 'GET', 2)
var p3 = getAjaxPromise('http://kumanxuan1.f3322.net:8809/index/banners/strategy', 'GET', 3)

p1.then(res => {
      console.log(res);
      return p2;
}).then(res => {
      console.log(res);
      return p3;
}).then(res => {
      console.log(res);
})

5.Promise的两个方法

1.Promise all方法

//使用all方法
//一般使用在所有ajax请求结果都要成功才执行时
let p=Promise.all([p1,p2,p3])

//方法规则 
//1.所有Promise 对象都成功的时候，总的结果为成功
//  会指向then方法，得到的结果是  所有Promise对象resolve返回的结果 
//  以数组的形式体现
//2.只要有一个Promise对象状态为失败，总结果为失败
//  结果就是第一个获取[最快得到的]的失败的结果

2.Promise race方法

//race规则
//谁快得到谁

6.真正的异步同步化

//  async await 语法 重要 项目 频繁使用

// async await 两个关键字 一般来说 成对出现 ---- 目的 实现 异步代码同步化
// async 一般写在函数前面 表示这是一个异步函数
// await 一般卸载asynsc函数内部 函数内不的代码在await （异步代码）之后执行
//  函数内部，一旦遇到await 会先处理异步程序 ，得到响应结果之后，再处理后面的代码

var p1 = new Promise((resolve, reject) => {
     setInterval(() => resolve('p1'), 3000)
})
var p2 = new Promise((resolve, reject) => {
     setInterval(() => resolve('p2'), 2000)
})
var p3 = new Promise((resolve, reject) => {
     setInterval(() => resolve('p3'), 1000)
})

async function getRes() {
// 异步
      await p1.then(res => console.log(res));
      await p2.then(res => console.log(res));
      await p3.then(res => console.log(res));
// 同步
       console.log('同步');
}
getRes()

下一篇 ： 面向对象篇[一]