ES6 学习总结4

已于 2022-06-27 16:07:40 修改
阅读量248 收藏
点赞数
分类专栏： 前端 文章标签： 前端 javascript es6
于 2022-04-08 22:36:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63479468/article/details/124001355
版权

一、迭代器

迭代器（Iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作。

（1）ES6创造了一种新的命令 for...of... 循环，Iterator 接口主要供for...of消费

（2）原生具备iterator接口的数据（可用for...of遍历）

Array,Arguments,Set,Map,String,TypeArray,NodeList

//声明一个数组
        const TNT = ['马嘉祺','丁程鑫','宋亚轩','刘耀文','张真源','严浩翔','贺峻霖'];

        //使用for...of循环 遍历数组
        for(let v of TNT){
            console.log(v);
        }

（3）工作原理

a. 创建一个指针对象，指向当前数据结构的起始位置；

b. 第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员；

c. 接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员；

d. 每调用 next 方法返回一个包含 value 和 done 属性的对象；

注：需要自定义遍历数据的时候，要想到迭代器

//声明一个数组
        const TNT = ['马嘉祺','丁程鑫','宋亚轩','刘耀文','张真源','严浩翔','贺峻霖'];

        //使用for...of循环 遍历数组
        for(let v of TNT){
            console.log(v);
        }

        
        let iterator = TNT[Symbol.iterator]();

        //调用Symbol对象的next方法
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());

        //重新初始化对象，指针也会重新回到最前面
        let iterator2 = TNT[Symbol.iterator]();
        console.log(iterator2.next());

迭代器自定义遍历对象 

//迭代器自定义遍历对象
        //声明一个对象
        const TNT = {
            name: '时代少年团',
            remember: [
                '马嘉祺',
                '丁程鑫',
                '宋亚轩',
                '刘耀文',
                '张真源',
                '贺峻霖',
                '严浩翔'
            ]
            ,

            [Symbol.iterator]() {
                let index = 0;
                //保存this
                let _this = this;
                return {
                    next: function () {
                        if (index < _this.remember.length) {
                            const result = {
                                value: _this.remember[index],
                                done: false
                            };
                            index++;
                            return result;
                        }else {
                            return {
                                value:undefined,
                                done: true
                            };
                        }
                    }
                };
            }
        }
        for(let v of TNT){
            console.log(v);
        }

二、生成器

生成器函数是es6提供方的一种异步编程解决方案，语法行为与传统函数完全不同

//生成器函数参数的传递

function * gen(args) {
            console.log(args);
            let one = yield 111;
            let two = yield 222;
            let three = yield 333;
            console.log(one);
            console.log(two);
            console.log(three);
        }
        //获取迭代器对象
        let iterator = gen('AAA');
        console.log(iterator.next());//会执行yield 111;
        //next方法也可以传入参数，传入的参数作为第一条（上一条）语句yield 111的返回结果
        console.log(iterator.next('宋亚轩'));//会执行yield 222;
        console.log(iterator.next('刘耀文'));//会执行yield 333;
        console.log(iterator.next('文轩'));//继续往后走，但是这里未定义;

实例：

// 生成器其实就是一个特殊的函数
        // 异步编程 纯回调函数 node fs ajax mongodb
        // yield：函数代码的分隔符
        function* gen(args) {
            console.log(args);
            // let one = yield 111;
            // let two = yield 222;
            // let three = yield 333;
            console.log('one');
            yield 'AAA';
            console.log('two');
            yield 'BBB';
            console.log('three');
            yield 'CCC';
        }
        //获取迭代器对象
        let iterator = gen();
        console.log(iterator.next());
        //next方法也可以传入实参
        console.log(iterator.next('宋亚轩'));
        console.log(iterator.next('刘耀文'));
        console.log(iterator.next('文轩'));
        console.log("遍历：");
        for(let v of gen()){
            console.log(v);
        }

        案例一：异步编程、文件操作、网络操作（ajax request）、数据库操作

        需求：一秒后弹出111，两秒后弹出222，三秒后弹出333
        回调地狱
        setTimeout(()=>{
            alert(111);
            setTimeout(()=>{
                alert(222);
                setTimeout(()=>{
                    alert(333);
                },3000)
            },2000)
        },1000)
