ES6：拓展运算符、迭代器、数组、对象方法、模块化（重点）

最新推荐文章于 2023-01-02 16:19:43 发布

曹莓奶昔

最新推荐文章于 2023-01-02 16:19:43 发布

阅读量515

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_49555741/article/details/124693553

版权

JavaScript 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

3.6.2 constructor 构造函数

6.2 Bable 对ES6模块化代码转换

1. 拓展运算符

1.1 拓展运算符介绍

拓展运算符（...）能将数组转化为逗号分隔符的参数序列

const students = ['a', 'b', 'c']; //=>'a','b','c'形式
        function fn() {
            console.log(arguments);
        }
        fn(...students); //'a','b','c'

1.2 应用

1. 数组的合并
2. 数组克隆
3. 将伪数组装为真正的数组

2. Symbol 数据类型

2.1 介绍和创建

表示独一无二的值，不可见
不能与其他数据进行运算（NSONB undefined string symbol object null number Boolean）
对象属性不能用for in 遍历，使用Reflect.ownkeys来获取对象的所有键名

2.2 使用

向对象添加方法 up down

        // 方法一
        let game={

        }
        let methods={ // 声明一个对象
            up: Symbol(),
            down:Symbol(),
        }

        game[methods.up]=function(){
            console.log(('111'));
        }
        // 方法二
        let apps ={
            name:'wechat',
            [Symbol('do')]:function(){
                console.log('make friends'); 
            }

2.3 symbol 内置属性

Symbol.hasInstance 当其他对象使用instanceof 运算符时，判断是否为该函数的实例会调用这个方法
Symbol.isConcatSpreadable 属性等于一个布尔值，表示该对象用于Array.prototype.concat()时，是否可以展开。
Symbol.unscopables
Symbol.toStringTag
Symbol.toPrimitive

Symbol.search

Symbol.split等等

3. 迭代器

3.1 介绍

迭代器（iterator）是一种接口，为不同的数据结构提供访问机制，任何的数据结构只要部署iterator 接口，就可以完成迭代操作(就是对象里面的属性）
ES6 创建了一种新的遍历命令for..of 循环，iterator接口就是主要提供for..of消费
iterator接口数据：Array，Arguments，Set，Map，String，TypeArray, NodeList
原理：1创建一个对象，指向当前数据结构的起始位置， 2第一次调用对象的next方法，指针自动指向最后一个成员，3接下来不断调用next方法指针在往后移，直到指向最后一个成员，4每次调用next方法返回一个包含value和done属性的对象
自定义遍历数据时，想到迭代器

3.2. 生成器

3.2.1 基本概念

异步：简单说就是一个任务不是连续完成的，可以理解成该任务被人为分成两段，先执行第一段，执行完毕后再执行第二段
同步：连续的执行就叫做同步。
回调函数：是把任务的第二段单独写在一个函数里面，等到重新执行这个任务的时候，就直接调用这个函数。回调函数的英语名字callback，直译过来就是"重新调用"。

3.2.2 生成器的声明和调用

生成器是一个特殊的函数

异步函数，纯回调函数

    <script>
        // 可以跟yield 他是代码的分隔符
        function* gen() {
            console.log('hello');
            yield '111';
            console.log('您好');
            yield '222';
        }
        let iterator = gen(); //直接调用不能使用gen
        iterator.next(); //需要用next() hello
        iterator.next(); // 您好

        //遍历
        for (let v of gen()) {
            console.log(v); //hello 111 您好 222
        }
    </script>

3.2.3 生成器函数参数

  <script>
        function* gen(arg) {
            console.log(arg);
            let one = yield '111';
            console.log(one);
            let two = yield '222';
            console.log(two);
            yield '333';
        }
        // 执行获取
        let iterator = gen('aaa');
        console.log(iterator.next()); //aaa
        // next传入实参方法
        console.log(iterator.next('bbb')); //bbb
        console.log(iterator.next('ccc')); //ccc
    </script>

3.2.3 案例

案例1：1s 后台输出111 2s输出222 3s输出333

 <script>
        function one() {
            setTimeout(() => {
                console.log(111);
                iterator.next();
            }, 1000);
        }
        function two() {
            setTimeout(() => {
                console.log(222);
                iterator.next();
            }, 2000);
        }
        function three() {
            setTimeout(() => {
                console.log(333);
                iterator.next();
            }, 3000);
        }
        function* gen() {
            yield one();
            yield two();
            yield three();
        }
        let iterator = gen();
        iterator.next(); //111
    </script>

3.3 Promise

Promise 是ES6引入异步编程的新解决方案
Promise 构造函数：Promise（excutor）{ }
Promise.prototype.then 方法返回结果是promise对象，对象状态是由回调函数的结果绝对，如果回调函数返回的结果是非 promise 类型的属性，状态为成功，返回值为对象成功值
Promise.prototype.catch 方法
promise对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。

 <script>
        // Promise的基本使用
        // 实例化Promise对象
        const p = new Promise(function (resolve, reject) {
            setTimeout(() => {
                let data = '用户数据';
                // resolve
                resolve(data);

                let err = "用户数据读取失败";
                reject(err);
            }, 1000);
        });
        // 调用Promise对象的then 方法
        // value是成功的形参，reason是失败的形参
        p.then(function (value) {
            console.log(value);
        }, function (reason) {
            console.error(reason)
        })
    </script>

3.4 set

ES6 提供了新的数据结构 Set（集合）。类似于数组，但是成员的值都是唯一的,可以使用扩展运算符和for..of进行遍历

size 返回集合的元素的个数
add 增加一个新元素，返回当前集合
delete 删除元素，返回Boolean值
has 检测集合是否包含某个元素，返回Boolean值
clear 清空集合，返回undefined

    <script>
        // 声明set
        let s = new Set();
        let s2 = new Set(['1', '2']);
        console.log(s2);//['1','2']

        // for of 遍历
        for (let v of s2) {
            console.log(v); //'1', '2'
        }

        // size 元素个数
        console.log(s2.size); //2
        // add 添加元元素
        s2.add('00');
        console.log(s2); //['1','2','00']
        // delete 删除元素
        s2.delete('1');
        console.log(s2); //'2', '00'
        // has 检测
        console.log(s2.has('2')); //true
        // clear 清空
        s2.clear();
        console.log(s2); //空
    </script>

3.4.1 set 实践

<script>
        let arr = [1, 22, 1, 33, 2, 1];
        // 1.数组去重
        // 集合具有唯一性
        let res = [...new Set(arr)]
        console.log(res);
        // 2、交集
        let arr2 = [1, 44, 33];
        // let rel2 = [...new Set(arr).filter(item => {
        //     let s2 = new Set(arr2);
        //     if(s2.has(item)){
        //         return true;
        //     }else{
        //         return false;
        //     }
        // })];
        // 代码简化
        let res2 = [...new Set(arr)].filter(item => new Set(arr2).has(item));
        console.log(res2);
        // 3. 并集
        let uniq = [...new Set([...arr, ...arr2])]
        console.log(uniq);
        // 4. 差集 (与并集相反)
        let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));
        console.log(diff);
    </script>

