forEach 循環在 Else 語句中不起作用

Question

我正在嘗試合並以下兩個數組並創建一個新數組，出於某種原因，我在 Else 語句中的 forEach 循環返回未定義。 不確定我是否做錯了什么或 forEach 不應該在 else 語句中？ 如果有任何其他方法可以獲得確切結果，請告訴我。

堆棧閃電戰： https : //stackblitz.com/edit/angular-ivy-145nbf ? file = src%2Fapp%2Fapp.component.ts

public merged = [];
public ArrayOne = [
  {
    time: "05:00 PM",
    maxNumber: 4
  },
  {
    time: "05:30 PM",
    maxNumber: 4
  },
  {
    time: "06:30 PM",
    maxNumber: 4
  }
];

public ArrayTwo = [
  {
    active: 2,
    time: "05:00 PM"
  }
];


mergeArray() {
  let t = this.ArrayOne.map((element, i) => {
    let d = {
      time: element.time,
      maxNumber: element.maxNumber,
      active: this.getActive(this.ArrayTwo)
    };
    this.merged.push(d);
    console.log(d);
  });
}

getActive(arr2) {
  if (arr2.length === 0 || arr2 === null || arr2 === undefined) {
    return 0;
  } else {
    arr2.forEach((element, i) => {
      if (element.time === this.ArrayOne[i].time) {
        return element.active;
      } else {
        return 0;
      }
    });
  }
}

預期結果

public merged = [
    {
      time: "05:00 PM",
      maxNumber: 4,
      active: 2
    },
    {
      time: "05:30 PM",
      maxNumber: 4,
      active: 0
    },
    {
      time: "06:30 PM",
      maxNumber: 4,
      active: 0
    }

];

Answer 1

除了拋出異常之外，沒有辦法停止或中斷 forEach() 循環。 如果您需要這樣的行為，forEach() 方法是錯誤的工具。

提前終止可以通過以下方式完成：

• 一個簡單的循環
• for...of 循環
• Array.prototype.every()
• Array.prototype.some()
• Array.prototype.find()
• Array.prototype.findIndex()

因此，您應該使用上述方法之一而不是forEach() 。

Answer 2

使用 for 循環可以實現您的結果。 您不能使用 forEach 循環返回值。

    import { Component, VERSION } from "@angular/core";

    @Component({
      selector: "my-app",
      templateUrl: "./app.component.html",
      styleUrls: ["./app.component.css"]
    })
    export class AppComponent {
      constructor() {}
      public merged = [];
      public ArrayOne = [
        {
          time: "05:00 PM",
          maxNumber: 4
        },
        {
          time: "05:30 PM",
          maxNumber: 4
        },
        {
          time: "06:30 PM",
          maxNumber: 4
        }
      ];

      public ArrayTwo = [
        {
          active: 2,
          time: "05:00 PM"
        }
      ];

      mergeArray() {
        let t = this.ArrayOne.map((element, i) => {
        let d = {
            time: element.time,
            maxNumber: element.maxNumber,
            active: this.getActive(this.ArrayTwo)
        };
        this.merged.push(d);
        console.log(d);
      });
    }

    getActive(arr2) {
      if (arr2.length === 0 || arr2 === null || arr2 === undefined) {
        return 0;
      } else {
        for (let i = 0; i < arr2.length; i++) {
          if (arr2[i].time === this.ArrayOne[i].time) {
            return arr2[i].active;
          } else {
            return 0;
          }
        }
      }
    }
  }

Answer 3

TL; 博士

這是一個解決方案

mergeArray(): void {
  const t = this.ArrayOne.map((element, i) => {
    return {
      time: element.time,
      maxNumber: element.maxNumber,
      active: this.getActive(element)
    };
  });
  this.merged.push(t);
}

getActive(element: {time: string, maxNumber: number}): number {
  return this.ArrayTwo
  ?.find(e => e.time === element.time)
  ?.active ?? 0;
}

細節

您的代碼有很多明顯錯誤的地方，還有很多地方只是不好的做法，盡管我在上面的解決方案中修復了一些不好的做法，但我將把對不良做法的解釋排除在我的回答范圍之外。

您的代碼：

mergeArray() {
  // t will be void[]
  let t = this.ArrayOne.map((element, i) => {
    let d = {
      time: element.time,
      maxNumber: element.maxNumber,
      active: this.getActive(this.ArrayTwo)
    };
    this.merged.push(d);
    console.log(d);
    // missing return value
  });
}

1. map回調不返回任何值，因此t將是undefined項的數組：請參閱Array.prototype.map
2. 將實例字段 ( ArrayTwo ) 作為參數傳遞給實例方法 ( getActive ) 是沒有意義的，因為它已經可以訪問該字段。

您的代碼：

getActive(arr2) {
  // `arr2` would be falsey if it is null or undefined,
  // no need to check for each specifically
  if (arr2.length === 0 || arr2 === null || arr2 === undefined) {
    return 0; // if returning from within an `if` statement...
  } else {    // the `else` is redundant
    // what if `arr2` has more elements than `ArrayOne`? -> exception!
    for (let i = 0; i < arr2.length; i++) {
      if (arr2[i].time === this.ArrayOne[i].time) {
        return arr2[i].active;
    } else {  // again `else` is redundant
      return 0;
    }
  }
}

從邏輯上講，我認為沒有理由按索引搜索

Answer 4

 var merged = []; var ArrayOne = [ { time: "05:00 PM", maxNumber: 4 }, { time: "05:30 PM", maxNumber: 4 }, { time: "06:30 PM", maxNumber: 4 } ]; var ArrayTwo = [ { active: 2, time: "05:00 PM" } ]; function mergeArray() { let t = this.ArrayOne.map((element, i) => { let d = { time: element.time, maxNumber: element.maxNumber, active: this.getActive(this.ArrayTwo,element.time) }; this.merged.push(d); console.log(d); }); } function getActive(arr2,time) { if (arr2.length === 0 || arr2 === null || arr2 === undefined) { return 0; } else { const elementSearched = arr2.find(element =>element.time === time); return elementSearched !=undefined ? elementSearched.active:0 } } mergeArray()