ES6篇（下）

原创

申小兮

发布于 2023-05-03 23:36:43

3040

发布于 2023-05-03 23:36:43

文章被收录于专栏：前端开发基础前端开发基础

一、箭头函数

1、概念及格式

一种定义函数的方式，有点抽象，拿代码例子来观察一下吧🧐

（1）以往的函数定义

<script>
    const 函数名= function(){代码块};
</script>

（2）箭头函数的定义【可以理解成function被箭头=>取代了】

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