3.5 Map

本质上是键值对的集合（Hash 结构），键的范围不限于字符串，各种类型的值（对象）也可以当做键，可以使用扩展运算符和for..of进行遍历

size 返回map的元素的个数
set 增加一个新元素，返回当前map
get 返回键名对象的键值
has 检测Map是否包含某个元素，返回Boolean值
clear 清空集合，返回undefined

用法类似上面set

3.6 class

class 作为对象模板，ES6 的 class 可以看作是一个语法糖，它的绝大部分功能，ES5 都可以做到；ES6让原型变得更加清晰，更像面向对象编程的写法

class 声明类
constructor 定义构造函数初始化
extend 继承父类
super 调用父类构造函数方法
static 定义静态方法和属性
父类方法可以重写

3.6.1 创建 class

class name { }

创建实例：(必须用new实例化对象）

3.6.2 constructor 构造函数

是类用于传递参数，返回实例对象，会自动调用这个函数

注意：类名要首字母大写建议

静态成员：实例对象和函数对象的属性是不同的

    <script>
        class Star {
            constructor(uname) {
                this.uname = uname;
            }
        }
        var ls = new Star('lisa');
        console.log(ls.uname); //lisa
        //静态成员
        Star.sex = 'girl';
        console.log(ls.sex); //undefined 实例对象和函数对象的属性是不同的
    </script>

3.6.3 类添加方法

类里面的函数不需要加function

多个函数间用逗号分隔

class star {
            constructor(uname) {
                this.uname = uname;
            }
            // 添加方法
            sing(){
                console.log('abc');
            }
        }

3.6.4 继承 extends

子类可以继承父类的方法和属性

语法：子类 extends 父类 { }；如 Son extens Don { }；

    <script>
        class Dad {
            constructor() {

            }
            money() {
                console.log(100);
            }
        }
        class Son extends Dad {

        }
        var son = new Son();
        son.money(); //100
    </script>

3.6.5 super 关键字

用于访问和调用对象父类上的函数。可以调用父类的构造函数和其他函数

如果父类和子类都有同一个方法，子类输出时会执行子类的（把父类的方法隐藏了）
继承的属性或者方法中的查找原则：就近原则
在构造函数中使用super，必须放在this 前（必须先调用父类的构造函数，在使用子类的构造方法）

    <script>
        class Dad {
            constructor(x, y) {
                this.x = x;
                this.y = y;
            }
            sum() {
                console.log(this.x + this.y);
            }

        }
        class Son extends Dad {
            constructor(x, y) {
                super(x, y) //必须写在this前
                this.x = x;
                this.y = y;
            }
            sub() {
                console.log(this.x - this.y);
            }
        }

        var son = new Son(9, 4); //5 13
    </script>

3.6.6 类的两注意

ES6中类没有提升，必须先定义类，在实例化对象
类里面共有的属性和方法一定要添加this使用
类的指向问题

        // 类的指向问题
        class Dad {
            constructor(x, y) {
                // constructor的this指的是 创建的star 对象
                this.x = x;
                this.y = y;
            }
            sum() {
                // 函数里面的this指向调用者
                console.log(this.x + this.y);
            }
        }

3.6.7 get 和set

class Phone {
            get price() {
                console.log("属性被读取");
                return 1000;
            }
            set price(newPrice) {
                console.log("属性被修改了");
            }
        }
        // 实例化对象
        let s = new Phone();
        s.price = 'free'; //属性被修改了

4. ES6的数组拓展

Number.isFinite 检测一个数值是否为有限数
Number.isNaN 检测一个数值是否为NaN
Number.perseInteger 判断一个数是否为整数
Math. trunc 将小数部分抹去
Math.sign 判断一个数到底是为正数、负、零

5. 对象方法的拓展

Object.is() 判断两数得值全等
Object.assign() 对象的合并
Object.setPrototype Object.getPrototype 设置原型对象和获得原型对象

6. 模块化（重点）

优点：防止命名冲突，代码复用，高维护性

6.1 ES6模块化语法

主要由 import 和 export 组成

export 命令规定模块的对外接口
import 命令用于输出其他模块对外功能

6.1.1模块化模块方法一

三种暴露方式：

分别暴露：export
统一暴露：export { }
默认暴露：default export { }

导入三方式方式：

通用的导入 import * as m1 from "./m1.js";
解构赋值形式 import { bear, friends } from "./m2.js";
简便形式（针对默认暴露） import m3 from "./m3.js";

        // 引用三方法
        // 引入m1.js内容
        import * as m1 from "./m1.js";
        // 引入m2.js内容
        import * as m2 from "./m2.js";
        // 引入m3.js内容
        import * as m3 from "./m3.js";
        console.log(m3);

        // 1.通用的导入方式
        import * as m1 from "./m1.js";

        // 2. 解构赋值形式
        import { bear, friends } from "./m2.js";
        console.log(bear); //熊大
        console.log(friends); //熊二
        import { default as m3 } from "./m3.js"
        // 如果重名可以用别名

        // 3. 简便形式 针对默认暴露
        import m3 from "./m3.js";

6.1.2 模块化模块方法二

创建一个放全部的 js 文件，然后在html 文件里面导入这个js文件

 <script src="./app.js" type="module"></script>  //html文件

// 模块引入  app.js文件
import * as m1 from "./m1.js";
import * as m2 from "./m2.js";
import * as m3 from "./m3.js";

6.2 Bable 对ES6模块化代码转换

babel 官网：Babel 中文网 · Babel - 下一代 JavaScript 语法的编译器 (babeljs.cn)

曹莓奶昔

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ES6：拓展运算符、迭代器、数组、对象方法、模块化（重点）

目录1. 拓展运算符1.1 拓展运算符介绍1.2 应用2. Symbol 数据类型2.1 介绍和创建2.2 使用2.3 symbol 内置属性Symbol.search3. 迭代器3.1 介绍1. 拓展运算符1.1 拓展运算符介绍拓展运算符（...）能将数组转化为逗号分隔符的参数序列const students = ['a', 'b', 'c']; //=>'a','b','c'形式 function fn() { .
复制链接

扫一扫