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

Question

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

如果所需的类是第一个或唯一的数组元素，那么javascript函数"find“将返回对匹配元素未定义的内容，这对我来说是没有意义的。查找方法规范

我找不到错误。每个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))，您将看到数组中有当前元素，然后可以调用拆分函数。