使用循环变量进行同名函数调用-Javascript

时间:2019-03-13 15:54:59

标签: javascript angular typescript ecmascript-6

我在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']。正确的方法是什么?

3 个答案:

答案 0 :(得分:2)

我认为这是做自己想要的事的正确方法

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]();
    }
  }
}

答案 1 :(得分:1)

您需要执行以下操作才能使代码正常工作,我们必须调用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]();
  }
}

答案 2 :(得分:0)

我看到您正在尝试使用在迭代器中按参数值命名的多个函数在静态条件下进行一些逻辑操作,正确的方法是创建一个函数并将该水果作为​​属性传递,然后执行使用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);
            }
        }
    }