//另一种方法
        function first(){
            setTimeout(()=>{
                alert(111);
                console.log(111);
                iterator.next();
            },1000);
        }
        function second(){
            setTimeout(()=>{
                alert(222);
                console.log(111);
                iterator.next();
            },1000)
        }
        function third(){
            setTimeout(()=>{
                alert(333);
                console.log(111);
                iterator.next();
            },1000)
        }
        function * gen() {
            yield first();
            yield second();
            yield third();
        }

        let iterator = gen();
        iterator.next();

三、promise

Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数，用来封装异步操作 并可以获取其成功或失败的结果；

1. Promise 构造函数: Promise (excutor) {}；

2. Promise.prototype.then 方法；

3. Promise.prototype.catch 方法； 

//实例化Promise 对象
        //Promise 对象的三种状态：初始化、成功、失败
        const p = new Promise(function(resolve, reject){
            setTimeout(function(){
                //成功
                let data = "数据";
                resolve(data);
                //失败
                let err = "失败！！";
                reject(err);
            },1000);
        });

        //调用 Promise 的 then 方法，两个参数为函数
        p.then(function(value){
            //成功
            console.log(value);
        },function(season){
            //失败
            console.log(season);
        })

 

1.Promise 封装读取函数

一般写法

//Promise封装读取函数
        //一般写法
        //1.引入fs模块
        const fs = require("fs");

        //2.调用方法读取文件
        fs.readFile("11-es8/resource/为学.md",(err,data)=>{
            //若果失败抛出错误
            if(err) throw err;
            //如果没有出错则输出内容
            console.log(data.toString());
        })

 浏览器端不能识别require关键字，require是node.js环境下的，在node_modules文件夹里面的模块下面常见require

promise封装

        //1.引入fs模块
        const fs = require("fs");

        //promise封装
        const p = new Promise(function(resolve,data){
            fs.readFile("11-es8/resource/为学.md",(err,data)=>{
                //判断如果失败
                if(err) PromiseRejectionEvent(err);
                //如果成功
                resolve(data);
            })
        })
        p.then(function(value){
            console.log(value.toString());
        },function(reason){
            console.log(reason);
        })

2. 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>Promise封装Ajax请求</title>
</head>
<body>
    <script>
        //请求地址：https://api.apiopen.top/getJoke
        //原生请求
        //1.创建对象
        const xhr = new XMLHttpRequest();
        //2.初始化
        xhr.open("GET","https://api.apiopen.top/getJoke");
        //3.发送
        xhr.send();
        //4.绑定事件，处理响应结果
        xhr.onreadystatechange = function(){
            //判断状态
            if(xhr.readyState == 4) {
                //判断响应状态码
                if(xhr.status>=200&&xhr.status<300){
                    //成功
                    console.log(xhr.response);
                }else{
                    //失败
                    console.error(xhr.status);
                }
            }
        }
    </script>
</body>
</html>

响应成功的网址内容 

 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>Promise封装Ajax请求</title>
</head>
<body>
    <script>
        //请求地址：https://api.apiopen.top/getJoke
        const p = new Promise(function(resolve,reason){
            //原生请求
        //1.创建对象
        const xhr = new XMLHttpRequest();
        //2.初始化
        xhr.open("GET","https://api.apiopen.top/getJoke");
        //3.发送
        xhr.send();
        //4.绑定事件，处理响应结果
        xhr.onreadystatechange = function(){
            //判断状态
            if(xhr.readyState == 4) {
                //判断响应状态码
                if(xhr.status>=200&&xhr.status<300){
                    //成功
                    console.log(xhr.response);
                }else{
                    //失败
                    console.error(xhr.status);
                }
            }
        }
        });

        p.then(function(value){
            console.log(value.toString());
        },function(reason){
            console.error(reason);
        })
    </script>
</body>
</html>

响应成功时 

 响应失败时

 3.Promise.prototype.then

<!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>promise.prototype.then</title>
</head>
<body>
    <script>
        //创建 Promise 对象
        const p = new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve("用户数据");
            },1000);
        });
        //调用then方法，then方法返回的是Promise对象
        //对象的状态由回调函数的结果决定
        const result = p.then(value => {
            console.log(value);
            //1.如果回调函数中返回的结果是 非Promise 类型的数据
            //状态为成功，返回值为对象的草稿纸resolved
            // [[PromiseStatus]]:"resolved"
            // [[PromiseValue]]:"123"
            // return 123;
            //如果是Promise类型的数据
            //此Promise对象的状态决定上面Promise对象p的状态
            // return new Promise((resolve,reject)=>{
            //     resolve("okk");
            //     reject("noo");
            // });
            //3.抛出错误
            throw new Error("lose!!!");
            //状态：rejected
            //value:lose!!!

        },reason=>{
            console.error(reason);
        })
        //链式调用
        //then里面的两个函数参数可以只写一个
        p.then(value=>{},reason=>{}).then(value=>{},reason=>{});
        console.log(result);
    </script>
</body>
</html>

 4.Promise对象catch方法

很多情况我们只需传promise的成功态（resolved）下调用的then方法的第一个处理函数，所以为了更好的语义化，我们使用then方法专门处理resolved态，使用catch方法专门处理rejected态。

相当于then(null,err => {}); 不处理成功态，只处理失败态。

目录

一、迭代器

二、生成器

三、promise

1.Promise 封装读取函数

promise封装

2. Promise封装Ajax请求

 3.Promise.prototype.then

 4.Promise对象catch方法

<!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>
    <script>
        const p = new Promise((resolve,reject)=>{
            setTimeout(()=>{
                //设置p的状态为失败，并设置失败的值
                reject("lose!!!");
            },1000);
        })

        p.catch(reason=>{
            console.warn(reason);
        });
    </script>
</body>
</html>

