ES6学习笔记(一)

最新推荐文章于 2024-03-09 11:40:41 发布

°PJ想做前端攻城狮

最新推荐文章于 2024-03-09 11:40:41 发布

阅读量956

点赞数 1

分类专栏：前端 # JS # ES6 文章标签： iterator js promise es6/es7 生成器

本文链接：https://blog.csdn.net/weixin_43745075/article/details/114994694

版权

前端同时被 3 个专栏收录

48 篇文章 1 订阅

订阅专栏

38 篇文章 1 订阅

订阅专栏

ES6

9 篇文章 0 订阅

订阅专栏

一、概述

1 、什么是 ECMA

ECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制造商协会，这个
组织的目标是评估、开发和认可电信和计算机标准。 1994 年后该组织改名为 Ecma 国际；

2 、什么是 ECMAScript

ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言；

百度百科：https://baike.baidu.com/history/ECMAScript/1889420/

3 、什么是 ECMA-

Ecma 国际制定了许多标准，而 ECMA-262 只是其中的一个，所有标准列表查看：

http://www.ecma-international.org/publications/standards/Standard.htm

4 、ECMA-262 历史

ECMA-262（ECMAScript）历史版本查看网址：

http://www.ecma-international.org/publications/standards/Ecma-262-arch.htm

注：从 ES6 开始，每年发布一个版本，版本号比年份最后一位大 1 ；

5 、谁在维护 ECMA-

TC39（Technical Committee 39）是推进 ECMAScript 发展的委员会。其会员都是公司（其中主要是浏
览器厂商，有苹果、谷歌、微软、因特尔等）。TC39 定期召开会议，会议由会员公司的代表与特邀专家
出席；

6 、为什么要学习 ES

ES6 的版本变动内容最多，具有里程碑意义；

ES6 加入许多新的语法特性，编程实现更简单、高效；

ES6 是前端发展趋势，就业必备技能；

7 、ES6 兼容性

查看网址：http://kangax.github.io/compat-table/es

二、ES6 新特性

1 、let 关键字

特性

let 关键字用来声明变量，使用 let 声明的变量有几个特点：

不允许重复声明；
块儿级作用域（局部变量）；
不存在变量提升；
不影响作用域链；

let创建变量代码示例：

// let关键字使用示例：
let a; // 单个声明
let b,c,d; // 批量声明
let e = 100 ; // 单个声明并赋值
let f = 521 , g = 'iloveyou', h = []; // 批量声明并赋值

不允许重复声明：

let dog = "狗";
let dog = "狗";
// 报错：Uncaught SyntaxError: Identifier 'dog' has already been
declared

块儿级作用域（局部变量）

let cat = "猫";
console.log(cat);
}
console.log(cat);
// 报错：Uncaught ReferenceError: cat is not defined

不存在变量提升：

// 什么是变量提升：就是在变量创建之前使用（比如输出：输出的是默认值），let不存在，var存在；

console.log(people1); // 可输出默认值
console.log(people2); // 报错：Uncaught ReferenceError: people2 is not defined
var people1 = "大哥"; // 存在变量提升
let people2 = "二哥"; // 不存在变量提升

不影响作用域链：

 

// 什么是作用域链：很简单，就是代码块内有代码块，跟常规编程语言一样，上级代码块中的局部变量下级可用

		{
            let p = "大哥";
			var s;               //p的作用域是块(花括号内)级的，而s的作用域为全局
            function fn() {
                console.log(p); // 这里是可以使用的
            }
            fn();
        }

应用场景

以后声明变量使用 let 就对了；

