Question

我有一个ES2015模块：

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}`;
    }
}

在我的main.js中我有这个：

import ArrayCollection from './ArrayCollection';

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

let searchResult = Numbers.search(4);

console.log(searchResult);

为什么console.log会返回undefined？

我正在尝试在数组中搜索某个项目，如果它在那里返回它。我知道ES6中有一些特殊的方法，但我只是想知道上面的代码有什么问题。

感谢。

===编辑===

如果您通过webpack或rollup运行ES6代码以上，它会生成以下通过任何浏览器运行的vanilla代码：

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);

这是产生相同错误的JsFiddle。如果我能对ES6版本而不是编译版本进行修正，那将是很好的。

Answer 1

您的代码存在两个问题：

在forEach回调内返回只会退出回调，而不是搜索功能。这意味着即使您在回调中返回，结果也始终为Your array does not contain a 4。
小心==运算符。除非你非常熟悉强制，否则我建议使用三等号运算符（===）。请参阅：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators

您可以更简单地编写代码，并使用.indexOf避免出现问题：

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}`;
    }
}

从方法返回字符串生成未定义

1 个答案: