Javascript find 方法在第一次匹配后不会停止

Question

我的问题是，我想通过 javascript 提取特定的 css 类(grid-8/col-4)。

如果所需的类是第一个或唯一的数组元素，则 javascript 函数“find”会为匹配元素返回未定义，这对我来说没有意义。 find method specification

我找不到错误。每个 console.log 语句都会返回预期值，“find”函数除外。

希望您能给我一点提示!

HTML:

<div class="grid-8 layout">

    <div class="col-4 master">
            <h1>Headline</h1>
            <p>Lorem ipsum dolor sit amet.</p>
    </div>
</div>

JavaScript:

$(function() {
    var $layout = $(".layout");
    var $elem = $(".master");

    var layoutColumNumber = getNumberOfColums($layout, 'grid');
    var elementColumNumber = getNumberOfColums($elem, 'col');

    function getNumberOfColums(object, type){
        var classArray = getElementClassArray(object);
        var elementColWidth = null;

        switch(type){
            case 'grid':
            elementColWidth = classArray.find(gridClassPosition).split("-")[1];
            break;
            case 'col':
            elementColWidth = classArray.find(colClassPosition).split("-")[1];
            break;
        }
        return elementColWidth;
    }

    function getElementClassArray(object){
        return object.attr('class').split(' ');
    }

    function gridClassPosition(element, index, array){
        return (element.startsWith('grid-')) ? index : false;
    }

    function colClassPosition(element, index, array){
        return (element.startsWith('col-')) ? index : false;
    }

});

Answer 1

答案是，数组中第一个元素的索引是 0。在 JavaScript 中，0 不是真值。这是一个错误的值。
这就是 find 函数返回“未定义”的原因，正如规范中正确描述的那样。

在这种情况下，返回值并不重要。因此，如果“find”到达所需的元素，则返回 true 就足够了。

通过console.log(classArray.find(colClassPosition))，您将看到数组中存在当前元素，您可以在其中调用 split 函数。