let案例：点击div更改颜色

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>let案例：点击div更改颜色</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitterbootstrap/3.3.7/css/bootstrap.min.css"
        rel="stylesheet">
    <style>
        .item {
            width: 100px;
            height: 50px;
            border: solid 1px rgb(42, 156, 156);
            float: left;
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h2 class="page-header">let案例：点击div更改颜色</h2>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <script>
        // 获取div元素对象
        let items = document.getElementsByClassName('item');
        // 遍历并绑定事件
        for (let i = 0; i < items.length; i++) {
            items[i].onclick = function () {
                // 修改当前元素的背景颜色
                // this.style.background = 'pink'; // 写法一：常规写法一般无异常
                items[i].style.background = 'pink'; // 写法二
                // 写法二：需要注意的是for循环内的i必须使用let声明 //点击事件是异步的
                // 如果使用var就会报错，因为var是全局变量，
                // 经过循环之后i的值会变成3，items[i]就会下标越界
                // let是局部变量
                // 我们要明白的是当我们点击的时候，这个i是哪个值
                // 使用var相当于是：
                // { var i = 0; }
                // {  i = 1; }
                // {  i = 2; }
                // {  i = 3; }
                // 下面的声明会将上面的覆盖掉，所以点击事件每次找到的都是3
                // 而使用let相当于是：
                // { let i = 0; }
                // { let i = 1; }
                // { let i = 2; }
                // { let i = 3; }
                // 由于let声明的是局部变量，每一个保持着原来的值
                // 点击事件调用的时候拿到的是对应的i
            }
        }
    </script>
</body>

</html>

2 、const 关键字

特性：

const 关键字用来声明常量，const 声明有以下特点：

声明必须赋初始值·；
标识符一般为大写（习惯）；
不允许重复声明；
值不允许修改；
块儿级作用域（局部变量）；

const创建变量代码示例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>const</title>
</head>

<body>
    <script>
        // const声明常量
        const DOG = "旺财";
        console.log(DOG);
        // 1. 声明必须赋初始值；
        // const CAT;
        // 报错：Uncaught SyntaxError: Missing initializer in const  declaration
        
        // 2. 标识符一般为大写（习惯）；
        // const dog = "旺财"; // 小写也不错
        
        // 3. 不允许重复声明；
        // const CAT = "喵喵";
        // const CAT = "喵喵";
        // 报错：Uncaught SyntaxError: Identifier 'CAT' has already been declared
        
       //  注意：对数组元素的修改和对对象内部的修改是可以的（数组和对象存的是引用地址）；
        // 4. 值不允许修改；
        // const CAT = "喵喵";
        // CAT = "咪咪";
        // 特例：const arr = ['55','66'];
        // arr.push('77');  //arr的中已经接上了‘77’ 这是因为arr指向的地址并没有发生改变
        // 报错：Uncaught TypeError: Assignment to constant variable.
        
        // 5. 块儿级作用域（局部变量）；
        // {
        // const CAT = "喵喵";
        // console.log(CAT);
        // }
        // console.log(CAT);
        // 报错：Uncaught ReferenceError: CAT is not defined
    </script>
</body>

</html>

应用场景：

声明对象类型使用 const，非对象类型声明选择 let；

3 、变量和对象的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为 解构赋值

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>解构赋值</title>
</head>

<body>
    <script>
        // ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值；
        // 1、数组的解构赋值
        const F4 = ["大哥", "二哥", "三哥", "四哥"];
        let [a, b, c, d] = F4;
        // 这就相当于我们声明4个变量a,b,c,d，其值分别对应"大哥","二哥","三哥","四哥"
        console.log(a + b + c + d); // 大哥二哥三哥四哥
        // 2、对象的解构赋值
        const F3 = {
            name: "大哥",
            age: 22,
            sex: "男",
            xiaopin: function () { // 常用
                console.log("我会演小品！");
            }
        }
        let {
            name,
            age,
            sex,
            xiaopin
        } = F3; // 注意解构对象这里用的是{} 
        console.log(name + age + sex + xiaopin); // 大哥22男
        xiaopin(); // 此方法可以正常调用
        //好像只是一个指向
        console.log(name===F3.name);//true
        console.log(xiaopin===F3.xiaopin);//true  
    </script>
</body>

</html>

应用场景：

`频繁使用对象方法、数组元素，就可以使用解构赋值形式`；

4 、模板字符串

概述

模板字符串（template string）是增强版的字符串，用反引号（`）标识，特点：

字符串中可以出现换行符；
可以使用 ${xxx} 形式引用变量

代码演示及相关说明：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <script>
        // 声明字符串的方法：单引号（''）、双引号（""）、反引号（``）
        // 声明
        let string = `我也一个字符串哦！`;
        console.log(string);
        // 特性
        // 1、字符串中可以出现换行符
        let str =
            `<ul>
<li>大哥</li>
<li>二哥</li>
<li>三哥</li>
<li>四哥</li>
</ul>`;
        console.log(str);
        // 2、可以使用 ${xxx} 形式引用变量
        let s = "大哥";
        let out = `${s}是我最大的榜样！`;

        console.log(out);
    </script>
</body>

</html>

应用场景

`当遇到字符串与变量拼接的情况使用模板字符串`；

5 、简化对象和函数写法

概述

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁；

代码示例及相关说明：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>简化对象写法</title>
</head>

<body>
    <script>
        // ES6允许在对象的大括号内直接写入变量和函数作为对象的属性和方法
        // 变量和函数
        let name = "訾博";
        let change = function () {
            console.log("活着就是为了改变世界！");
        }
        //创建对象
        const school = {
            // 完整写法
            // name:name,
            // change:change
            // 简化写法
            name,
            change,
            // 声明方法的简化
            say() {
                console.log("言行一致！");
            }
        }
        school.change();
        school.say();
    </script>
</body>

</html>

6 、箭头函数

概述

ES6允许使用箭头（=>）定义函数，箭头函数提供了一种更加简洁的函数书写方式，箭头函数多用于匿名函数的定义；

箭头函数的注意点：

如果形参只有一个，则小括号可以省略；
函数体如果只有一条语句，则花括号可以省略，并省略return，函数的返回值为该条语句的执行结果；
箭头函数 this 指向声明时所在作用域下 this 的值；
箭头函数不能作为构造函数实例化；
不能使用 arguments；

特性

箭头函数的this是静态的，始终指向函数声明时所在作用域下的this的值；
不能作为构造实例化对象；
不能使用 arguments 变量；

代码演示及相关说明

注意：箭头函数不会更改 this 指向，用来指定回调函数会非常合适；

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>箭头函数</title>
</head>

<body>
    <script>
        // ES6允许使用箭头（=>）定义函数
        // 传统写法：无参数
        var say = function () {
            console.log("hello！");
        }
        say();

        // ES写法2：无参数
        let speak = () => console.log("hello 哈哈！");
        speak();

        // 传统写法：一个参数
        var hello = function (name) {
            return "hello " + name;
        }
        console.log(hello("pj"));

        // ES6箭头函数：一个参数
        let hi = name => "hi " + name;
        console.log(hi("pj"));

        // 传统写法：多个参数
        var sum = function (a, b, c) {
            return a + b + c;
        }
        console.log(sum(1, 2, 3));
        // ES6箭头函数：多个参数
        let he = (a, b, c) => a + b + c;
        console.log(he(1, 2, 3));
        
        // 特性
        // 1、箭头函数的this是静态的，始终指向函数声明时所在作用域下的this的值
        const school = {
            name: "大哥",
        }
        // 传统函数
        function getName() {
            console.log("getName：" + this.name);
        }
        // 箭头函数
        getName1 = () => console.log("getName1：" + this.name);
        window.name = "訾博";
        // 直接调用
        getName();
        getName1();
        // 使用call调用
        getName.call(school);
        getName1.call(school);
        // 结论：箭头函数的this是静态的，始终指向函数声明时所在作用域下的this的值

        // 2、不能作为构造实例化对象
        let Persion = (name,age) => {
        this.name = name;
        this.age = age;
        }
        let me = new Persion("pj",24);
        console.log(me);
        // 报错：Uncaught TypeError: Persion is not a constructor


        // 3、不能使用 arguments 变量
        let fn = () => console.log(arguments);
        fn(1,2,3);
        // 报错：Uncaught ReferenceError: arguments is not defined
    </script>
</body>

</html>

需求-1：点击 div 2s 后颜色变成『粉色』

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>箭头函数的实践和应用场景</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: #58a;
        }
    </style>
</head>

<body>
    <div id="ad"></div>
    <script>
        // 需求-1 点击 div 2s 后颜色变成『粉色』
        // 获取元素
        let ad = document.getElementById('ad');

        // 绑定事件
        ad.addEventListener("click", function () {

            // 传统写法
            // 定时器：参数1：回调函数；参数2：时间；
            setTimeout(function () {
                console.log(this);
                this.style.background = 'pink';
            }, 2000);
            // 报错Cannot set property 'background' of undefined

            // 传统解决
            // 保存 this 的值
            let _this = this;
            // 定时器：参数1：回调函数；参数2：时间；
            setTimeout(function () {
                console.log(this);
                _this.style.background = 'pink';
            }, 2000);
        });
		
        //ES6写法
        let ad = document.getElementById('ad');
        // 绑定事件：这也是错误写法，这里的this还是window
        // ad.addEventListener("click", () => {
        // // ES6写法
        // // 定时器：参数1：回调函数；参数2：时间；
        // setTimeout(() => this.style.background = 'pink',2000);
        // }
        // )
        // 绑定事件
        ad.addEventListener("click", function () {
            // ES6写法
            // 定时器：参数1：回调函数；参数2：时间；
            // 这个this才是ad
            setTimeout(() => this.style.background = 'pink', 2000);
        })
    </script>
</body>

</html>

需求-2 从数组中返回偶数的元素：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>箭头函数的实践和应用场景</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: #58a;
        }
    </style>
</head>

<body>
    <div id="ad"></div>
    <script>
        // 需求-1 点击 div 2s 后颜色变成『粉色』
        // 获取元素
        let ad = document.getElementById('ad');
        // 绑定事件：这也是错误写法，这里的this还是window
        // ad.addEventListener("click", () => {
        // // ES6写法
        // // 定时器：参数1：回调函数；参数2：时间；
        // setTimeout(() => this.style.background = 'pink',2000);
        // }
        // )
        // 绑定事件
        ad.addEventListener("click", function () {
            // ES6写法
            // 定时器：参数1：回调函数；参数2：时间；
            // 这个this才是ad
            setTimeout(() => this.style.background = 'pink', 2000);
        })
        //需求-2 从数组中返回偶数的元素
        const arr = [1, 6, 9, 10, 100, 25];
        // const result = arr.filter(function(item){
        // if(item % 2 === 0){
        // return true;
        // }else{
        // return false;
        // }
        // });
        const result = arr.filter(item => item % 2 === 0);
        console.log(result);
        // 箭头函数适合与 this 无关的回调. 定时器, 数组的方法回调
        // 箭头函数不适合与 this 有关的回调. 事件回调, 对象的方法
    </script>
</body>

</html>

场景

箭头函数适合与 this 无关的回调. 定时器, 数组的方法回调
箭头函数不适合与 this 有关的回调. 事件回调, 对象的方法

7 、ES6中函数参数的默认值

概述

ES允许给函数的参数赋初始值；

代码示例及相关说明：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    8、rest参数
    概述：
    ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments；
    参考文章：https://www.jianshu.com/p/50bcb376a419
    代码示例及相关说明：
    <title>函数参数默认值</title>
</head>

<body>
    <script>
        //ES6 允许给函数参数赋值初始值
        //1. 形参初始值 具有默认值的参数, 一般位置要靠后(潜规则)
        function add(a, b, c = 10) {
            return a + b + c;
        }
        let result = add(1, 2);
        console.log(result); // 13
        //2. 与解构赋值结合
        // 注意这里参数是一个对象
        function connect({//参数
            host = "127.0.0.1",
            username,
            password,
            port
        }) {//函数体
            console.log(host)
            console.log(username)
            console.log(password)
            console.log(port)
        }
        connect({
            host: 'atguigu.com',
            username: 'root',
            password: 'root',
            port: 3306
        })
    </script>
    </bod

8 、rest参数

概述

ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments；

参考文章：https://www.jianshu.com/p/50bcb376a419

代码示例及相关说明：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>rest参数</title>
</head>

<body>
    <script>
        // ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments；
        // ES5获取实参的方式
        function data() {
            console.log(arguments);
        }

        data("大哥", "二哥", "三哥", "四哥");
        // ES6的rest参数...args，rest参数必须放在最后面
        function data(...args) {
           // args是一个数组
            console.log(args); // fliter some every map
        }
        data("大哥", "二哥", "三哥", "四哥");
    </script>
</body>

</html>

9 、扩展运算符

介绍：

`... 扩展运算符`

能将数组转换为逗号分隔的参数序列；

扩展运算符（spread）也是三个点（…）。它好比rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包；

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>扩展运算符</title>
</head>

<body>
    <script>
        // ... 扩展运算符能将数组转换为逗号分隔的参数序列
        //声明一个数组 ...
        const tfboys = ['易烊千玺', '王源', '王俊凯'];
        // => '易烊千玺','王源','王俊凯'
        // 声明一个函数
        function chunwan() {
            console.log(arguments);
        }
        chunwan(...tfboys); // chunwan('易烊千玺','王源','王俊凯')
    </script>
</body>

</html

应用

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>扩展运算符应用</title>
</head>

<body>
    <div id="d1"></div>
    <div id="d2"></div>
    <script>
        //1. 数组的合并 
        const kuaizi = ['王太利', '肖央'];
        const fenghuang = ['曾毅', '玲花'];
        // 传统的合并方式
        // const zuixuanxiaopingguo = kuaizi.concat(fenghuang);
        const zuixuanxiaopingguo = [...kuaizi, ...fenghuang];
        console.log(zuixuanxiaopingguo);

        //2. 数组的克隆
        const sanzhihua = ['E', 'G', 'M'];
        const sanyecao = [...sanzhihua]; // ['E','G','M']
        console.log(sanyecao);
        
        //3. 将伪数组转为真正的数组
        const divs = document.querySelectorAll('div');
        const divArr = [...divs];
        console.log(divArr); // arguments
    </script>
</body>

</html>

10 、Symbol

概述

ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是JavaScript 语言的·第七种数据类型·，是一种类似于字符串的数据类型；

参考文章：https://blog.csdn.net/fesfsefgs/article/details/108354248

特点

Symbol 的值是唯一的，用来解决命名冲突的问题；
Symbol 值不能与其他数据进行运算；
Symbol 定义的对象属性不能使用for…in循环遍历，但是可以使用Reflect.ownKeys 来获取对象的所有键名；

基本使用：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>symbol</title>
</head>

<body>
    <script>
        //创建Symbol
        let s = Symbol();
        // console.log(s, typeof s);
        let s2 = Symbol('尚硅谷');
        let s3 = Symbol('尚硅谷');
        console.log(s2 == s3); // false
        //Symbol.for 创建
        let s4 = Symbol.for('尚硅谷');
        let s5 = Symbol.for('尚硅谷');
        console.log(s4 == s5); // true
        //不能与其他数据进行运算
        // let result = s + 100;
        // let result = s > 100;
        // let result = s + s;
        
        //七种数据类型
        // USONB you are so niubility
        
        // u undefined
        // s string symbol
        // o object
        // n null number
        // b boolean
    </script>
</body>

</html>

Symbol创建对象属性

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Symbol创建对象属性</title>
</head>

<body>
    <script>
        // 向对象中添加方法 up down
        let game = {
            name: '俄罗斯方块',
            up: function () {},
            down: function () {}
        };
        // 我们要往game对象里面添加方法，但是怕game对象已经存在同名方法，所以我们这时使用到了Symbol
        // 方式一
        // 声明一个对象
        let methods = {
            up: Symbol(),
            down: Symbol()
        };
        game[methods.up] = function () {
            console.log("我可以改变形状");
        }
        game[methods.down] = function () {
            console.log("我可以快速下降!!");
        }
        console.log(game);
        //调用方法
        game[methods.up]();

        // 方式二
        let youxi = {
            name: "狼人杀",
            [Symbol('say')]: function () {
                console.log("我可以发言")
            },
            [Symbol('zibao')]: function () {
                console.log('我可以自爆');
            }
        }
        console.log(youxi);

        let say = Symbol('say'); //'say'类似一个注解作用，没有实际意义
        let youxi1 = {
            name: "狼人杀",
            [say]: function () {
                console.log("我可以发言")
            },
            [Symbol('zibao')]: function () {
                console.log('我可以自爆');
            }
        }
        // 调用
        youxi1[say]();
    </script>
</body>

</html>

Symbol内置值：

概述

除了定义自己使用的 Symbol 值以外，ES6 还提供了 11 个内置的 Symbol 值，指向语言内部使用的方
法。可以称这些方法为魔术方法，因为它们会在特定的场景下自动执行；

方法：

Symbol.isConcatSpreadable 对象的 Symbol.isConcatSpreadable 属性等于的是一个布尔值，表示该对象用于
Array.prototype.concat()时，是否可以展开。
Symbol.species 创建衍生对象时，会使用该属性
Symbol.match 当执行 str.match(myObject) 时，如果该属性存在，会调用它，返回该方法的返回值。
Symbol.replace 当该对象被 str.replace(myObject)方法调用时，会返回该方法的返回值。
Symbol.search 当该对象被 str. search (myObject)方法调用时，会返回该方法的返回值。
Symbol.split 当该对象被 str. split (myObject)方法调用时，会返回该方法的返回值。
Symbol.iterator 对象进行 for...of 循环时，会调用 Symbol.iterator 方法，返回该对象的默认遍历器
Symbol.toPrimitive 该对象被转为原始类型的值时，会调用这个方法，返回该对象对应的原始类型值。
Symbol. toStringTag 在该对象上面调用 toString 方法时，返回该方法的返回值
Symbol. unscopables 该对象指定了使用 with 关键字时，哪些属性会被 with环境排除。

特别的： Symbol内置值的使用， 都是作为某个对象类型的属性去使用 ；

演示：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Symbol内置属性</title>
</head>

<body>
    <script>
        class Person {
            static[Symbol.hasInstance](param) {
                console.log(param);  ///可以自定义类型检测
                console.log("我被用来检测类型了");
                return false;
            }
        }

        let o = {};
        console.log(o instanceof Person);


        const arr = [1, 2, 3];
        const arr2 = [4, 5, 6];
        // 合并数组：false数组不可展开，true可展开
        arr2[Symbol.isConcatSpreadable] = false;
        console.log(arr.concat(arr2));
    </script>
</body>

</html>

11 、迭代器

概述

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

特性

ES6 创造了一种新的遍历命令 for…of 循环，Iterator 接口主要供 for...of 消费；

原生具备 iterator 接口的数据(可用 for of 遍历)：

Array；
Arguments；
Set；
Map；
String；
TypedArray；
NodeList；

工作原理

创建一个指针对象，指向当前数据结构的起始位置；
第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员；
接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员；
每调用 next 方法返回一个包含 value 和 done 属性的对象；

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

代码示例及相关说明：

运行结果：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>迭代器</title>
</head>

<body>
    <script>
        // 声明一个数组
        const xiyou = ['唐僧', '孙悟空', '猪八戒', '沙僧'];
        // 使用 for...of 遍历数组
        for (let v of xiyou) {
            console.log(v); //v是值  
        }

        let iterator = xiyou[Symbol.iterator]();
        // 调用对象的next方法
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());

        // 重新初始化对象，指针也会重新回到最前面
        let iterator1 = xiyou[Symbol.iterator]();
        console.log(iterator1.next());
    </script>
</body>

</html>

迭代器自定义遍历对象：

代码实现：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>迭代器自定义遍历数据</title>
</head>

<body>
    <script>
        // 声明一个对象
        const banji = {
            name: "终极一班",
            stus: [
                'xiaoming',
                'xiaoning',
                'xiaotian',
                'knight'
            ],
            
            /*
            迭代器工作原理
            1. 创建一个指针对象，指向当前数据结构的起始位置；
			2. 第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员；
			3. 接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员；
			4. 每调用 next 方法返回一个包含 value 和 done 属性的对象；
            */
            [Symbol.iterator]() {
                // 索引变量
                let index = 0;
                // 保存this
                let _this = this;
                return {
                    next: function () {
                        if (index < _this.stus.length) {
                            const result = {
                                value: _this.stus[index],
                                done: false //false是还没有遍历完
                            };
                            // 下标自增
                            index++;
                            // 返回结果
                            return result;
                        } else {
                            return {
                                value: undefined,
                                done: true
                            };
                        }
                    }
                };
            }
        }
        // 遍历这个对象
        for (let v of banji) {
            console.log(v);
        }
    </script>
</body>

</html>

12 、生成器

概述

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

基本使用

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>生成器</title>
</head>

<body>
    <script>
        // 生成器其实就是一个特殊的函数
        // 异步编程 纯回调函数 node fs ajax mongodb
        // yield：函数代码的分隔符
        function* gen() {

            console.log(111);

            yield '一只没有耳朵';

            console.log(222);

            yield '一只没有尾部';

            console.log(333);

            yield '真奇怪';
            
            console.log(444);
        }
        let iterator = gen();
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        console.log("遍历：");
        //遍历
        for (let v of gen()) {
            console.log(v);
        }
    </script>
</body>

</html>

生成器函数的参数传递

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>生成器函数的参数传递</title>
</head>

<body>
    <script>
        function* gen(arg) {
            console.log(arg);
            let one = yield 111;
            console.log(one);
            let two = yield 222;
            console.log(two);
            let three = yield 333;
            console.log(three);
        }

        let iterator = gen("AAA");
        console.log(iterator.next()); // 会执行到yield 111;

        // next()方法是可以传入参数的，传入的参数作为第一条(上一条)语句yield 111的返回结果
        console.log(iterator.next("BBB")); // 会执行yield 222;
        console.log(iterator.next("CCC")); // 会执行yield 333;
        console.log(iterator.next("DDD")); // 继续往后走，未定义;
    </script>
</body>

</html>

生成器函数实例 1

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>生成器函数实例1</title>
</head>

<body>
    <script>
        // 异步编程 文件操作 网络操作（ajax，request） 数据库操作
        // 需求：1s后控制台输出111 再过2s后控制台输出222 再过3s后控制台输出333

        // 一种做法：回调地狱
        // setTimeout(() => {
        //     console.log(111);
        //     setTimeout(() => {
        //         console.log(222);
        //         setTimeout(() => {
        //             console.log(333);
        //         }, 3000)
        //     }, 2000)
        // }, 1000)
        
        // 生成器做法
        function one() {
            setTimeout(() => {
                console.log(111);
                iterator.next();
            }, 1000)
        }

        function two() {
            setTimeout(() => {
                console.log(222);
                iterator.next();
            }, 1000)
        }

        function three() {
            setTimeout(() => {
                console.log(333);
                iterator.next();
            }, 1000)
        }

        function* gen() {
            yield one();
            yield two();
            yield three();
        }
        // 调用生成器函数
        let iterator = gen();
        iterator.next();
    </script>
</body>

</html>

生成器函数实例 2

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>生成器函数实例2</title>
</head>

<body>
    <script>
        // 模拟获取: 用户数据 订单数据 商品数据
        function getUsers() {
            setTimeout(() => {
                let data = "用户数据";
                // 第二次调用next，传入参数，作为第一个的返回值
                iterator.next(data); // 这里将data传入
            }, 1000);
        }
        
        function getOrders() {
            setTimeout(() => {
                let data = "订单数据";
                iterator.next(data); // 这里将data传入
            }, 1000);
        }

        function getGoods() {
            setTimeout(() => {
                let data = "商品数据";
                iterator.next(data); // 这里将data传入
            }, 1000);
        }

        function* gen() {
            let users = yield getUsers();
            console.log(users);
            let orders = yield getOrders();
            console.log(orders);
            let goods = yield getGoods();
            console.log(goods); // 这种操作有点秀啊！
        }
        let iterator = gen();
        iterator.next();
    </script>
</body>

</html>

13 、Promise

概述

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

Promise 构造函数: Promise (excutor) {}；
Promise.prototype.then 方法；
Promise.prototype.catch 方法；

基本使用

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Promise</title>
</head>

<body>
    <script>
        // 实例化 Promise 对象
        // Promise 对象三种状态：初始化、成功、失败
        
        const p = new Promise(function (resolve, reject) {
            setTimeout(function () {
                // 成功
                // let data = "数据";
                // 调用resolve，这个Promise 对象的状态就会变成成功
                // resolve(data);
                // 失败
                let err = "失败了！";
                reject(err);
            }, 1000);
        });

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

</html>

Promise封装读取文件

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Promise</title>
</head>

<body>
    <script>
        // 1、引入 fs 模块
        const fs = require("fs");

        
        // 2、调用方法，读取文件
        // fs.readFile("resources/text.txt",(err,data)=>{
        // // 如果失败则抛出错误
        // if(err) throw err;
        // // 如果没有出错，则输出内容
        // console.log(data.toString());
        // });


        // 3、使用Promise封装
        const p = new Promise(function (resolve, reject) {
            fs.readFile("resources/text.txt", (err, data) => {
                // 判断如果失败
                if (err) reject(err);
                // 如果成功
                resolve(data);
            });
        });
        p.then(function (value) {
            console.log(value.toString());
        }, function (reason) {
            console.log(reason); // 读取失败
        })
    </script>
</body>

</html>

Promise封装Ajax请求

原生请求

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <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) {
                // 判断响应状态码 200-299
                if (xhr.status >= 200 && xhr.status <= 299) {
                    // 成功
                    console.log(xhr.response);
                } else {
                    // 失败
                    console.error(xhr.status);
                }
            }
        }
    </script>
</body>

</html>

Promise封装Ajax请求

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Promise封装Ajax请求</title>
</head>

<body>
    <script>
        // 请求地址：https://api.apiopen.top/getJoke
        const p = new Promise(function (resolve, reject) {
            // 原生请求
            // 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) {
                    // 判断响应状态码 200-299
                    if (xhr.status >= 200 && xhr.status <= 299) {
                        // 成功
                        resolve(xhr.response);
                    } else {
                        // 失败
                        reject(xhr.status);
                    }
                }
            }
        });

        p.then(function (value) {
            console.log(value.toString());
        }, function (reason) {
            console.log(reason); // 读取失败
        })
    </script>
</body>

</html>

Promise.prototype.then

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Promise.prototype.then</title>
</head>

<body>
    <script>
        // 创建 Promise 对象
        const p = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve("用户数据");
            }, 1000);
        });

        const result = p.then(value => {


            // 调用then方法，then方法的返回结果是promise对象 对象的状态由回调函数的结果决定;

            // 1、如果回调函数中返回的结果是 非promise 类型的数据，
            // 状态为成功，返回值为对象的成功值resolved
            // [[PromiseStatus]]:"resolved"
            // [[PromiseValue]]:123
            // return 123;

            // 2、如果...是promise类型的数据
            // 此Promise对象的状态决定上面Promise对象p的状态
            // return new Promise((resolve,reject)=>{
            // // resolve("ok"); // resolved
            // reject("ok"); // rejected
            // });

            // 3、抛出错误
            // throw new Error("失败啦！");
            // 状态：rejected
            // value：失败啦！

            console.log(value);

        }, reason => {
            console.error(reason);
        })
        // then方法的返回结果是promise对象，所以可以链式调用
        // then里面两个函数参数，可以只写一个
        p.then(value => {}, reason => {}).then(value => {}, reason => {});
        console.log(result);
    </script>
</body>

</html>

Promise实践练习

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Promise.prototype.then</title>
</head>

<body>
    <script>
        // 1、引入 fs 模块
        const fs = require("fs");
        // 2、调用方法，读取文件
        // fs.readFile("resources/text.txt", (err, data1) => {
        //     fs.readFile("resources/test1.txt", (err, data2) => {
        //         fs.readFile("resources/test2.txt", (err, data3) => {
        //             let result = data1 + data2 + data3;
        //             console.log(result);
        //         });
        //     });
        // });
        
        // 3、使用Promise实现
        const p = new Promise((resolve, reject) => {
            fs.readFile("resources/text.txt", (err, data) => {
                resolve(data);

            });
        });
        p.then(value => {
            return new Promise((resolve, reject) => {
                fs.readFile("resources/test1.txt", (err, data) => {
                    resolve([value, data]);
                });
            })
        }).then(value => {
            return new Promise((resolve, reject) => {
                fs.readFile("resources/test2.txt", (err, data) => {
                    // 存入数组
                    value.push(data);
                    resolve(value);
                });
            })
        }).then(value => {
            console.log(value.join("\r\n"));
        })
    </script>
</body>

</html>

Promise对象catch方法

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Promise对象catch方法</title>
</head>

<body>

    <script>
        // Promise对象catch方法
        const p = new Promise((resolve, reject) => {
            setTimeout(() => {
                // 设置p对象的状态为失败，并设置失败的值
                reject("失败啦~！");
            }, 1000);
        })
        // p.then(value => {
        //     console.log(value);
        // }, reason => {
        //     console.warn(reason);
        // });
        p.catch(reason => {
            console.warn(reason);
        });
    </script>
</body>

</html>

°PJ想做前端攻城狮

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
ES6学习笔记(一)

一、概述1 、什么是 ECMAECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制造商协会，这个组织的目标是评估、开发和认可电信和计算机标准。 1994 年后该组织改名为 Ecma 国际；2 、什么是 ECMAScriptECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言；百度百科：https://baike.baidu.com/history/ECMAScript/1889420/
复制链接

扫一扫