琳琳在哪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6学习总结
08-14
主要是学习了ES6的总结
ES6学习总结（1）
01-08
1.ES6 ————————————————————————————————————————————————————— 1.1什么是ES6？ ES6：全称为ECMAScript6.0，是JavaScript的下一个版本标准，2015.06发版。 发...
ES6 学习总结&记录
EvaKing2014的博客
03-21 974
ES6–ES2015在 vue 中，Babel 是一个 JavaScript 编译器，主要用于将采用 ECMAScript 2015+语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。ES6 环境搭建： webpack3.x 以上、Traceur关于定义（声明）变量之前 var a=12;现在 let a=12;作用域： 全局、 函数作用域、let 相当于之前的 varconst 常量，定义好了不能改变。
Es6学习总结
WWERYUE的博客
10-15 108
模块的导入方法： 1.import{name,fun,Square}from'./jli.js' 2.import Square from'./jli.js' 导入方法： 1.export{name，fun，Square}可以多次导入 2.export default Square 默认只能够导出一次 声明变量的关键字：var,let,const 三者的区别与作用：var为全局和函数作用域；let和const为局部作用域{}var会变量提升，let与const则不会；var能重复声明le...
es6学习总结
低代码布道师的博客
02-05 209
利用了一点时间为大家做了一下技术扫盲，不管别人再宣传他这个技术是零基础，非常好上手，作为小白的我们还是要有个清醒的认知，世间哪有免费的午餐，有一句话上天在赠予你礼物的时候，暗中早已标好了价格。 所以我们需要对自己的能力和水平有一个清醒的认知，那是否上手一门技术的时候需要全部学会这些基础技能呢？我看也大可不必，因为你如果追求全部学会那就跳入一个怪圈，越想学，越学不会，学不会自信心就没了，兴趣一旦丧失也就基本止步不前了。 我的经验是如果有一项技能你不会，你可以先找一个基础教程，大致浏览一遍，基本概念有了之后，找
ES6学习总结 1
qq_37463965的博客
03-23 142
ES6的简单总结
ES6 学习总结2
qq_63479468的博客
04-02 140
一、ES6箭头（=>）函数 //声明一个函数 let fn = (a,b) => { return a+b; } //调用函数 let result = fn(1 + 2); console.log(result); 1.this是静态的，this始终指向函数声明时所在作用域下的this的值 function getName(){ console.log(this.name); } let getName2 = () => { console.log.
ES6语法学习总结
o__o__o__o的博客
04-05 988
ES6语法学习总结 1.let和const 2.解构赋值 3.块级作用域 4.箭头函数 5. for...of vs for...in 6. 类
ES6 学习总结3
qq_63479468的博客
04-03 1159
一、扩展运算符 『...』 扩展运算符能将『数组』转换为逗号分隔的『参数序列』 //声明一个数组 const TFBOYS = ['王俊凯','王源','易烊千玺']; //=>'王俊凯','王源','易烊千玺' //声明一个函数 function chuancan(){ console.log(arguments); } chuancan(...TFBOYS); 二、扩展运算符的应用 1.数组的合并 concat() const TFBOYS = ['王俊凯','王源'.
ES6 学习总结1
qq_63479468的博客
04-01 237
一、声明变量 let 1.变量不能重复声明 let star = "宋亚轩"; let star = "芽芽"; //这样是会报错的 2.块级作用域 全局，函数，eval 什么是块级作用域？ 块作用域由 { } 包括，if语句和for语句里面的{ }也属于块作用域。 { let boy = '宋亚轩'; } //这就是一个块级作用域 console.log(girl); 3.不存在变量提升，必须先声明再使用 console.log(song); let song..
ES6学习总结目录
SilentChord
07-23 147
跳转：https://blog.csdn.net/weixin_43856797/article/details/104081019
JavaScript ES6学习总结
yuxuan89814的专栏
05-06 117
@JavaScript ES6学习总结 数组 concat 合并不改变远数组 可以使用 arr1.push(…arr2) 对象的扩展运算符（…），取出对象的可遍历属性，放置到当前对象中 变量 let 当前作用域的变量 const 当前作用域的常量 var 声明的变量初始值是undefined，作用域为方法作用域。 var 变量关键字的真正问题在于其在方法内部的定义变量开始的任何地方都可以访问到这个变量。 i、discountedPrice、finalPrice 这三个变量是定义在一个 for 循环体中的 (
ES6常用知识点学习总结
12-10
压缩包包含了ES6中比较常用的知识点代码总结，这是博主自学过程中存下来的，包括，le&const，变量的解构，模块化，函数参数默认值，箭头函数，字符与对象的拓展，class类，try/catchz异常处理，promise等等，请放心...
JavaScript及（ES6）总结
05-29
在学习JavaScript的过程中统计的详细笔记分享给初学者，希望能帮助到学习前端的同学。
超详细ES6变动，ES6学习笔记，JavaScriptES6学习笔记
09-16
由本人总结修改的es6学习笔记，结合了和es5的部分不同点，仅用于简略学习，如果需要深度学习es6，还请移步阮一峰等大神博客！！！不知道怎么改成0资源分0_o哈哈，就设置成1了
记录一次前端页面崩溃的产生及处理
最新发布
weixin_51123079的博客
05-30 401
记录一次前端页面崩溃的产生及处理
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 318
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
【JS实战案例汇总——不定时更新版】
微木
05-30 208
练习JS的实用案例
web前端三大主流框架
低调做人，低调编码，神码都是浮云
05-30 872
Web前端三大主流框架介绍：Angular、React、Vue
es6数组解构...
08-26
总结来说，ES6数组解构赋值是一种方便的语法，可以将数组中的元素分配给变量。它可以简化代码，提高代码的可读性和可维护性。通过数组解构赋值，可以按照特定的顺序将数组中的元素赋值给变量，并且解构赋值只能用于...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值