ECMAScript 6.0 知识点汇总(二)

野性酷女 2022-11-29 00:55 192阅读 0赞

### 迭代器Iterator ###

// Iterrator 是一种新的遍历机制，它有两个核心
    // 1.迭代器是一个接口，能快捷的访问数据，通过Symbol.iterator来创建迭代器。
    // 2.迭代器是用于遍历数据结构的指针(数据库的游标)。
    
    // 迭代器的使用
    let items = ['one', 'two', 'three'];
    // 创建迭代器
    let ite = items[Symbol.iterator]();
    console.log(ite.next()); // {value: "one", done: false} done如果为false表示遍历在继续，如果done为true表示遍历完成
    console.log(ite.next()); // {value: "two", done: false}
    console.log(ite.next()); // {value: "three", done: false}
    console.log(ite.next()); // {value: undefined, done: true}

### 生成器Generator ###

// Generator函数可以yield关键字，将函数挂起，为了改变执行流提供了可能，同时为异步编程提供了方案
    // 它与普通函数的区别
    // 1.function后面函数名有个*
    // 2.只能在函数内部使用yield关键字将函数挂起
    function* func() {
        
        console.log('one');
        yield 2;
        console.log('two');
        yield 3;
        console.log('end');
    }
    // 返回一个遍历的对象，可以调用next()
    let fn = func();
    console.log(fn);
    console.log(fn.next());
    console.log(fn.next());
    console.log(fn.next());
    // 总结:generator函数是分段执行，yield语句是暂停执行，可以使用next()恢复执行。
    function* add() {
        
        console.log('start');
        // x不是yield '2'的返回值，它是next()调用，恢复当前yield()执行传入的实参
        let x = yield '2';
        console.log('one:' + x);
        let y = yield '3';
        console.log('two:' + y);
        return x + y;
    }
    let fuc = add();
    console.log(fuc.next()); // {value: '2', done: false}
    console.log(fuc.next(20)); // {value: '3', done: false}
    console.log(fuc.next(30)); // {value: 50, done: true}
    // 使用场景: 为不具备Interator接口的对象提供遍历
    function* objectEntries(obj) {
        
        // 获取对象的所有key保存到数组[name, age]
        const propKeys = Object.keys(obj);
        for(let propkey of propKeys) {
        
            yield [propkey, obj[propkey]];
        }
    }
    let obj = {
        
        name: 'lzx',
        age: 20
    };
    obj[Symbol.iterator] = objectEntries;
    console.log(obj);
    for(let [key, value] of objectEntries(obj)) {
        
        console.log(`${
          key}-${
          value}`);
    }

### class类的用法 ###

// es5制造类
    /* function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    Person.prototype.sayName = function() {
        return this.name;
    }
    let p1 = new Person('lzx', 20);
    console.log(p1); // {name: 'lzx', age: 20}*/
    class Person{
        
        constructor(name, age) {
        
            this.name = name;
            this.age = age;
        }
    }
    // 通过Object.assign()方法一次性向类添加方法
    Object.assign(Person.prototype, {
        
        sayName() {
        
            return this.name;
        },
        sayAge() {
        
            return this.age;
        }
    });
    let p1 = new Person('lzx', 20);
    console.log(p1); // {name: 'lzx', age: 20}*/

### class类的继承extends ###

### ES6模块化Module ###

> es6模块功能主要有两个命令构成: export和import  
> export用于规定模块的对外接口，import用于输入其他模块提供的对外接口  
> 一个模块就是一个独立的文件