Rückkehr String von Verfahren erzeugt undefiniert

Question

ich ein ES2015-Modul haben:

export default class ArrayCollection { 

    constructor(items = []) { 
     this.items = items; 
    } 

    search(query) { 
     this.items.forEach(function (item, index) { 
      if (query == item) { 
       return `Your query ${query} was found in the array on the ${index} index`; 
      }; 
     }); 

     return `Your array does not contain a ${query}`; 
    } 
} 

Und in meinem main.js Ich habe dies:

import ArrayCollection from './ArrayCollection'; 

let Numbers = new ArrayCollection([2, 4, 6, 8, 10]); 

let searchResult = Numbers.search(4); 

console.log(searchResult); 

Warum funktioniert die console.log Rückkehr undefined?

Ich versuche, ein Array nach einem Element zu suchen und wenn es da ist, um es zurückzugeben. Ich weiß, dass es in ES6 spezielle Methoden gibt, aber ich möchte nur wissen, was mit dem obigen Code nicht stimmt.

Danke.

=== === EDIT

Wenn Sie über ES6 Code ausführen durch webpack oder rollup es erzeugt den folgenden Vanille-Code, der über jeden Browser läuft:

var ArrayCollection = function ArrayCollection(items) { 
    if (items === void 0) items = []; 

    this.items = items; 
}; 

ArrayCollection.prototype.search = function search (query) { 
    this.items.forEach(function (item, index) { 
     if (query == item) { 
      return ("Your query " + query + " was found in the array on the " + index + " index"); 
     } 
    }); 

    // return `Your array does not contain a ${query}`; 
}; 


var Numbers = new ArrayCollection([2, 4, 6, 8, 10]); 

var searchResult = Numbers.search(4); 

alert(searchResult); 

Hier ist die JsFiddle Das erzeugt den gleichen Fehler. Es wäre schön, wenn ich anstelle der kompilierten Version eine Korrektur für die ES6-Version bekommen könnte.

Answer 1

Es gibt zwei Probleme mit Ihrem Code:

1. innerhalb des forEach Rückruf Rückkehr wird nur den Rückruf beenden, nicht die Suchfunktion. Selbst wenn Sie innerhalb des Callbacks zurückkehren, ist das Ergebnis immer Your array does not contain a 4.
2. Seien Sie vorsichtig mit dem Operator ==. Sofern Sie nicht mit Zwang vertraut sind, würde ich empfehlen, stattdessen den Triple-Equal-Operator zu verwenden (===). Siehe: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators

Sie Ihren Code schreiben könnte noch einfacher und vermeiden Ihre Probleme .indexOf mit:

export default class ArrayCollection { 

    constructor(items = []) { 
     this.items = items; 
    } 

    search(query) { 
     if (this.items.indexOf(query) > 0) { 
      return `Your query ${query} was found in the array on the ${index} index`; 
     }; 

     return `Your array does not contain a ${query}`; 
    } 
}