使用循环变量进行相同命名函数调用-JavaScript

Question

我在init函数中有一个循环：

  fruits = {
    apple: { color: 'green' },
    banana: { color: 'yellow' },
    kiwi: { color: 'green' }
  }
  ngOnInit() {
    for ( let fruit in this.fruits ) {
      if ( this.fruits[fruit].color === 'green' ) {
        // I want to use the current iterator
        this[fruit]()
      }
    }
  }

您可以看到，我正在尝试对满足条件的功能进行方法调用。函数将具有与"循环迭代器"相同的名称 - 我只是不知道如何用动态名称进行调用。

  apple() { ... }
  banana() { ... }
  kiwi() { ... }

因此，如果您查看循环中的条件，则应调用apple()和kiwi()，假设它们是绿色水果。

问题：如何正确地将功能调用放在ngoninit函数中？

我尝试过： this[fruit]()，this.fruit()，this['fruit']。什么是正确的方法？

Answer 1

我认为那是做您想做的正确方法

const fruits = {
  apple: { color: 'green' },
  banana: { color: 'yellow' },
  kiwi: { color: 'green' }
}
ngOnInit() {
  for ( let fruit in this.fruittree ) {
    if ( fruits[fruit].color === 'green' ) {
      // I want to use the current iterator
      this[fruit]();
    }
  }
}

Answer 2

您需要执行以下操作以使您的代码正常工作，我们必须调用this[key_in_obj]()来运行该功能。

const fruit = {
    apple: { color: 'green' },
    banana: { color: 'yellow' },
    kiwi: { color: 'green' }
  }
for(let fru in fruit) {
  console.log(fru);
  if (fruit[fru].color === "green") {
    this[fru]();
  }
}

Answer 3

我看到您正在尝试在静态条件上使用iTerator中命名为按param值的多个函数进行一些逻辑基础，正确执行此操作的方法是创建一个函数并传递水果作为属性，然后使用switch语句根据属性值本身进行逻辑（如果其他情况，也可以使用）。

    const fruits = {
        apple: { color: 'green' },
        banana: { color: 'yellow' },
        kiwi: { color: 'green' }
    }
    handleGreenFruit(fruit: string) {
        switch (fruit) {
            case 'apple':
                console.log('do apple stuff')
                break;
            case 'kiwi':
                console.log('do kiwi stuff')
                break;
        }
    }
    ngOnInit() {
        for (let fruit in this.fruits) {
            if (this.fruits[fruit].color === 'green') {
                this.handleGreenFruit(fruit);
            }
        }
    }