ES6篇（下）
一、箭头函数
1、概念及格式
一种定义函数的方式，有点抽象，拿代码例子来观察一下吧🧐
<script>
const 函数名= function(){代码块};
</script> <script>
const 函数名 =()=>{代码块};
</script> （3）调用方式仍然不变
函数名();
2、参数
（1）没有参数
const test = ()=>{
console.log('test','箭头函数');
};
test(); （2）一个参数const sing = title=>{
console.log('sing',title);
}
sing('孤勇者'); （3）多个参数const dance = (name,list)=>{
console.log('dance',name,list);
}
dance('小米','芭蕾舞') 
3、一行代码
const play = ()=>console.log('就是玩儿~');
play() 4、this指向
（1）普通的箭头函数，this指向的使window
const eat = ()=>{
console.log(this);
}
eat();//window （2）在对象obj里，箭头函数的this指向还是window，而不是指向obj对象const obj={
say:eat,
}
obj.say();//window 
二、函数初始值
1、形参初始化（一般设置的初始值位置放在比较后面）
（1）普通函数
const sumNumber = function(a,b,c=3){
console.log(a+b+c);
}
sumNumber(1,2) （2）箭头函数const sum = (a,b,c=3)=>console.log(a+b+c); sum(1,2)
2、箭头函数与结构赋值结合
（1）可逐一获取对象内的属性，同时可以设定初始值
const user = ({name='申小兮',age='20'}) =>console.log(name,age);
user({}) 注意：调用user函数时，形参需要成对象形式，即不要漏掉大括号{}，否则会报错
（2）也可改变初始值
//赋值用等号
const user = ({name='申小兮',age='20'}) =>console.log(name,age);
user({})
user({name:'张三'})//对象赋值用键值对格式 三、Rest参数
1、概念
（1）通俗地说，其作用就是将剩余没有接收到的参数保存下来
（2）arguments：获取所有传入的数据，注意在箭头函数内是没有arguments的，因为箭头函数的this始终指向的是window
2、代码例子
（1）ES5写法
const fn = function(a){
console.log(a);
console.log(arguments);
}
fn(10,20,30) （2）ES6写法function fn(a,...rest){
console.log('a',a,'rest',rest);
}
fn(10,20,30) 
四、Symbol类型
1、回忆类型
（1）ES5：boolean、string、array、number、object、null、undefined
（2）ES6：在ES5的基础上又增加了一个类型Symbol，定义对象的唯一属性名
2、注意
（1）Symbol是类型，不是构造函数，括号是描述，为了方便辨识
let s = Symbol()
let s1 = Symbol("key")
let s2 = Symbol("key")
console.log(typeof s);//symbol
console.log(s1 == s2);//false （2）每个Symbol都是独一无二的，不能参与运算let s = Symbol()
let s1 = Symbol("key")
let s2 = Symbol("key")
console.log(s1 + s2); 
3、Symbol.for()
（1）概念：全局搜索被登记Symbol是否有参数做为Symbol值，有即返回Symbol，没有则新建一个字符串名为Symbol值，并登记在全局中，提供搜索
（2）代码例子
let s1 = Symbol("key")
let s2 = Symbol.for("key")
let s3 = Symbol.for("key")
console.log(s2 == s1);//false
console.log(s2 == s3);//true 4、Symbol.keyfor()
（1）概念：返回已登记的Symbol值的说明，检测是否改字符串参数，Symbol值是否已经被登记
（2）代码例子
let s = Symbol()
let s1 = Symbol("key")
let s2 = Symbol.for("key")
console.log(Symbol.keyFor(s));//undefined
console.log(Symbol.keyFor(s1));//undefined
console.log(Symbol.keyFor(s2));//key 5、Symbol在对象中的使用
（1）原始方法添加属性，对象已存在的属性值会被覆盖
const person ={
name:'申小兮',
age:'18',
say(){
console.log("原来的say");
}
}
// 在person对象里面添加一个已经存在的say属性，原来的属性值会被覆盖
person.say = function(){
console.log("新的say");
}
person.say()//新的say （2）使用Symbol添加属性
①person.say()：还是会正常输出原本对象的属性值
②person[say]()：通过Symbol在对象里面添加一个已经存在的属性，原来的属性值并不会被覆盖
const person ={
name:'申小兮',
age:'18',
say(){
console.log("原来的say");
}
}
const say = Symbol.for("say")
person[say] = function(){
console.log("Symbol的say");
}
person.say()//原来的say
person[say]()//Symbol的say 五、promise
1、作用：异步编程的一种解决方案
2、回调地狱（接口过多时会出现）
（1）只有一个网络请求：封装一个网络请求，不能立即拿到结果，不能简单的返回，需要传入回调函数，在请求成功后，通过回调函数返回数据
（2）但是上面的方法仅限于一个网络请求，当网络复杂时就会出现问题，因此引入promise方法
3、promise的使用
（1）两个参数
①resolve：成功的返回值，会通过.then捕获数据
②reject：失败的返回值，会通过.catch捕获数据
（2）三种状态
①peding：等待状态，如：等待网络请求结束，定时器没有到时间
②fullfill：满足状态，当主动调用resolve，处于该状态，且会回到.then
③reject：拒绝状态，主动reject后处于该状态，且回到.catch
<script>
const login = function () {
return new Promise((resolve, reject) => {
$.ajax({
url: 'http://www.codeedu.com.cn/xiaomi/v1/ms/user/login',
type: 'POST',
data: JSON.stringify({
username: 'qianduan22',
password: 'qianduan22'
}),
contentType: 'application/json',
success: (res) => {
resolve(res);
},
error: (err) => {
reject(err);
}
})
})
}
login().then((res) => {
console.log('res', res);
}).catch((err) => {
console.log('err', err);
})
</script> 
4、promise.all
（1）概念：传入一个promise对象的数组，按数据的顺序依次阻塞等待每个promise执行完毕
（2）回调：返回值是一个数组，输出顺序即原来值对应的顺序
Promise.all([
new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(1)
},1000)
}),
new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(2)
},1000)
})
]).then((result)=>{
console.log(result);
}) 
六、async await
1、概念
（1）用来把promise风格函数，阻塞等待结果
（2）一定会等到上一个做完再做下一个
2、注意
（1）async await必须配套出现，且await只能在async函数中使用
（2）建议使用try catch进行异常处理
const login = function(){
return new Promise((resolve,reject)=>{
$.ajax({
url:'http://www.codeedu.com.cn/xiaomi/v1/ms/user/login',
type:'POST',
data:JSON.stringify({
username:'qianduan22',
password:'qianduan22'
}),
contentType:'application/json',
success:(res)=>{
resolve(res)
},
error:(err)=>{
reject(err)
}
})
})
}
const getUserInfo = function(token){
return new Promise((resolve,reject)=>{
$.ajax({
url:'http://www.codeedu.com.cn/xiaomi/v1/ms/user/info',
type:'GET',
contentType:'application/x-www-form-urlencoded',
headers:{Authorization:token},
success:(res)=>{
resolve(res)
},
error:(err)=>{
reject(err)
}
})
})
}
async function init(){
try {
const loginResult = await login()
const infoResult = await getUserInfo(loginResult.data)
console.log(loginResult);
console.log(infoResult);
} catch (err) {
console.log(err);
}
}
init() 
JavaScript的基本语法（变量、数据类型、运算符等等），流程控制（顺序、分支、循环），数组，函数（作用域、预解析），对象（自定义、内置），DOM（节点操作、获取元素），BOM（定时器、回调函数、同步异步） JQuery框架的入口函数，隐式迭代，排他思想，链式编程，样式操作，属性操作，事件监听
学而思公司福利 469人发布