es6-11(1)-第三周总结

最新推荐文章于 2024-06-12 10:28:11 发布

活烦246

最新推荐文章于 2024-06-12 10:28:11 发布

阅读量80

点赞数

文章标签： ecmascript

本文链接：https://blog.csdn.net/weixin_63734437/article/details/125464596

版权

这一周主要在学习es6和进行视频网站项目的推进

下面总结了一下我认为es6比较重要的知识点

1.箭头函数

声明：

//普通的声明方式
let function  f1 (){}
//箭头函数
let f2=()=>{}
//相比较起来少function

特性

（1）箭头函数里面的this是静态的

这个this静态的意思就是在普通声明的函数中this可以通过call方法，apply方法还有bind方法改变指向，但是煎馒头函数中的this就指向全局变量


function getName(){
console.log(this.name);
}
let getName1=()=>{
console.log(this.name);
}
//创建name属性
window.name="zyj";
const person={
name:"zyjhhhc";
}
//直接调用的结果就是都输出zyj
//用call方法改变指向
getName.call(person);

getName1.call(person);
//结果是普通函数输出为zyjhhhc
//但是箭头函数仍输出window的name属性的值zyj

由此可见箭头函数this的值是不变得，一直都是声明时作用域下的属性值，无法改变指向；

(2)不能够作为构造函数创建数实例化对象

（3）不可以使用arguments变量

（4）箭头函数的省略

a）省略小括号，当形参有且只有一个的时候

b）省略花括号，当代码有且只有一个的时候

//有且只有一个形参，省略小括号
let add=  n  =>{
console.log(n+n);
}
//有且只有一行代码体时省略花括号
//let pow=(n)=>{
//return n*n;
//}
//console.log(pow(9));
//花括号省略后return语句也必须省略上面的写成这样
let pow=n=> n*n;
console.log(pow(9))
//且返回的值就是语句执行后的值

应用场景：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 100px;
            width: 100px;
            background: skyblue;
        }
    </style>
</head>

<body>
    <div></div>
</body>
<script>
    //需求1 点击两秒后个更换颜色
    var div = document.querySelector("div");
    // div.addEventListener("click",function(){
    //     setTimeout(function(){
    //         this.style.background="pink";
    //     },2000)
    // })--------------这样过并不可以生效因为这里的this指向的window
    //最燃可以通过在外部这里定义并接受this来实现，可以使用箭头函数更方便
    div.addEventListener("click", function() {
            setTimeout(() => {
                this.style.background = "pink";
            }, 2000)
        })
        //因为箭头函数的this是动态的指向当前作用下的那个


    //需求2 从数组中返回偶数可以用箭头函数很简单的写
    var arr = [1, 20, 10, 100, 97];
    let getOdd = item => item % 2 === 0;
    for (var i = 0; i < arr.length; i++) {
        if (getOdd(arr[i])) {
            console.log(arr[i]);
        }
    }
</script>

</html>

总结：箭头函数适合与this无关的回调，像定时器，数组方法的回调

箭头函数不适合于this有关的回调，像事件回调，对象的方法

二、promise

使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    //首先实例化Promise对象
    const p = new Promise(function(resolve, reject) {
            setTimeout(function() {
                // var data = "接口获取来的数据";
                // resolve(data);
                let err = "数据获取失败";
                reject(err);
            }, 1000)
        })
        //调用promise对象的then方法
    p.then(function(value) {
        console.log(value);
    }, function(reason) {
        console.error(reason);
    })
</script>

</html>

resolve和reject是两个函数通过这两个函数改变实力实例化对象的状态如果成功使用resolve，函数，对应实例化对象then方法的第一个函数，失败使用reject函数，调用then中的第二个方法，resolve和reject对应形参会传到then中

使用promise对ajax进行封装

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/jquery-3.6.0.js"></script>
</head>

<body>

</body>
<script>
    var p = new Promise((resolve, reject) => {
            $.ajax({
                type: 'GET',
                url: 'http://api.apiopen.top/getJoke',
                data: {},
                success: function(res) {
                    if (res.data === 0) {
                        resolve(res.data);
                    } else {
                        reject(res.msg);
                    }
                }
            })
        })
        //指定回调
    p.then(function(value) {
        console.log(value);
    }, function(reason) {
        console.error(reason);
    })
</script>

</html>

使用promise后我们可以在then回调函数出对数据进行处理而不是在ajax请求中了，代码结构会更加清晰。

最近在进行视频网站项目的推进，但是感觉自己进度很慢，以后要把效率提高起来，学习的时候尽快集中注意力，尽快学完es6和thymeleaf.