Question

我目前正在研究creating a library in Angular，并且想知道是否有什么方法可以在迭代器的this方法中使用next()（请参见代码）

class Group {
  constructor() {
    this.members = [];
  }

  add(member) {
    if (this.has(member)) return;
    this.members.push(member);
  }

  delete(member) {
    if (!this.has(member)) return;
    this.members.splice(this.members.indexOf(member), 1);
  }

  has(member) {
    return this.members.indexOf(member) !== -1
  }

  static from(iterable) {
    const group = new Group();
    for (const element of iterable) {
      group.add(element);
    }

    return group;
  }

  [Symbol.iterator]() {
    let current = 0;
    let last = this.members.length - 1;

    const that = this;

    return {
      next() {
        if (current <= last) {
          return {
            done: false,
            value: that.members[current++]
          }
        } else return { done:true }
      }
    }
  }
}

for (let value of Group.from(["a", "b", "c"])) {
  console.log(value);
}

如您所见，我正在使用这种奇怪的const that = this模式。有什么办法可以摆脱它吗？除了使用箭头函数并将迭代器提取到单独的类外，如解决方案中所建议的那样。

Answer 1

最排序的方法可能是在构造函数部分中实现对象的默认迭代器，并使用yield* expression委派给数组this.members的另一个生成器。

constructor() {
    this.members = [];
    this[Symbol.iterator] = function* () {
        yield* this.members;
    }
}

class Group {
    constructor() {
        this.members = [];
        this[Symbol.iterator] = function* () {
            yield* this.members;
        }
    }

    add(member) {
        if (this.has(member)) return;
        this.members.push(member);
    }

    delete(member) {
        if (!this.has(member)) return;
        this.members.splice(this.members.indexOf(member), 1);
    }

    has(member) {
        return this.members.indexOf(member) !== -1
    }

    static from(iterable) {
        const group = new Group();
        for (const element of iterable) {
            group.add(element);
        }
        return group;
    }
}

for (let value of Group.from(["a", "b", "c"])) {
    console.log(value);
}

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

您可以使用箭头功能

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">


<div class="container">
            <div class="row container-custom justify-content-center">
                <h2>Blog</h2>
                <div class='d-flex flex-wrap pt-5'>
                    <div class="col-sm-12 col-md-4">
                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHBMzMRL0g3ELio_DdCRvdajdF812AQPP2AbmM_jYr_66CnwgS" alt="">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh sem, ultricies sit amet tellus ut, iaculis interdum ante. Quisque at nibh ac diam faucibus congue. 
                        </p>
                        <div class="custom-link">
                            <a href="" class="buttons">Read more ></a>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-4">
                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQh3Afn3A1FKb24tpO6eAdqr8hCdnafjqwCNqgjdSAWK1igoWfk" alt="">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh sem, ultricies sit amet tellus ut, iaculis interdum ante. Quisque at nibh ac diam faucibus congue. 
                        </p>
                        <div class="custom-link">
                            <a href="" class="buttons">Read more ></a>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-4">
                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFsb6TxovKdTNx-8gdo1R01nZXxRRauett2KQ_ci76VgjK2hR7" alt="">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh sem, ultricies sit amet tellus ut, iaculis interdum ante. Quisque at nibh ac diam faucibus congue. 
                        </p>
                        <div class="custom-link">
                            <a href="" class="buttons">Read more ></a>
                        </div>
                    </div>
                </div>
            </div>

在JS迭代器的next（）方法中访问“ this”？

2 个答案: