谷粒商城学习日记（15）——ES6语法学习（4）

最新推荐文章于 2023-12-25 12:11:47 发布

合格的搬砖人

最新推荐文章于 2023-12-25 12:11:47 发布

阅读量149

点赞数

分类专栏： VUE 谷粒商城

本文链接：https://blog.csdn.net/menxinziwen/article/details/114854267

版权

谷粒商城同时被 2 个专栏收录

50 篇文章 4 订阅

订阅专栏

VUE

15 篇文章 0 订阅

订阅专栏

ES6新特性数组新方法和异步编程

数组新方法
异步编程

数组新方法

数组中新增了map和reduce方法

map(callback;)

<script>
        //数组中新增了map和reduce方法。
        let arr = [1, 20, -5, 3];

        //map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
        //  arr = arr.map((item)=>{
        //     return item*2
        //  });
        arr = arr.map(item => item + 1);



        console.log(arr);
</script>

reduce(callback,(initValue))

<script>
	let arr = [2, 21, -4, 4];
	//reduce() 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，
        //[2, 21, -4, 4]
        //arr.reduce(callback,[initialValue])
        /**
         1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
         2、currentValue （数组中当前被处理的元素）
         3、index （当前元素在数组中的索引）
         4、array （调用 reduce 的数组）*/
        let result = arr.reduce((a, b) => {
            console.log("上一次处理后：" + a);
            console.log("当前正在处理：" + b);
            return a - b;
        }, 3);
        console.log(result)
</script>

异步编程

优化异步操作。封装ajax
在html的同级别建了文件夹mock
里面放了三个json文件做测试用、

stduent.json

{
   "id" : 101,
    "name" : "zhangsan"
}

course101.json

{
    "scoreId" :10101,
    "id" : 11,
    "name" : "数学"
}

score.json

{
    "score":"100分"
}

之前写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="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <script>
        // 1、查出当前用户信息
        // 2、按照当前用户的id查出他的课程
        // 3、按照当前课程id查出分数
        $.ajax({
            url: "mock/stduent.json",
            success(data) {
                console.log("查询学生：", data);
                $.ajax({
                    url: `mock/course${data.id}.json`,
                    success(data) {
                        console.log("查询到课程：", data);
                        $.ajax({
                            url: `mock/score${data.scoreId}.json`,
                            success(data) {
                                console.log("查询到分数：", data.score);
                            },
                            error(error) {
                                console.log("出现异常了：" + error);
                            }
                        });
                    },
                    error(error) {
                        console.log("出现异常了：" + error);
                    }
                });
            },
            error(error) {
                console.log("出现异常了：" + error);
            }
        });

    </script>
</body>
</html>

Promise方式

初步使用

    <script>
        // 1、Promise可以封装异步操作
        let p = new Promise((resolve, reject) => { //传入成功解析，失败拒绝
            //1、异步操作
            $.ajax({
                url: "mock/stduent.json",
                success: function (data) {
                    console.log("查询学生成功:", data)
                    resolve(data);
                },
                error: function (err) {
                    reject(err);
                }
            });
        });

        p.then((obj) => { //成功以后做什么
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: `mock/course${obj.id}.json`,
                    success: function (data) {
                        console.log("查询学生课程成功:", data)
                        resolve(data);
                    },
                    error: function (err) {
                        reject(err)
                    }
                });
            })
        }).then((data) => { //成功以后干什么
            console.log("上一步的结果", data)
            $.ajax({
                url: `mock/score${data.scoreId}.json`,
                success: function (data) {
                    console.log("查询课程得分成功:", data.score)
                },
                error: function (err) {
                }
            });
        })
</script>

在封装

<script>
 function get(url, data) { //自己定义一个方法整合一下
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: url,
                    data: data,
                    success: function (data) {
                        resolve(data);
                    },
                    error: function (err) {
                        reject(err)
                    }
                })
            });
        }

        get("mock/stduent.json")
            .then((data) => {
                console.log("学生查询成功~~~:", data)
                return get(`mock/course${data.id}.json`);
            })
            .then((data) => {
                console.log("课程查询成功~~~:", data)
                return get(`mock/score${data.scoreId}.json`);
            })
            .then((data) => {
                console.log("课程成绩查询成功~~~:", data.score)
            })
            .catch((err) => { //失败的话catch
                console.log("出现异常", err)
            });

</script>

----------------最后
这里的student误打错成stduent最后将错就错了，代码里面还是需要规范的。

合格的搬砖人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
谷粒商城学习日记（15）——ES6语法学习（4）

ES6新特性数组新方法和异步编程数组新方法异步编程之前写ajax的方式——多层嵌套Promise方式初步使用在封装数组新方法数组中新增了map和reduce方法map(callback;)<script> //数组中新增了map和reduce方法。 let arr = [1, 20, -5, 3]; //map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。 // arr = arr.map((i
复制链接

扫一扫

专栏目录